浅析 MVC

MVC 是什么

MVC (Model-View-Controller) 是一种软件设计模式，它强调分离软件的业务逻辑和显示，这种“分离”提供了更好的分工和改进的维护。

对MVC软件设计模式的三个部分可以被描述如下：

1. Model: 模型持有所有的数据、状态和程序逻辑.
2. View: 负责界面的布局和显示.
3. Controller: 负责模型和界面之间的交互.

MVC 的三个对象

• 模型（Model） 用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
• 视图（View）能够实现数据有目的的显示
• 控制器（Controller）起到不同层面间的组织作用，用于控制应用程序的流程。

一个简单的MVC模型：

/** 模拟 Model, View, Controller */
const M = {}, V = {}, C = {};

/** Model 负责存放资料 */
M.data = "hello world";

/** View 负责将资料输出给用户 */
V.render = (M) => { alert(M.data); }

/** Controller 作为连接 M 和 V 的桥梁 */
C.handleOnload = () => { V.render(M); }

/** 在网页读取的时候呼叫 Controller */
C.init = () => { window.onload = C.handleOnload; }

C.init()

模块化

在使用MVC的时候可以通过模块化来使得程序更加清晰和容易维护。模块化更加符合人类思维，在处理问题时只需要把目光聚焦与眼前的部分。并且在运行时模块之间不容易相互影响。

// file: main.js
import {C} from './app1.js'

C.init()

// file: app1.js
// 一些代码...
export {C}

eventBus

当不同部分需要通信时，可以使用eventBus来进行。 EventBus 有三个常用 API, on()、trigger()和off()。

• on()用于监听事件
• trigger()用于触发事件
• off()用于取消监听

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

const V = {
  render(data) {
    ...更新数据
  }
}  
  
const C = {
  eventBus.on('m:updated', () => {
    // on方法执行监听后触发 v 的视图更新
    V.render(M.data.n)
  })
}

表驱动编程

当一些操作重复出现，并且其中只有一些细微的区别时，将共同的部分抽出，然后将剩下的差别整理成一个或多个表，通过对表的索引或遍历来进行操作。

const evevts = {
  "#el1 eventA": "fn1",
  "#el2 eventB": "fn2",
  "#el3 eventC": "fn3",
  "#el4 eventD": "fn4",
  "#el5 eventE": "fn5"
}

const eventFunctions = {
  fn1: function() {},
  fn2: function() {},
  fn3: function() {},
  fn4: function() {},
  fn5: function() {}
}

function autoBindEvents() {
  for(let key in events) {
    const spaceIndex = key.indexOf(' ')
    const el = key.splice(0, spaceIndex) // 获取元素
    const event = key.splice(spaceIndex+1) // 获取元素需要执行的事件
    const fn = eventFunctions[events[key]] // 执行事件后的函数
    $(el).on(event, fn)
  }
}