MVC 三个对象

MVC（Model–view–controller）模式是一种设计模式，这种设计模式将代码的每个模块都可以写成三个对象：

M：模型（Model）负责操作所有的数据
V：视图（View）负责所有用户可见的UI界面
C：控制器（Controller）负责其他 Model层

const M = { 
  data: {},  //数据 
  create():{},  //增 
  delete():{},  //删
  update(data){ //改
    Object.assign(m.data,data)//用新数据替换旧数据     
    eventBus.trigger('m:update')//eventBus触发事件
    }, 
  get():{}  //查 
}

View层

const v = { 
  el:null, 
  html: `......` 
  init(container){ 
    v.el:$(container) 
  }，
  render(){}   //渲染页面  
}

Controller层

const c = {
   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又叫事件总线,可以用来进行父子、兄弟组件之间的监听和模块之间的通信。比如说当 Model 模块中的数据发生更新，触发了 EventBus 上的某个事件，而 Controller 恰好在监听这个事件，当这个事件触发时，Controller 就知道 Model 中的数据发生了更新了，从而做出一些反应。

API：

EventBus.on() 监听事件
EventBus.trigger() 触发事件
EventBus.off() 取消监听事件

class EventBus { 
  constructor() { 
    this._eventBus = $(window) 
  } 
  on(eventName, fn) { 
    return this._eventBus.on(eventName, fn) 
  } 
  trigger(eventName, data) { 
    return this._trigger.trigger(eventName, data) 
  } 
  off(eventName, fn) { 
    return this._eventBus.off(eventName, fn) 
  } 
} 
export default EventBus

表驱动编程

是一种编程模式，从哈希表里面查找信息而不是使用if else或者case，适用于逻辑复杂的情况。这段代码的相似性很高：

bindEvents(){
  v.el.on('click', '#add1', () => {
    m.data.n += 1
    v.render(m.data.n)
  })
  v.el.on('click', '#minus1', () => {
    m.data.n -= 1
    v.render(m.data.n)
  })
  v.el.on('click', '#mul2', () => {
    m.data.n *= 2
    v.render(m.data.n)
  })
  v.el.on('click', '#divide2', () => {
    m.data.n /= 2
    v.render(m.data.n)
  })
}

使用表驱动法之后，将事件提取出一个哈希表，使逻辑和数据清晰明了的分离开。

events: {
  'click #add1' : 'add',
  'click #minus1' : 'minus',
  'click #mul2' : 'mul',
  'click #divide2' : 'div'
},
add() {
  m.update( data: {n: m.data.n +1})
},
minus() {
  m.update( data: {n: m.data.n -1})
},
mul() {
  m.update( data: {n: m.data.n *2})
},
div() {
  m.update( data: {n: m.data.n /2})
}

模块化

每一个模块都是相互独立的，可以使用不同的技术（如一个使用Vue，另一个使用React）
模块的内部数据的实现是私有的，只是向外部暴露一些接口与外部其他模块通信，使用 import 和 export 引入或者导出。
优点：模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

浅析MVC

MVC 三个对象

EventBus

API：

表驱动编程

模块化