MVC 是一种架构设计模式，通过关注点分离鼓励改进应用程序组织。由于前端开发的环境特性，在 MVC 模式上引申出了许多 MV* 模式。这些模式都是为了对重复代码的重构和类似页面的代码封装。

MVC 是什么

  • 模型 model ，用于封装与应用程序的业务逻辑相关的数据以及数据的处理方法，会有一个或多个视图监听这个模型。一旦模型的数据发生变化，模型将通知有关的视图。
  1. const model = {
  2.     data: null,
  3.     get() {
  4.         data: 获取的数据
  5.     },
  6.     set(data) {
  7.         更新 data 数据
  8.         触发数据响应事件 eventBus.trigger()
  9.     }
  10. }
  • 视图 view，负责所有的 UI 界面，描绘 model 当前状态。
  1. const view = {
  2.     el: null,
  3.     html: `UI界面html`，
  4.     init() {
  5.         初始化 el
  6.         render(model.data)
  7.     },
  8.     render(data) {
  9.         刷新页面html
  10.     }
  11. }
  • 控制器 controller ，处理用户的行为和数据 model 的改变。
  1. const controller = {
  2.     init(container) {
  3.         初始化视图
  4.         绑定数据响应 eventBus.on()
  5.     },
  6.     events: {
  7.         设置事件和函数绑定
  8.     },
  9.     // 实现每个事件函数
  10.     autoBindEvents() {
  11.         for (let key in c.events){
  12.             对每个键进行动态绑定事件
  13.         }
  14.     }
  15. }

EventBus

eventBus 通常是一个 jquery 全局对象，通过 const eventBus = $(window) 实现一个 eventBus ，常用的 api 有 on() 、 trigger() 、 off() 。

  1. eventBus.on(eventName, fn) // 绑定一个函数事件
  2. eventBus.trigger(eventName, data) // 响应对应绑定函数事件名的函数
  3. eventBus.off(eventName，fn) // 注销对应绑定函数事件名的函数

表驱动编程

表驱动编程，实际就是对大量类似且重复的代码，其重要的数据做成哈希表的编程方式。例如：数据-逻辑分离。

  1. // model 的数据操作封装
  2. constructor(options) {
  3.     const keys = ['data', 'create', 'update', 'delete', 'get']
  4.     keys.forEach(key => this[key] = options[keys])
  5. }

模块化

Javascript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 Javascript 脚本的复杂程序，还有一些被用在其他环境（例如 Node.js）。

从业务角度来看，一个项目就是由各个模块组合而成的。从技术上去实现功能的复用，Node.js 已经提供这个能力很长时间了，对前端而言，目前的方案是前端模块化：将功能打包为模块，发布至内部中央仓库，使用方通过自己的方式导入模块包使用。