MVC

MVC的概念

• 每个模块都可以写成三个对象，分别是M、V、C
• M 就是 model，即数据模型，负责操作所有数据
• V 就是 view，即视图，负责操作所有UI界面
• C 就是 Controller,即控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图。

eventBus

EventBus 主要用于对象之间的通信，Model 数据模型 和 View 视图彼此不知道彼此的存在，但是又需要通信，于是就要用到 EventBus

• 作为胶水层使用，减少模块间的耦合性
• 减少代码的重复性，提高代码可复用度

eventBus常用的API

• on 事件监听
• trigger 触发事件
• off 取消监听

表驱动编程的概念

当我们需要判断 3 种以上的情况，做出相应的事情，往往需要写很多很多的 If else，这样的代码可读性不强， 为了增强代码的可读性，我们可以用表驱动编程，把用来做 If 条件判断的值存进一个哈希表，然后从表里取值。

如：

$button1.on('click', () => {
    let n = parseInt($number.text())
    n += 1
    localStorage.setItem('n', n)
    $number.text(n)
})

$button2.on('click', () => {
    let n = parseInt($number.text())
    n -= 1
    localStorage.setItem('n', n)
    $number.text(n)
})

$button3.on('click', () => {
    let n = parseInt($number.text())
    n = n * 2
    localStorage.setItem('n', n)
    $number.text(n)
})

$button4.on('click', () => {
    let n = parseInt($number.text())
    n = n/2
    localStorage.setItem('n', n)
    $number.text(n)
})

更改后：

const c = {
  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)
    }
  }

1. 绑定加减乘除按钮的父元素，就只用一个事件监听器 2.用哈希表存下按钮和按钮对应的操作

模块化

模块化是把一个大的代码块拆分成若干个小片段（模块）的过程，然后就可以在其他模块中调用这些模块了。代码的模块化非常类似于数据的规范化。这个过程我们可以提高重用性、管理型、可读性，从而获得等可靠的代码