《浅析MVC》

MVC阐述

MVC一种设计模式，让你的面条式代码分成一个一个模块。

1. M：Model（数据模型）负责操作所有数据

**

const m = {
  data: {数据},
  create(增) {},
  delete(删) {},
  update(data) {改},
  get(查) {}
}

2. V：View（视图）负责所有UI界面

**

const v = {
  el: 元素,
  html: `内容`,
  init(container) {初始化},
  render(n) {渲染}
}

3. C：Controller（控制器）负责处理 View 的事件,并更新Model,也负责监听 Model 的变化,并更新 View , Controller 控制其他所有流程

**

const c = {
  init(container) {
    v.init(初始化)
    v.render(渲染页面) // view = render(data)
    c.autoBindEvents(自动绑定)
    eventBus.on('m:updated', () => {
      console.log('here')
      v.render(m.data.n) //触发update重新渲染
    })
  },
  events: {哈希表},
  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) { //遍历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也一种设计模式或框架，主要用于组件/对象间通信的优化简化。
• Eventsbus常用API
  .on()监听事件的变化

**

 this.on('m:updated', () => {
      this.render(this.data)
    })

.trigger()自动触发事件

**

 update(data) {
    Object.assign(m.data, data)//把传进来的data直接放在m.data上
    eventBus.trigger('m:updated')//通过trigger自动更新数据
    localStorage.setItem('n', m.data.n)//储存数据

.off()关闭事件监听

表驱动编程

表驱动编程就是将诸多事件进行简化的一种写法
通过将一堆绑定事件简化为哈希表，并对其进行遍历的方式简化代码

优点：

• 提高了程序的可读性。
• 减少了重复代码。
• 可扩展性。
• 程序有一个明显的主干。
• 降低了复杂度

模块化

通过模块化使每个板块的代码各司其职，自己管理自己的内容逻辑，方便日后维护等，在每个板块中MVC也是模块化的体现，把原本杂乱的代码通过m，v，c抽离成雄小的模块
重复的代码==>抽象成函数
同样的属性==>抽象成原型或类
同样的原型==>使用继承
模块化可以让我们的代码称为所谓的“好代码”