小皆学前端—MVC&MVP&MVVM

什么是MVC ?

MVC是一个架构模式，全称：Model View Controller。

由三部分组成，模型(model)－视图(view)－控制器(controller)。

优点：

1、按照职责将应用划分为多层，让每个层只关注并做好一件事情，便于我们对每个层进行独立开发、测试和维护。

2、后台代码被移到单独的类文件，提高代码复用率以及便于进行单元测试。

缺点：

1、原理复杂，需要花费大量时间去部署、调试和测试。

2、由于将一个应用程序分成了三个部件，所以使用MVC同时也意味着将要管理更多的文件。

3、不适合中小型规模的应用程序。

模型(model)：用于封装与应用程序业务逻辑相关的数据以及对数据的处理方法。（存储程序中使用到的数据）

“模型”有权利直接访问数据。 “模型”不依赖“视图”和“控制器”，也就是说，模型不关心它会被如何显示或是如何被操作。将业务逻辑聚集到一个部件里面，在修改界面及用户交互的同时，不需要重新编写业务逻辑。

视图(view)：用户看到并与之交互的界面。

在 Web 应用程序中的 MVC，通常把显示动态数据的 html 页面称为视图。在视图中一般不包含逻辑。

控制器(controller)：处理和响应事件，通常是用户操作，并监控模型上的变化，然后相应地更新视图。

当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

一个事件的发生过程：

首先用户和应用产生交互，控制器获取到事件后触发事件处理器，控制器根据请求选择去向指定的模型请求数据，得到数据之后就去更新视图，最后视图将数据结果按用户想要的样子呈现给用户。

下面来说说，架构、框架、设计模式的区别

架构：简单的说架构就是一个蓝图，是一种设计方案。架构可以通过多种框架和多个设计模式来实现。

框架：为了解决特定问题而存在的，框架是一个半成品不能直接使用，提供了诸多服务，需要二次开发以实现具体功能。包含多种设计模式。

设计模式：针对单一问题的设计思路和解决方法。就是告诉你针对特定问题如何组织类、对象和接口之间的关系，是前人总结的经验。一个模式可应用于不同的框架和被不同的语言所实现。

所以我们在做一个项目的时候首先出来的应该是架构，是对整个问题的一个总体上的设计，之后再会考虑运用什么样的框架和设计模式来实现我们的架构；当然，只使用框架和设计模式中的一种也是经常遇到的。

MVC框架指MVC模式下的一种框架。典型的MVC框架有：Angular.js，Ember.js，Backbone.js

由MVC衍生出来的两大模式：

MVP：模型(model)－视图(view) - 表现类(Presenter)。

MVVM：模型(model)－视图(view) - 视图模型(ViewModel)

1、MVP：Model提供数据，View负责数据显示与用户交互，Presenter负责逻辑的处理。

过程：用户操作View发生改变，通知Presenter，Presenter操作Model，Model获取到数据后回传给Presenter，Presenter更新视图，然后回馈给用户。

MVP与MVC的区别：

（1）各部分之间的通信是双向的。

（2）MVP中View并不直接使用Model，它们之间的通信是通过Presenter来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不通过 Controller。

（3）MVP模式中的 View 非常薄，不存在任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

2、MVVM： 最近前端很火的模式，常见的Angular.js，Ember.js都采用的这种模式。

Model提供数据，View负责数据显示与用户交互，Presenter负责逻辑的处理。

过程：用户操作View发生改变，通知 ViewModel ，ViewModel操作Model发生数据改变，Model获取到数据后通过事件告诉ViewModel，ViewModel通知View渲染页面，然后回馈给用户。

MVVM与MVP模式几乎一致，唯一区别在于View和ViewModel之间采用了双向绑定，也就是说View的变化会自动反映在ViewModel，ViewModel的变化也会相应反映在View上。无需互相通知，相互就能感应到。