浅析 MVC

MVC 三个对象分别做什么，给出伪代码

• MVC概念：每个模块都可以写成3个对象，分别是M,V,C

• M: Model(数据模型)负责操作所有的数据

  const m = {
  data: {
    index: parseInt(localStorage.getItem(localKey)) 
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  get() {}
  }

• V：View(视图)负责所有UI界面

  const v = {
  el:null,
  html:`  `,
   init(container) {
   v.el = $(container)
   },
   render(n) {
   if (v.el.children.length !== 0) v.el.empty()
   $(v.html.appendTo(v.el)  
  }

• C：Controller(控制器)负责其他

  const c = {
  init(container) {
    v.init(container)
    v.render(m.data.n) 
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      console.log('here')
      v.render(m.data.n)
    })
  },
  events: {
  },
  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)
    }
  }
  
  export default c

EventBus 有哪些 API，是做什么用的，给出伪代码示例

• API及功能：

  on(){}:监听
  trigger(){}:触发
  off(){}:取消

  import $ from 'jquery'
  
  class EventBus {
  constructor() {
    this._eventBus = $(window)
  }
  
  on(eventName, fn) {
    return this._eventBus.on(eventName, fn)
  }
  
  trigger(eventName, data) {
    return this._eventBus.trigger(eventName, data)
  }
  
  off(eventName, fn) {
    return this._eventBus.off(eventName, fn)
  }
  }
  
  export default EventBus

表驱动编程是做什么的

• 表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

我是如何理解模块化的

• 模块化，一旦一个项目，将所有的代码模块化，可以更好避免代码直接的影响，如果后续有什么新的增加或修改，都可以更方便的进行修改，也可以使之后再来翻阅代码，迅速的理解当初代码的思路。