美文网首页让前端飞
JavaScript 简单的MVC+Router模式实现

JavaScript 简单的MVC+Router模式实现

作者: moonburn | 来源:发表于2017-08-10 16:26 被阅读0次

简单的MVC+Router模式实现,可能实现得不太好,先记录下来,以后再改....


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于MVC+router基本原理实现</title>
</head>
<body>
<div id="root"></div>
</body>
<script>
class Router {
    constructor(){
        this.routerFunction = {};
        this.showFunction = function(){
            return this.routerFunction;
        }
    }
    add(router,fn){
        if(!this.routerFunction[router]){
            this.routerFunction[router] = fn;
        }else{
            throw new Error(`${router}已存在`);
        }
    }
    del(router){
        if(this.routerFunction[router]){
            delete this.routerFunction[router];
        }else{
            throw new Error(`${router}不存在`);
        }
    }
    init(){
        window.addEventListener('load', () => {
            this.currentUrl = location.hash.slice(1) || '/';
            if(this.currentUrl === '/'){
                this.routerFunction[this.currentUrl]();
            }else{
                this.routerFunction['other'](this.currentUrl)
            }
        },false);
        window.addEventListener('hashchange', () => {
            this.currentUrl = location.hash.slice(1) || '/';
            if(this.currentUrl === '/'){
                this.routerFunction[this.currentUrl]();
            }else{
                this.routerFunction['other'](this.currentUrl)
            }
        },false)
    }
}

class Model{
    constructor(){
        this.value = {};
        this.showValue = function () {
            return this.value;
        }
    }
    add(valueName,value){
        if(!this.value[valueName]){
            this.value[valueName] = value;
        }else{
            throw new Error(`${valueName}已存在`)
        }
    }
    del(valueName,value){
        if(this.value[valueName]){
            this.value[valueName] = value;
        }else{
            throw new Error(`${valueName}不存在`)
        }
    }
    change(valueName,value){
        if(this.value[valueName] !== value){
            this.value[valueName] = value;
            control.change(valueName);
            return true;
        }else{
            return false;
        }
    }
}

class View{
    constructor(parent){
        this.parent = parent;
        this.template = {};
        this.showTemplate = function () {
            return this.template;
        }
    }
    add(templateName,template){
        if(!this.template[templateName]){
            this.template[templateName] = template;
        }else{
            throw new Error(`${templateName}已存在`)
        }
    }
    del(templateName){
        if(this.template[templateName]){
            delete this.template[templateName];
        }else{
            throw new Error(`${templateName}不存在`)
        }
    }
    mix(templateName,model){
        return this.template[templateName](model.value[templateName])
    }
    change(templateName,model){
        let children = document.getElementById(this.parent).children;
       for(let i = 0;i < children.length;i++){
           for(let attr of children[i].attributes){
               if(attr.nodeName.indexOf('z-') >= 0){
                   functionMix[attr.nodeName.slice(2)].call(children[i],model.value[templateName])
               }
           }
       }
    }
    init(){
        for(let props in this.template){
            document.getElementById(this.parent).innerHTML = this.mix(props,model);
        }
    }
}

class Controller{
    constructor(){
        this.control = {};
        this.showControl = function () {
            return this.control;
        }
    }
    add(name,fn){
        if(!this.control[name]){
            this.control[name] = fn;
        }else{
            throw new Error(`${name}已存在`)
        }
    }
    del(name){
        if(this.control[name]){
            delete this.control[name];
        }else{
            throw new Error(`${name}不存在`)
        }
    }
    change(name){
        view.change(name,model);
    }
    init(){
        for(let prop in this.control)this.control[prop]();
    }
}

const functionMix = {
    text:function(value) {
        this.innerText = value;
    },
    value:function(value){
        this.value = value;
    }
};

let model = new Model();
model.add('input','hello moonburn');

let view = new View('root');
view.add('input',function (value) {
    return `<input id="input" z-value="0" value="${value}"/><span z-text="0">${value}</span>`
});

let control = new Controller();
control.add('input',function () {
    let _dom = document.querySelector('#input');
    _dom.addEventListener('input',(event)=>{
        model.change('input',event.target.value)
    })
});

const router = new Router();
router.add('/',function () {
    model.change('input',model.value['input'])
});
router.add('other',function (value) {
    model.change('input',value)
});


view.init();
control.init();
router.init();
</script>
</html>

相关文章

  • JavaScript 简单的MVC+Router模式实现

    简单的MVC+Router模式实现,可能实现得不太好,先记录下来,以后再改....

  • 模板方法模式

    摘自《JavaScript设计模式与开发实践》 模板方法模式是一种只需使用继承就可以实现的非常简单的模式。 模板方...

  • JavaScript简单实现栈

    JavaScript简单实现栈主要是通过数组实现,以下是简单实现的代码

  • 单例模式

    一、实现单例模式 或者 二、透明的单例模式 三、用代理实现单例模式 四、JavaScript中的单例模式 在Jav...

  • 简单工厂模式(Simple Factory模式)

    什么是简单工厂模式 简单工厂模式的作用 具体实现

  • 阮一峰 关于JavaScript的模块化笔记

    JavaScript实现模块化的方法: 宽放大模式: var module = (function(mod){ ...

  • 创建相关的设计模式

    简单工厂模式 工厂模式 工厂生产行为交由子类去实现 抽象工厂模式 三种工厂模式的缺点:1.简单工厂:工厂类需要实现...

  • 命令模式

    摘自《JavaScript设计模式与开发实践》 命令模式是最简单和优雅的模式之一,命令模式中的命令(command...

  • 设计模式JavaScript实现

    GoF合作出版的《设计模式》这本书提供了许多有关与面向对象软件设计中常见问题的解决方案。这些模式已经出现了相当长的...

  • 斌斌学院JS-task5

    任务目的 学习与实践JavaScript的基本语法、语言特性 练习使用JavaScript实现简单的排序算法 任务...

网友评论

    本文标题:JavaScript 简单的MVC+Router模式实现

    本文链接:https://www.haomeiwen.com/subject/szihrxtx.html