浅析MVC

MVC是个啥？

MVC是一种设计模式，它将每个模块都可以写成三个对象，分别是M - Model（数据模型）负责操作所有数据， V - View（试图）负责所有UI界面， C - Controller（控制器）负责其他。结合一下下图，更能理解三者之间的关系。

接下来我们用代码更加详细的了解每个部分

Model

模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。

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

View

视图view是屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图也会随之改变。

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

Controller

控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

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

EventBus有啥用

DOM 的事件机制就是发布订阅模式最常见的实现，这大概是前端最常用的编程模型了，监听某事件，当该事件发生时，监听该事件的监听函数被调用。eventBus就是实现发布订阅模式的一种方法。

EventBus常用api

on（监听事件）
trigger（触发事件）
off（取消监听）
eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听
到后执行函数'

表驱动编程是做什么的

表驱动方法编程（Table-Driven Methods）是一种编程模式,适用场景:消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白.

c = {
     events:{
         'click #add1':'add',
         'click #minus1':'minus',
         'click #mul2':'mul',
         'click #divide2':'div'
     },
     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)
         }
     }
 }

总结

模块化就是将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。

模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这则就是模块化。

模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。