浅析 MVC

MVP：（model-view-Presenter）MVC模式是架构模式的一种，所有的页面都可以使用MVC来优化代码结构。

MVC 三个对象分别做什么

每个模块都可以写成三个对象，分别是M、V、C

• M- 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() {}
}

• V - View （视图）负责所有UI界面

// 视图相关都放到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)
  }
}

• C - 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:主要负责对象之间通信， 提供了 on、off 和 trigger 等 API，on 用于监听事件，trigger 用域触发事件，使用 eventBus 可以满足最小知识原则，m 和 v 互相不知道对方的细节，但是却可以调用对方的功能

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

表驱动编程

表驱动编程:指的是哈希表,可以减少重复代码，只将重要的信息放在表里，然后利用表来编程

events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  }

如何理解模块化

在模块化中，我们可以更好利用代码，每个模块都是实现某一特定的功能，使代码不重复，而且代码之间互不干扰，当我在修改其中一个模块的结构的时候不会影响到第二个模块。