一、什么是MVC？

M是modal(數(shù)據(jù)模型)的簡稱，它是用于操作所有數(shù)據(jù)

const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create(){},
  delete(){},
  update(data){
    Object.assign(m.data,data) //data有什么屬性就放到m.data上
    eventBus.trigger('m:updated')//eventBus觸發(fā)'m:update'信息，通知View刷新界面
    localStorage.setItem('n', m.data.n)
  },
  get(){}//獲取數(shù)據(jù)
}

V是view(視圖)的簡稱，它是用于負(fù)責(zé)所有UI界面

const v = {
  el: null,//要刷新的元素
  //要顯示在頁面上的內(nèi)容
  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（控制器）的簡稱，它負(fù)責(zé)其他

const c = {
  init(container) {
    v.init(container)//初始化View
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()//自動的事件綁定
//當(dāng)enentsBus觸發(fā)'m:update'是View刷新
    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)
    }
  }
}

這是通過MVC重構(gòu)后的代碼，目前看起來并沒有簡潔很多，但至少使你的代碼不再是面條式的，接下來說說代碼中用到的EventBus

二、EventBus 有哪些 API，是做什么用的?

EventBus基本的api有on（監(jiān)聽事件），trigger(emit)（觸發(fā)事件）,off（取消監(jiān)聽）方法。
用于模塊間的通訊，view組件層面，父子組件、兄弟組件通信都可以使eventbus處理

//EventBus.js
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
//new.js
import EventBus from 'EventBus.js'
const e = new EventBus()
e.on()
e.trigger()
e.off()

三、表驅(qū)動編程是做什么的?

表驅(qū)動法是一種編程模式，從表(哈希表)里面查找信息而不是使用邏輯語句（if…else…switch，可以減少重復(fù)代碼，只將重要的信息放在表里，然后利用表來編程，與邏輯語句相比較有著更穩(wěn)定的復(fù)雜度
下面這段代碼相似性很高，當(dāng)我們使用表驅(qū)動法后

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)
  })
}

將事件提取出一個(gè)哈希表，使邏輯和數(shù)據(jù)清晰明了的分離開。

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})
}

四、我是如何理解模塊化的

將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則（規(guī)范）封裝成幾個(gè)塊（文件）并進(jìn)行組合。模塊的內(nèi)部數(shù)據(jù)的實(shí)現(xiàn)是私有的，只是向外部暴露一些接口（方法）與外部其他模塊通信。這則就是模塊化。模塊化可以降低代碼耦合度，減少重復(fù)代碼，提高代碼重用性，并且在項(xiàng)目結(jié)構(gòu)上更加清晰，便于維護(hù)。