什么是MVC

• M:模型（Model）：保存数据
• V:视图（View）：用户界面
• C:控制器（Controller）：业务逻辑

各部分之间的通信方式如下

• 传统意义上的MVC各个部分之间的通信是单向的

• View 传送指令到 Controller，Controller 完成业务逻辑后，要求 Model 改变状态，Model 将新的数据发送到 View，用户得到反馈

各部分伪代码实现

Model

const model = {
    data: { 程序需要操作的数据或信息 }，
    create: { 增数据 },
    delete: { 删数据 },
    update(data) { 
       Object.assign(m.data, data) //使用新数据替换旧数据
       eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新 
    },
    get:{ 获取数据 } 
}

View

const view = {
    el: 需要刷新的元素,
    html: `<h1>M V C</h1>....显示在页面上的内容`
    init(){
        v.el: 需要刷新的元素
    },
    render(){ 刷新页面 }
}

Controller

const controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件 }
}

EventBus

• EventBus是一种设计模式，主要用于组件或对象间的通信简化,EventBus包含很多方法，如：on方法用来监听事件，trigger方法用来触发事件

const model = {
    data: {
        i: come from somewhere
    }，
    update(data) {
        Object.assign(model.data, data)
        eventBus.trigger('model:updated')   //触发 model:updated 事件
    }
}
const controller = {
    //初始化方法
    init() {
        //初始化渲染
        view.render(model.data.i)
        eventBus.on('model:updated', () => {    //监听 model:updated 方法并渲染更新页面
            v.render(model.data.i)
        })
    },
}

表驱动编程

• 表驱动编程是一种很重要的编程思想，它的理念是从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码。

举一个简单的例子

function person(name){
    if(name === 'Tom'){
        console.log('爱好是打篮球')
    }else if(name === 'Jack'){
        console.log('爱好是打游戏')
    }else if(name === 'Xiaofang'){
        console.log('爱好是学习')
    }else if(){
        
    }
    ...//等等
}

看到上述代码会发现，一个查看爱好的函数如果用if else语句会变成垃圾代码，如果用哈希表来映射这些关系，就会变得非常好

const hashmap={
    'Tom':'篮球',
    'Jack':'游戏',
    'Xiaofang':'学习'
    //等等...
}
function person(name){
    if(name in hashmap){
        console.log(name+"的爱好是"+hashmap[name])
}

如此，就去除了所有重复的代码,使代码变得简洁好看。

模块化编程

• 模块化可以实现代码的可复用性，使程序的结构更加的清晰，方便后期维护。
• 模块与模块和之间是相互独立的，互不影响。