MVC是什么？

MVC是一种设计模式，它包含三个对象，分别是M、V、C。

M 即 Modle（数据模型）

负责操作所有的数据

伪代码示例：

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

V 即 View（视图）

负责所有UI视图

伪代码示例

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

C 即 Controller（控制器）

负责其他事务，例如监听用户事件，然后调用 M 和 V 更新数据和视图

伪代码示例

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是什么？

evenBus是一种集中式事件处理机制。EventBus只需几行代码即可实现与分离类的集中通信，实现简化代码，消除依赖关系的目的。我们可以通过evenBus来实现 M、V、C 三个对象之间的通信。

EventBus的一些常用API

on方法：用于监听对象
trigger方法：用于触发对象
off方法：用于取消监听对象

在 MVC 中我们想实现 M 层数据的变化能自动触发 V 层的更新，这时候就可以采用 evenBus 的方法。

const eventBus = $(window) // 获取eventBus 对象
const m = {
  data: {
    ...
  },
  update(data) {
    // trigger 触发事件更新数据
    eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
  }
}

const v = {
  render(data) {
    ...更新数据
  }
}  
  
const c = {
  //'监听事件，听到后执行函数'
  eventBus.on('m:updated', () => {
    // 触发 v 的视图更新
    v.render(m.data.n)
  })
}

表驱动编程是什么？

表驱动编程是指利用哈希表存储信息，这样就可以在表中查找信息，而不必用很多的逻辑语句（if或Case）来把它们找出来的方法，在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富有吸引力了。

举例：

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)  // 自动把多个事件绑定在一个元素上
        }
    }
}
// 如何一来在稳定的复杂度里，可以绑定多个事件

如何理解模块化？

在一个的web页面中，可以通过不同节点的功能和结构，分出多个模块，而每个模块的实现方式和使用的技术等等都不相同。引入模块化，可以切断每个模块的相互影响，使得单个模块中可以更好的优化代码。

模块化的有点事：

可以降低代码耦合度。
减少重复代码，提高代码重用性，并且在项目结构上更加清晰。
便于维护。

浅析MVC