1. MVC 三个对象

MVC全称Model View Controller，即模型(model)－视图(view)－控制器(controller)。

Model: 模型持有所有的数据、状态和程序逻辑.
View: 负责界面的布局和显示.
Controller: 负责模型和界面之间的交互.

伪代码：

const m = {
    data: x // 里面是一些需要更新和改变的数据
}

const v = { 
    el: el, // el 相当于一个容器，来放置动态渲染的 html 
    html: `<div>我是需要渲染的{{x}}</div>`, //m 里的数据
    render(v.el){ 
        // 这里让 m.data.x 替换成 html 的 {{x}}
    } 然后加到 v.el 中
}

const c = { 
    events: { 
        "click #add": "add",
        "click #reduce": "reduce" 
    }, 
    add(){
        m.data.x += 1 
        v.render()
    }, 
    reduce(){
        m.data.x -= 1
        v.render() },
    autoEventSBind: {
        for(let key in events) // 读取event的结构，然后用 foreach 给每个函数添加事件,再调用 c.add 和 c.reduce,重新再用 v.render() 渲染出来
    } 
}

2. EventBus

eventBus是一个对象，它可以用来完成上述M、V、C对象间的通信。

例如，我们希望当M中的数据变化时，能够自动触发V的render，使变化后的数据即时渲染到界面上。

const eventBus = $(window) // $ 为 jquery 
const m = { 
    data: x 
    update(){
        eventBus.trigger('m:changed')
    } 
} 
// v 假装写好了
cosnt c = { 
    add(){ 
        m.data.x += 1 
        eventBus.on('m:changed', (){ 
            c.render() 
        })
    } 
}

API :

trigger 触发函数
on 监听函数
off 停止监听

3. 表驱动编程

JS中，表就是指的哈希表结构，使用表驱动编程，能使重复冗余的代码变的稳定简洁，简单讲是指用查表的方法获取值。表里可以存数据，也可以存指令，或函数等都可以。从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码。

if-else：

function translate(term) { 
    if (term === '1') {
        return '一' 
    } else if (term === '2') { 
        return '二' 
    } else if (term === '3') { 
        return '三' 
        
        ......  //省略n个
        
    } else { 
    return '？？？' 
    } 
}

表驱动：

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

4. 模块化

模块化就是把一个文件看成一个模块。每个模块有自己的命名空间.

在 MVC 的概念里模块化遵循最小知识原则。
就是把每个不相同的功能分成不同模块，互不依赖，互补影响，有利于维护和读写。

以前，实现一个应用需要引入html、css、js。
有了模块化的思想，只需引入一个js就可以实现。
在main.js中引入各个模块的js，各个js再各自引用自己的css、创建自己的html。

《浅析MVC》

1. MVC 三个对象

2. EventBus

3. 表驱动编程

4. 模块化