浅析MVC

1. 什么是MVC

MVC是三个字母的缩写，分别是Model（模型）、View（视图）和Controller（控制）这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三类对象。

1 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。

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

. 视图view是屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会

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

3.控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

// 伪代码示例
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() { 自动绑定事件 }
}EventBus

EventBus 公共方法

EventBus对象的三个API:

.on：添加事件监听
.off：移除事件监听
.trigger：事件触发代码示例：


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

二表驱动编程

表驱动法是一种编程模式，从表(哈希表)里面查找信息而不是使用逻辑语句（if…else…switch），当是很简单的情况时，用逻辑语句很简单，但如果逻辑很复杂，再使用逻辑语句就很麻烦了。

events:{  // 事件集合的哈希表
   'click #app1': 'a操作'，
   'click #app2': 'b操作'，
   'click #app3': 'c操作'，
   'click #app4': 'd操作'，
} 
autoBindEvents() { // 通过哈希变自动绑定事件
    for ( let key in c.events) {
        if ( c.events.hasOwnProperty(key) ) {
            const spaceIndex = key.indexOf(' ')   // 找到'click #app1'空格的数组下标
            const part1 = key.slice(0, spaceIndex) // 通过spaceIndex 分割 'click' 和 '#app1'
            const part2 = key.slice(spaceIndex + 1)
            const value = c[c.events[key]]
            v.el.on(part1, part2, value)  // 自动把多个事件绑定在一个元素上
        }
    }
}
// 如何一来在稳定的复杂度里，可以绑定多个事件

三对模块化的理解

我理解的模块化是指，将代码中具有相同特性的代码片段集中封装在一个模块中。
这样做的好处有：

方便修改，当你修改一段代码时，你只需要找到对应模块修改即可，不需要考虑其他修改会对其他模块的代码产生影响。
提高代码的内聚性，降低耦合性。

《浅析MVC 》