浅析MVC

MVC 三个对象分别做什么

• M 是 Model，数据模型，负责数据相关的任务
• V 是 View，视图，负责用户界面
• C 是 Controller，控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图

代码示例

// Model 示例
const m = {
  data: { //数据
    n: parseFloat(localStorage.getItem('n'))
  },
  create() {},//增
  delete() {},//删
  update(data) { //改
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  get() {} //查
}

 // View 示例
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)
  }
}

// Controller 示例
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)
    }
  }
}

EventBus

• 主要用于组件/对象间通信
• 常用API：on、trigger、off

// 封装 EventBus类
import $ from 'jquery'
let eventBus = $(window)

// 触发
eventBus.trigger('m:updated')
// 监听
eventBus.on('m:updated', () => { 
  v.render(m.data.n)
})
// 关闭
eventBus.off('m:updated', () => {
  console.log("关闭了")
})

表驱动编程

• 通过哈希表将事件抽象出来，简化了代码，降低了重复率，这就是表驱动。(示例：Controller示例)