前端MVC

1.MVC是什么

mvc是一种架构设计模式，它包含三类对象，分别是M(model)层、V(view)层、C(controller)层。将这三层分离以提高灵活性与复用性。

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

const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create(){},
  delete(){},
  update(data){
    Object.assign(m.data,data)     //data有什么属性就放到m.data上
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  get(){}
}

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

const v = {
 el: null,
 html: `
   <div>
     <div class="output">
       <span id="number">{{n}}</span>
     </div>
     <div class="actions">
       <button id="add1">+1</button>
       <button id="minus1">-1</button>
       <button id="mul2">*2</button>
       <button id="divide2">÷2</button>
     </div>
   </div>
 `
,
 init(container) {
   v.el = $(container)
 },
 render(n) {
   if(v.el.children.length !== 0) v.el.empty()
   $(v.html.replace('{{n}}', n))
     .appendTo(v.el)
   }
}

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

const c = {
  init(container) {
    v.init(container)
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      v.render(m.data.n)
    })
  },
  events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },
  autoBindEvents() {
    for (let key in c.events) {
      const value = c[c.events[key]]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      v.el.on(part1, part2, value)
    }
  }
}

2.EventBus

EventBus能够简化各组件间的通信，让我们的代码书写变得简单，能有效的分离事件发送方和接收方(也就是解耦的意思)，能避免复杂和容易出错的依赖性和生命周期问题。

EventBus主要的api有两个，on（监听事件）、trigger（触发事件），当然还有off（取消监听）

• 触发事件eventBus.trigger('m:updated')，大喊一声“m更新啦”;
• 监听事件eventBus.on('m:updated',()=>{v.render(m.data.n)})，听到后执行事件。

3.表驱动编程

表驱动编程是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和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})
}

4.模块化

模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。

模块化的好处就是能够避免命名冲突，多人协作互不干扰并且具有高复用性和可维护性。

参考文献

表驱动编程
什么是模块化，模块化的好处是什么
浅析MVC