一、MVC的三个对象

（一）M

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

let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    }
    get:{获取数据}
}

（二）V

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

let View ={
    el:要刷新的元素，
    html:'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    },
    render(){
        刷新页面
    }
}

（三）C

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

let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()})
        //当enentsBus触发'm:update'是View刷新
    },
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

两种设计模式：

view和model之间的观察者模式，view观察model，事先在此model上注册，以便view可以了解在数据model上发生的改变。
view和controller之间的策略模式

二、EventBus

（一）EventBus的作用

模块通信

解决模块之间通信的问题，view组件层面，父子组件、兄弟组件通信都可以使用eventbus处理

模块解耦

storage change事件，cookie change事件，view组件的事件等，全部转换使用Event Bus来订阅和发布，这样就统一了整个应用不同模块之间的通信接口问题。

父子页面通信

window.postMessage + Event Bus

多页面通信

storage change + Event Bus

（二） EventBus的api

on（监听事件）
trigger（触发事件）
off（取消监听）

eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'

三、表驱动编程

表驱动法就是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if 和case)。凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。

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];
}

四、如何理解模块化

模块模式就是将代码拆分成独立的块，然后再把这些块连接起来可以通过模块模式来实现。把不同的逻辑分块，然后独自封装，这样每个模块就是相互独立，每个模块可以自行决定对外暴露什么，也可以自行决定引入执行哪些外部的代码。

模块化是管理复杂性的工具。可以用过它创建逻辑彼此独立的代码，在这些代码之间声明依赖，并将它们连接在一起，更便于开发者进行管理和操作。

浅析 MVC