MVC用于解决代码过于重复问题，优化代码结构。

一、MVC三个对象分别做什么？

• M：Model（数据类型）负责操作数据

//和数据相关的都放到m
const m={
    //初始化数据
    data:{
        n:parseInt(localStorage.getItem('n'))
    },
    //数据的增删改查方法
    create(){},
    delete(){},
    update(data){
        Object.assign(m.data,data)
        eventBus.trigger('m:updated')
        localStorage.setItem('n',m.data.n)
    },
    get(){},
}

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

//和视图相关的都放到v
const v={
    el:null,
    //初始化html
    html:`
    <div>
        <div class="output">
            <span id="number">{{n}}</span>
        </div>
        <div class="actions">
            <button id="add1">+1</button>
            <button id="minus1">-1</button>
            <button id="mul2">*2</button>
            <button id="divide2">÷2</button>
        </div>
    </div>
    `,
    init(container){
        v.el=$(container)
        v.render()
    },
    render(n){
        if(v.el.children.length===0){
        }else{
            v.el.empty()
        }
        $(v.html.replace("{{n}}", n))
        .appendTo($(v.el))
    }
}

• C：Controller（控制器）负责其他内容

//其他放在c
const c={
    init(container){
        //第一次渲染html
        v.init(container)
        v.render(m.data.n) //view=render(data)
        c.autoBindEvents()
        eventBus.on('m:updated',()=>{
            v.render(m.data.n)
        })
    },
    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)
        }
    },
}

二、关于EventBus

• EventBus是一个发布-订阅模式的事件总线，它优化了各组件间的通信
• 主要有三个重要API，分别是on、trigger、off

import $ from 'jquery'

class EventBus{
    constructor(){
        this._eventBus=$(window)
    }
    //注册一个事件监听器，当指定事件被触发时，fn将执行
    on(eventName,fn){
        return this._eventBus.on(eventName,fn)
    }
    //触发一个事件，并且可以传递任意数量的参数给监听器函数
    trigger(eventName,data){
        return this._eventBus.trigger(eventName,data)
    }
    //移除一个事件监听器
    Off(eventName,fn){
        return this._eventBus.off(eventName,fn)
    }
}

export default EventBus

三、表驱动编程

• 有大批类似但不重复的代码，只看重要数据，把重要数据做成哈希表
• 即可以在表中查找信息，不必用逻辑语句（if/case）来查找
• 表驱动编程的重要意义在于，逻辑与数据的分离

四、如何理解模块化

• 简言之，模块化就是把相对独立、功能唯一且清晰的的代码，从冗杂的代码里抽取成一个个短小精悍的模块
• 这些模块互不干扰，你我并不互知，仅提供接口供使用，方便管理和维护
• 模块化是一种最小知识原则的抽象思维，即知道的内容越少越好，各司其职