1 M V C

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

const m = {
    data : {
        index : parseInt(localStorage.getItem(localIndex)) || 0
    },
    create(){},
    update(data){
        Object.assign(m.data,data)
        console.log(data)  
        eventBus.trigger('m.updated')
        localStorage.setItem('app2.index',m.data.index)
        console.log(m.data.index) 
    },
    delete(){},
    get(){},

}

V 视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。

const v = {
    el:null,
    //用data-index 在dom元素上做标记
    html : (index) => {
        return `
    <div>
    <ol class='tab-bar'>
        <li class="${index === 0 ? 'selected' : ''}" data-index="0"><span>1111</span></li>
        <li class='${index === 1 ? 'selected' : ''}' data-index='1'><span>2222</span></li>
    </ol>
      <ol class="tab-content">
        <li class='${index === 0 ? 'active' : ''}'>内容1</li>
        <li class='${index === 1 ? 'active' : ''}'>内容2</li>
      </ol>
    </div>
    `
    },
    init(container){
        v.el = $(container)
    },
    render(index){
        if(v.el.children.length !== 0) v.el.empty()
        $(v.html(index)).appendTo(v.el)
    },
}

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

const c = {
    init(container){
        v.init(container),
        v.render(m.data.index),
        c.autoBindEvents()
        eventBus.on('m.updated',()=>{
            v.render(m.data.index)
        })
    },
    events:{
        'click .tab-bar li': 'x',
    },
    x(e){
        const index = parseInt(e.currentTarget.dataset.index)
        m.update({index : index})
    },
    autoBindEvents(){
        for(let key in c.events){
            const spaceIndex = key.indexOf(' ')
            const value = c[c.events[key]]
            const part1 = key.slice(0,spaceIndex)
            const part2 = key.slice(spaceIndex+1)
            v.el.on(part1,part2,value)
        }
    }  
}

2 EventBus 的API

on(){} :用于监听函数
trigger(){} 用于触发函数
off(){}  取消监听

update(data){
    Object.assign(m.data,data) 
    eventBus.trigger('m.updated')
localStorage.setItem('app2.index',m.data.index)
    console.log(m.data.index) 
}  

eventBus.on('m.updated',()=>{
    v.render(m.data.index)
})
//

3 表驱动编程

当有大量类似但不重复的代码时，可以选出其中重要的数据，将其编写成哈希表来简化代码，通过查表的方法去获取值。

const C = {
    events:{
        'click #add1': 'add',
        'click #minus1': 'minus',
        'click #mul2': 'mul',
        'click #divide2': 'div',
    },
    add(){
        M.update({n:M.data.n+1})
    },
    minus(){
        M.update({n:M.data.n-1})
    },
    mul(){
        M.update({n:M.data.n*2})
    },
    div(){
        M.update({n:M.data.n/2})
    },
    autoBindEvents(){
        for(let key in C.events){
            const spaceIndex = key.indexOf(' ')
            const value = C[C.events[key]]
            const part1 =key.slice(0,spaceIndex)
            const part2 =key.slice(spaceIndex+1)
            V.el.on(part1,part2,value)
        }
    }  
}

4 模块化

1、模块的概念；在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

2、通俗的讲，就是将不同的功能放在不同的文件中，这些文件就叫做模块，有自己的作用域，只向外暴露特定的变量和函数。好处是：1、维护方便。当部分功能或需求需要更改时，只需要找到对应的模块，更改相关的代码即可，对其他模块的代码影响较小；2、代码复用率高。

MVC

1 M V C

2 EventBus 的API

3 表驱动编程

4 模块化