MVC
MVC模式的意思是，软件可以分成三个部分：
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信方式如下：
这里写图片描述
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
所有通信都是单向的。
Model
Model管理应用程序的数据。
Model不涉及用户界面，也不涉及表示层，而是代表应用程序可能需要的独特形式的数据。
当Model改变时，它通常会通知它的观察者（如View）。
一个Model模型可能有多个观察它的View。
总而言之，Model主要与业务数据有关。
View
View是Model的可视化表示。
一个View通常检测一个Model，并在Model更改时进行通知，使View本身能够相应地更新。
用户可以和View进行交互，包括读取和编辑Model。
由于View是表示层，通常我们能够以一种更友好的方式进行编辑和更新。
而更新Model的实际任务其实是在Controller上的。
模板
我们都知道手工创建大量的HTML标记并通过字符串拼接是非常不好的性能实践。
js中的模板解决方案（如Handlebar.js和Mustache）通常是用于将View模板定义为包含模板变量的标记。这样的话，我们则只需要关注保持整洁的Model和模板。大部分绑定工作都是通过框架自身来完成的。
下面是一个Handlebars.js的例子：
<li class="photo">
<h2>{{caption}}</h2>
<img class="source" src="{{src}}"/>
<div class="meta-data">
{{meta-data}}
</div>
</li>
1
2
3
4
5
6
7
注意，模板本身并不是View。
值得一提的是，在单页面的js应用程序中，一旦通过Ajax从服务器获取数据，数据可以只在同一页面的新View中动态呈现，而不需要任何刷新。
因此导航的角色就落到了路由身上，他协助管理应用程序状态。
简而言之，View是应用程序数据的可视化表示。
Controller
Controller是Model和View之间的中介，当用户操作View时，它通常负责更新Model。
Backbone.js
对于框架Backbone.js，它包含Model和View，但它实际上没有真正的Controller，Backbone.View和Backbone.Router一起承担Controller的责任。
这里写图片描述
用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。
MVC的优点
MVC这种关注点分离有利于进一步简化应用程序功能的模块化，并能够实现：
整体维护更容易。
解耦Model和View，意味着它能够更直接地编写业务逻辑的单元测试
这种模块性可以让负责核心逻辑的开发人员和负责用户界面的开发人员同时工作。
MVP
MVP是MVC的一种衍生模式，专注于改进表示逻辑。
Presenter
MVP中的P代表表示器。这是一个包含用于View的用户界面业务逻辑的组件。
这里写图片描述
各部分之间的通信，都是双向的。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
MVP与MVC
MVP适用于有非常复杂的View和大量用户交互的应用程序。
这样的程序如果用MVC的话意味这要极度依赖于多个控制器。而在MVP中，所有这些复杂的逻辑可以封装在一个表示器中，大大简化维护工作。
MVVM
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
这里写图片描述
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
MVVM 由 Model,View,ViewModel 三部分构成：
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来
ViewModel 是一个同步View 和 Model的对象视图模型层。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
View与ViewModel
MVVM中的View是主动而不是被动的。
被动View只输出显示并不接受任何用户输入。
而MVVM中的View和ViewModel之间通过数据绑定和事件进行通信。
优点
MVVM使得UI和为UI提供驱动的行为模块的并行开发变得更容易。
MVVM使View抽象化，从而减少代码背后所需的业务逻辑量。
ViewModel在单元测试中的使用更容易
缺点
对于简单的UI来说，使用MVVM有些大材小用
数据绑定难以调试
Vue
Vue是典型的MVVM框架，它实现双向数据绑定的技术是数据劫持。 也就是通过ES5提供的 Object.defineProperty() 方法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。
参考资料：MVC，MVP 和 MVVM 的图示
浅析前端开发中的 MVC/MVP/MVVM 模式
---------------------
作者：gigi就是我
来源：CSDN
原文：https://blog.csdn.net/crystal6918/article/details/54237406
版权声明：本文为博主原创文章，转载请附上博文链接！