MVC

MVC 模式代表 Model-View-Controller（模型-视图-控制器）模式。这种模式用于应用程序的分层开发。

Model（模型） – 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图） – 视图代表模型包含的数据的可视化。
Controller（控制器） – 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

（MVC的框图并不唯一）

MVC是万金油，也就是说所有页面都可以用m+v+c三个对象来呈现

//m用于保存数据，操作数据
const m={
    data:{n:1},
    update(){}
}
//v负责渲染页面相关
const v={
    el:null,  //容器
    html:``,  //html代码
    render(data){}
}
//c负责其他部分，如初始化，获取元素，绑定事件等
const c={
    init(){}
    autoBindEvents(){}
    event:{}
}
复制代码

注意事项：

事不过三

同样的代码写三遍，就应该抽成一个函数
同样的属性写三遍，就应该做成共用属性（原型或类）
同样的原型写三遍，就应该用继承

代价

有的时候会造成继承层级太深，无法一下看懂代码
可以通过写文档、画类图解决

EventBus

把所有的对象看成点

一个点和一个点怎么通信
一个点和多个点怎么通信
多个点和多个点怎么通信

最终我们找出一个专用的点负责通信，这个点就是 event bus（事件总线）

在开发中经常会选择使用EventBus来进行模块间通信、解耦。

const eventBus=$(window)

由于每个模块每个对象都需要它，所以引入EventBus类。主要是为了使用它的两个方法：

on
trigger

eventBus.trigger('m:updated')//触发事件
eventBus.on('m:updated', () => {//监听事件
      //当事件发生时需要做的事情,如渲染等
    })
复制代码

view=render（data）

比起操作 DOM 对象，直接 render 简单多了
只要改变 data，就可以得到对应的 view

表驱动编程

表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

当有许多逻辑相同，但是数据不重复的代码时，比如多个if else语句，就可以改写成表驱动。把不同的数据做成哈希表，通过遍历哈希表完成逻辑，不需要多次重复的操作。比如为多个按钮绑定事件，逻辑都是相同的，通过on方法，监听某个事件，当事件触发时，调用某个事件处理函数。使用表驱动，就可以把每个监听事件不同的部分放在表里，只需要遍历一次表，就可以给所有按钮绑定事件。

表驱动编程的意义在于逻辑与数据的分离。（类似于事件委托）

例如：if-else

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '？？？'  
    }
}

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如：
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '？？？'  
    }
}
复制代码

表驱动编程

function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
    }
    return terms[term];
}
复制代码