MVC是一种设计模式
    使用MVC进行代码优化，将代码分为三个模块
    分别为 M（负责数据）：Model 数据模型，提供要展示的数据
    V（负责识图）：View 负责进行模型的展示，一般就是我们见到的用户界面，客户想看到的东西
    C（负责其他事情）：Controller 接收用户请求，委托给模型进行处理，处理完毕后把返回的模型数据返回给视图，由视图负责展示。

    M： 对数据进行增删改查

    1. const m = {
    2.   data: {
    3.     n : localStorage.getItem('n')
    4.   }，
    5.   create() {},//增
    6.   delete() {},//删
    7.   update(data) {
    8.     Object.assign(m.data, data)
    9.     eventBus.trigger('m:updated')
    10.     localStorage.setItem('n', m.data.n)
    11.   },//改
    12.   get() {}, //查
    13. }

    V: 进行页面渲染

    1. const v = {
    2.   el : null ,//创建一个空的容器
    3.   html: `
    4. <div>
    5.     <div class="output">
    6.           <span id="number">{{n}}</span>
    7.     </div>
    8.     <div class="actions">
    9.       <button id="add1">+1</button>
    10.       <button id="minus1">-1</button>
    11.       <button id="mul2">*2</button>
    12.       <button id="divide2">÷2</button>
    13.     </div>
    14. </div> `，
    15.   init(container) {
    16.     v.el = $(container)}， //初始化容器
    17.   rander()        // 执行渲染
    18. }

    C: 放一些事件的操作，如：click、on等等；

    1. const c = {
    2.    init(container){    // 初始化容器
    3.            v.init(container)
    4.          v.rander()
    5.          c.autoBindEvents() //事件绑定
    6.          eventBus.on('m:updated', () => {
    7.           console.log('here')
    8.           v.render(m.data.n)
    9.       }                      // 监听，然后重新渲染
    10.        }，
    11.      // 从这里起 就是表驱动编程
    12.     events: {                    //通过哈希表来列出事件
    13.     'click #add1': 'add',
    14.     'click #minus1': 'minus',
    15.     'click #mul2': 'mul',
    16.     'click #divide2': 'div'
    17.      }，
    18.           //  事件操作函数
    19.      add() {
    20.      m.update({n: m.data.n + 1})
    21.     },
    22.        minus() {
    23.      m.update({n: m.data.n - 1})
    24.     },
    25.     mul() {
    26.      m.update({n: m.data.n * 2})
    27.     },
    28.     div() {
    29.      m.update({n: m.data.n / 2})
    30.     },                      
    32.     //  end
    33.    autoBindEvents() {
    34.     for (let key in c.events) {
    35.       const value = c[c.events[key]]
    36.       const spaceIndex = key.indexOf(' ')
    37.       const part1 = key.slice(0, spaceIndex)
    38.       const part2 = key.slice(spaceIndex + 1)
    39.       v.el.on(part1, part2, value)
    40.     }
    41. }

    EventBus ：用于优化组件/对象间的通信

    1. //引入EventBus，这是一个空对象
    2. const eventBus = $(window)
    3. eventBus.on('m',()=>{})

    常用的API 有 on（监听事件）、trigger（触发事件）、off（取消监听）

    表驱动编程
    发现代码重复后，可以将事件以及事件触发函数进行简化，通过使用哈希表将代码抽离出使其一一对应这就是表驱动编程（见C中的注释）

    模块化

    在我认为，前端的模块化就是讲代码进行抽离，通过接口与其他模块进行通信。使每个模块能够进行独立且互不影响，在需要用的时候进行代码代码调用。使用模块化可以避免命名冲突，需要什么模块加载什么模块。需要优化代码时，只需对该模块进行优化修改，不会使其他模块受到影响