浅谈自己对前端MVC的理解

MVC全名Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。MVC这一概念是来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

• 视图(view)是用户看到并与之交互的界面。
• 模型(model)表示数据模型，并提供数据给视图。
• 控制器(controller)是连接视图和模型桥梁，处理业务逻辑操作，具体是指接受用户的输入并调用模型和视图去完成用户的需求。

  

二、MVC解决的问题

随着前端发展到面向模块编程的时代，MVC架构就应运而生了，数据模型（modele）、页面视图（View）、业务逻辑（Controller）分离有效地解决如下问题：

• 用store数据更新代替页面频繁dom操作，简化业务代码；
• 全局暂存数据，避免重复请求数据资源；
• 模块解耦，组件化开发，避免功能模块间互相影响；
• 局部刷新，减少页面刷新次数，提高用户体验。

三、MVC的推演过程

我们使用jQuery实现todolist，step by step优化代码直至推演出MVC，使大家更好地理解MVC架构。

只使用jQuery渲染视图层list列表和count数字统计，并实现new、toggle、destroy、destroy finished、toggle all等交互操作，dom操作就比较频繁，如图所示：

为了持久化数据存储，创建store将数据存储到locationStorage，虽然不用MVC也能实现，但逻辑非常复杂，每个功能函数都涉及到数据存储改动，如图所示：

为了简化数据渲染操作，引入模板引擎，每当数据变化，调用render模板渲染即可，如图所示：

为了实现页面状态持久化，引入router路由，通过不同的访问URL区分页面不同状态，MVC架构就出现了，如图所示：

四、MVC架构的扩展

1、MVC衍生的MVP

MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示；不同之处在于：在MVC里，View是可以直接访问Model的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式更新View。

与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰；由于View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作。

2、MVC衍生的MVVM

MVVM（Model-View-ViewModel）将Presenter 改名为 ViewModel，基本上与MVP模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Vue、React、Angular框架都使用了MVVM模式。

我们就以Vue为例子，分析一下MVVM模式：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
复制代码

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
复制代码

上面html部分相当于View视图层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。

Vue实例中的data相当于Model模型层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。

总结

MVC、MVP、MVVM...M-V-Whatever等模式，都降低了代码的耦合性，组件化编程提高了代码的可重用性，但各自有着自己的特点。我们重要的是理解架构模式的思想，根据业务需求场景，因地制宜地选择合适的架构模式。