浅析 MVC

MVC 是什么，三个对象分别做什么

1. MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织
2. MVC即 Model+View+Controller

• M-Model数据模型：负责操作所有数据

let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    },
    get:{获取数据}
}

• V-View视图：负责所有UI界面

let View={
    el:要刷新的元素，
    html：'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    }，
    render(){
        刷新页面
    }
}

• C-Controller控制器：负责其他

//示例
let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    }，
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

EventBus 有哪些 API，是做什么用的

1. EventBus基本的api有on（监听事件），trigger(emit)（触发事件）,off（取消监听）方法。
2. 用于模块间的通讯，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理

//触发事件：注意事件名不能有空格
eventBus.trigger('m:update')  
//监听事件
 eventBus.on('m:update',()=>{ //名字不能有空格
            v.render(m.data.n)
            localStorage.setItem('x', m.data.n)
        })

3. 可以用jquery引入：

const eventBus = $({window})

表驱动编程是做什么的

1. 表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)
2. 表驱动编程是一种很重要的编程思想，它的理念是从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码
3. 事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力

const c = {
    events: {    //哈希表
        'click #add1':'add',
        'click #minus1':'minus',
        'click #mul2':'mul',
        'click #divide2':'divide'
    },
    add() {
        m.update({n:m.data.n += 1})
    },
    minus() {
        m.update({n:m.data.n -= 1})
    },
    mul() {
        m.update({n:m.data.n *= 2})
    },
    divide() {
        m.update({n:m.data.n /= 2})
    },
    autoBindEvents(){
        for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0,spaceIndex)
            const part2 = key.slice(spaceIndex+1)
            v.el.on(part1,part2,value)  //通过遍历哈希表监听事件
        }
    }
}

我理解的模块化

1. 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。
2. 让开发者便于维护,同时也让逻辑相同的部分可复用
3. 可用export 导出，用import导入