浅析 MVC

1. MVC

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

• Model（数据模型），负责操作所有数据

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

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

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

2. EventBus

EventBus主要用于对象间通信，有以下常见API

• on（监听事件）
• trigger（触发事件）
• off（取消监听）

eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'

3. 表驱动编程

表驱动编程是一种用查表（哈希表）的方法获取值的编程模式。表里可以存数据，也可以存指令，或函数等。在数值不多的时候我们可以用逻辑语句(if/else 或 case do)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。

4. 模块化

模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。引入模块化，可以切断每个模块的相互影响，降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。