MVC 是一种设计模式，将代码分成三个部分来编写展示：Model（模型）、View（视图）、Controller（控制器）。

其中 Model 部分分配以数据或某种功能等；
而 View 部分则负责页面的视图部分的存储；
最后 Controller 部分放置其他诸如请求等内容。

最初的代码中会将 HTML视图部分和数据处理等代码混合在一起，而 MVC 的理念便是将这些代码按照实现不同的需求分成三个模块，各自负责不同的领域，让代码的可读性、维护性变得更加方便。
虽然说将代码构造成 MVC 这样的形式在一开始需要一些额外的工作来完成，但是对于比较复杂的项目来说，将其写成 MVC 的形式会大大减少重复代码的出现，也使得可测试性变得更好。

一个小小的例子

  1. const m = {
  2.   data: {
  3.     index: parseInt(localStorage.getItem(localKey)) || 0
  4.   },
  5.   create() {
  6.   },
  7.   delete() {
  8.   },
  9.   update(data) {
  10.     Object.assign(m.data, data) //把 data 的属性一个个赋值给 m.data
  11.     eventBus.trigger('m:updated') //监听的事件中不可有空格
  12.     localStorage.setItem('index', m.data.index)
  13.   },
  14.   get() {
  15.   }
  16. }
  17. const v = {
  18.   el: null,
  19.   html: (index) => {
  20.     return `
  21.   <div>
  22.     <ol class="tab-bar">
  23.         <li class="${index === 0 ? 'selected' : ''}" data-index = "0"><span>壹</span></li>
  24.         <li class="${index === 1 ? 'selected' : ''}" data-index = "1"><span>贰</span></li>
  25.     </ol>
  26.     <ol class="tab-content">
  27.         <li class="${index === 0 ? 'active' : ''}">内容1</li>
  28.         <li class="${index === 1 ? 'active' : ''}">内容2</li>
  29.     </ol>
  30. </div>
  31.  `
  32.   },
  33.   init(container) {
  34.     v.el = $(container)
  35.   },
  36.   render(index) {
  37.     if (v.el.children.length !== 0) {
  38.       v.el.empty()
  39.     }
  40.     $(v.html(index)).appendTo(v.el)
  41.   }
  42. }
  43. const c = {
  44.   init(container) {
  45.     v.init(container)
  46.     v.render(m.data.index)  // view = render(data)
  47.     c.autoBindEvents()
  48.     eventBus.on('m:updated', () => {
  49.       v.render(m.data.index)
  50.     })
  51.   },
  52.   events: {
  53.     'click .tab-bar li': 'x'
  54.   },
  55.   x(e) {
  56.     const index =parseInt(e.currentTarget.dataset.index)
  57.     m.update({index: index})
  58.   },
  59.   autoBindEvents(){
  60.     for(let key in c.events){
  61.       const value = c[c.events[key]]
  62.       const spaceIndex = key.indexOf(' ')
  63.       const part1 = key.slice(0,spaceIndex)
  64.       const part2 = key.slice(spaceIndex+1)
  65.       v.el.on(part1,part2,value)
  66.     }
  67.   }
  68. }

监听事件

利用 jQuery 创建一个名为 eventBus 的空对象

  1. const eventBus = $({})

此时对象的原型上面会有这么几个属性：on、trigger、off，可以利用这几个属性来实现对事件之间通信

  1. //eventBus.trigger 可以用来触发事件
  3. const m = {
  4.   data: {
  5.     index: parseInt(localStorage.getItem(localKey)) || 0
  6.   },
  7.   update(data) {
  8.     Object.assign(m.data, data)
  9.     eventBus.trigger('m:updated') // data 发生改变，触发事件 “m:updated”
  10.     localStorage.setItem('index', m.data.index)
  11.   },
  12. }
  14. //eventBus.on 用来监听事件
  16. // 监听这个事件，触发后执行后面的函数
  17. eventBus.on('m:updated', () => {
  18.   v.render(m.data.index)
  19. })
  21. //eventBus.off 用来取消事件监听
  23. eventBus.off("m:updated")

表驱动编程

表驱动编程即为：在表格中查找信息，以取代用较多的 if…else 逻辑判断语句找出值。这种方法在数值较多时，对比逻辑判断语句有着很大的优势，大大减少代码的数量和复杂程度。

模块化这一概念在 MVC 当中可谓贯穿始终。将重复的代码抽成一个函数模块，待使用时进行调用；将代码按照 Model、View、Controller 分为三个模块，再模块之间相互引用进行串联；将每个功能模块的代码分开来编写，最后再进行引用，这样使得代码独立性提高，也有利于之后的升级和维护。