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

我是如何了解模块化的

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