初探MVC设计模式

MVC的历史以及概念

MVC是model（模型）、 view（视图）和controller（控制器）首字母的缩写。它是一种设计模式，亦可以说是一种编程的方法论。
这个模式首先是为了解决计算机发明的初期，用户界面太糟糕，都是命令行的问题。
在MVC中，存在三个模块，它们的功能分别是控制、展示视图、以及存储数据。这三个模块之间可以通过接口进行通信。这样就实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。
三个模块本质上是三个对象。可以通过它们对应的方法来实现三个模块间的交流。
以js为例，说说我理解的MVC。

const m = {                          //m模块是对数据的处理，包括初始化数据，处理数据的方法等
   data: xxx;
   add(){
   },
   delete(){
   },
   change(){
   },
   find(){
   }
}
 
const v = {                     //v模块与页面的视图有关
  element: c.data,       //通过这种方法来引入data
  html: `<div>hello world</div>`,
  init(){},                    //初始化方法
  render(){                   // 刷新
  }
}

const c = {             // c模块为控制操作，如接受数据，绑定事件等
  events: {
    'click ': 'add',
    },
  plus() {
     m.add({xxx: m.data.xxx + 1})
    }
}

eventBus

当数据发生变化时如何让其他模块知道呢？这时就要引入EventBus。

const eventBus = $(window)
//其实就是一个jQuery对象，我们只用它其中的一些api而已
//只需要在 m数据模块中添加触发事件
eventBus.trriger('the_data_has_been_changed')
//并在c模块中添加监听事件，即可确定出数据的变化，并根据变化实现各种事件
eventBus.on('the_data_has_been_changed',()=>{ //监听事件
     v.render(m.data.xxx)
 })

表驱动编程

实际上就是当重复的代码过多时，可以将一些绑定的事情写在一个hash表中，通过遍历这个hash表来简化代码。

    events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
    },
    add() {
      m.update({n: m.data.n + 1})
    },
    minus() {
      m.update({n: m.data.n - 1})
    },
    mul() {
      m.update({n: m.data.n * 2})
    },
    div() {
      m.update({n: m.data.n / 2})
    },

再谈模块化

实际项目会更加复杂，把代码打包成一个个模块对高效率工作是有利的。不管是需求的变化还是数据的维护，模块化的代码都有更高的可读性和后续的可维护性。