MVC-Model（模型）、View（视图）和Controller(控制)

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三类对象。
MVC是Model-View-Controller,也就是我们通常所说的模型-视图-控制器。

model

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

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

view

View表示表现层，也就是用户界面，对于网页来说，就是用户看到的网页HTML代码。当模型的数据发生变化，视图也会相应的刷新。

let View={
  el:{要重复渲染的元素},
  html:{初始化显示在页面上的内容}，
  init()
  {
     //初始化
  }，
  render()
  {
     //渲染页面
  }
}

Controller

/表示控制层，用来对原始数据（Model）进行加工，处理用户的行为和数据model的改变并传送到View。

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() { 自动绑定事件 }
}

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’) （触发事件）
eventBus.on(‘m:updated’, () => { console.log(‘here’) })（监听事件）

模块化

在一个完整的页面应用中，不同的节点功能，不同的结构可以规划为多个模块，每个模块的实现的方式以及用到的技术大不相同，使用模块化编程可以减小各个模块之间的影响和联系，可以更方便的优化代码和重构代码，提高我们代码的重用性，便于后期维护

表驱动编程

将重复的代码，汇集到一个hash表中，使用遍历的方法进行循环执行，提高代码的可维护性和阅读性。
举个例子，对几个按钮依次进行事件绑定。

events:{
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
    autoBindEvents(){
    for(let key in c.events){
      const value = c[c.events[key]] //c[key] = value
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      v.el.on(part1, part2, value)
    }
  },

浅析mvc