《浅析 MVC》

MVC (Model-View-Controller) 是一种软件设计模式。它强调分离软件的业务逻辑和显示。这种“分离”提供了更好的分工和改进的维护。

对MVC软件设计模式的三个部分可以被描述如下：

Model: 模型持有所有的数据、状态和程序逻辑.

// 数据相关都放到m
const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  get() {}
}

View: 负责界面的布局和显示.

// 视图相关都放到v
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: 负责模型和界面之间的交互.

// 其他都c
const c = {
 init(container) {
   v.init(container)
   v.render(m.data.n) // view = render(data)
   c.autoBindEvents()
   eventBus.on('m:updated', () => {
     console.log('here')
     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

EventBus是一种设计模式或框架，主要用于组件/对象间通信的优化简化

EventBus 实现了 M 和 C 间的通信，因为 m.data.x 在更新后可以触发一个函数告诉 C 我更新了，而 C 用一个监听就可以知道数据更改，那我就在渲染一次页面

const eventBus = $(window) // $ 为 jquery  
const m = {
    data: x
    update(){
        eventBus.trigger('m:changed')
    }
}
// v 已经写好
cosnt c = {
    add(){
        m.data.x += 1
        eventBus.on('m:changed', (){
            c.render()
        })
    }
}

EventBus API

trigger 触发函数
on 监听函数
off 停止监听

表驱动编程

表驱动法就是一种编程模式，从表里面查找信息而不使用逻辑语句。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越复杂，查表法也就愈发显得更具吸引力。

使用表驱动法前需要思考两个问题，一个是如何从表中查询，毕竟不是所有场景都像上面那么简单的，如果if判断的是不同的范围，这该怎么查？

另一个则是你需要在表里面查询什么，是数据？还是动作？亦或是索引？

基于这两个问题，这里将查询分为以下三种：

直接访问
索引访问
阶梯访问

模块化

随着前端js代码复杂度的提高，js模块化是必然趋势，不仅好维护，同时依赖很明确，不会全局污染。

模块化的发展情况:

无模块化-->CommonJS规范-->AMD规范-->CMD规范-->ES6模块化