一、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操作就比较频繁，如图所示：
四、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模式。
<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等模式，都降低了代码的耦合性，组件化编程提高了代码的可重用性，但各自有着自己的特点。我们重要的是理解架构模式的思想，根据业务需求场景，因地制宜地选择合适的架构模式。
转载于:https://juejin.im/post/5d03c9ab518825122925bab0