浅析MVC

1. MVC是什么？

MVC是三个字母的缩写，分别是Model（模型）、View（视图）和Controller(控制)

这种设计模式认为，在任何情况下，一个程序在结构上都可以分为三类对象

1. 视图层（View）:提供给用户的操作界面，是程序的外壳。
2. 数据层（Model）:程序需要操作的数据或信息。
3. 控制层（Controller）:它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

伪代码示例：

Model：

Model = {
    data: { 程序需要操作的数据或信息 }，
    create: { 增数据 },
    delete: { 删数据 },
    update(data) { 
       Object.assign(m.data, data) //使用新数据替换旧数据
       eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新 
    },
    get:{ 获取数据 } 
}

View：

View = {
    el: 需要刷新的元素,
    html: `<h1>M V C</h1>....显示在页面上的内容`
    init(){
        v.el: 需要刷新的元素
    },
    render(){ 刷新页面 }
}

Controller：

Controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件 }
}

2. EventBus 是什么

一种设计模式或框架，主要用于组件/对象间通信的优化简化。可以满足最小知识原则，对象互相不知道对方的细节，但是却可以调用对方的功能。

2.1 常用API

on:监听事件的变化

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

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

off: 取消监听事件

3. 表驱动编程

表驱动编程就是将诸多事件进行简化的一种写法，因为这些事件涉及到很多的代码重复问题。

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

export default c

表驱动编程里的表指的是哈希表，它可以减少重复代码，只讲重要的信息放在表里，然后利用表来编程，就像上面的例子。通过把程序逻辑的复杂度转移到人类更容易处理的数据中来，从而达到控制复杂度的目标。

4. 对模块化的理解

模块化相当于把一段代码封装起来，便于提高网页开发效率，提高代码复用率，降低块与块之间的耦合性。模块化使用export和import来导出和导入，若是后期需要对代码功能进行修改，因为模块化的开发，我们能很快找的需要修改的功能，接着因为模块化的解耦作用，可能仅需要修改一个文件的代码就可以实现想要的功能，非常的利于后期维护。