浅析 MVC

MVC 是一种架构设计模式，它通过分离关注点，来改进代码的组织结构。MVC分别是：Model（模型）、View（视图）、Controller（控制器）

这个模式认为，程序不论简单或复杂，从结构上来看，都可以分为三类对象

1. M 层用来处理应用程序的相关逻辑数据，视图会对数据进行监听，如果数据发生了变化，模型将会通知有关的视图

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

2. V 层用来处理应用程序的界面显示，当 M 层的数据发生变化，V 层会相应的刷新对应的视图

// 伪代码示例
View = {
  el: '要挂载视图的选择器',
  html: '视图的 html 模版',
  init() { 初始化相关信息 },
  render() { 渲染页面 }
}

3. C 层用来处理相关逻辑，用于控制应用程序的相关逻辑

// 伪代码示例
Controller = {
  init() { 初始化相关逻辑 },
  events: { 相关事件的哈希表 },
  method() { 处理数据的一些方法 },
  autoBindEvents() { 自动绑定事件 }
}

在使用 MVC 的过程中，会用到 EventBus 这个概念。EventBus 是用来解决模块之间的通信问题，能够完成模块解耦。

EventBus 的一些常用的方法有：监听事件、触发事件、取消监听事件。

// 伪代码
eventBus.触发事件('事件名称')
eventBus.监听事件('事件名称', function () { 处理逻辑 })
eventBus.取消事件('事件名称')

表驱动编程是一种编程模式，从表（哈希表）中查找信息并处理逻辑。当表中数据较为简单时，使用普通逻辑语句较简单，当表中数据非常复杂时，再使用普通的逻辑语句就比较麻烦了。

// 伪代码
events = {
  'click #app1': 'a操作'，
  'click #app2': 'b操作'，
  'click #app3': 'c操作'，
  'click #app4': 'd操作'，
}
autoBindEvents() {
  for (let key in events) {
    if (events.hasOwnProperty(key)) {
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      const value = events[key]
      元素.on(part1, part2, value) // 自动绑定所有事件
    }
  }
}

模块化可以让应用程序的逻辑进行分块解耦，能够减少重复代码，提高代码的复用性，让项目结构更加清晰。