关于前端:浅析-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）来把他们找进去的办法。事实上，任何信息都能够通过表来筛选。在简略的状况下，逻辑语句往往更简略而且更间接。但随着逻辑链的简单，表就变得越来越富于吸引力了。

我是如何了解模块化的

• 模块化，一旦一个我的项目，将所有的代码模块化，能够更好防止代码间接的影响，如果后续有什么新的减少或批改，都能够更不便的进行批改，也能够使之后再来翻阅代码，迅速的了解当初代码的思路。