MVC、MVP和MVVM

前言

在web1.0时代，并无前端的概念，要写就就后端一块儿写了。先后端的代码杂糅到一块儿，好比php开发先后端，随后衍生出MVC开发模式和框架。

web1.0时代

起初的MVC

目标

数据、视图、以及业务逻辑控制分层；这样就能够把代码切割成功能独立的模块。

优势

使用了这种分层架构，实则清晰，代码易维护。

实现了必定程度的先后端的分离，可是还不是很清晰

起初的MVC仅限于服务端（后端），在服务器端渲染。前端只完成了后端开发中的view层（只是写模板文件，按照模版语法去写动态内容）；
Model层提供数据查询。
View层经过模板引擎来进行解析。解析成真正的HTML内容，浏览器去渲染

缺点

1. 前端页面开发效率不高

前端以前都是以静态页面出现的；不多的js交互；将代码交给后端程序员，后端在用模板语法对它进行动态化的改造，效率不高。

1. 先后端指责不清晰

通常都是一个程序员，先后端一块儿抓，要会的也不少，前端的兼容性，后端的语法等等。

web2.0时代

谷歌的Gmai的出现，ajax技术开始风靡全球，从而先后端的职责更加清晰了。前端能够经过Ajax与后端进行数据交互。

前端： 使用HTML、CSS、 Javascript（在Js中来撰写Ajax的请求），前端经过Ajax请求来获取数据，前端在进行交互和渲染。

后端：只须要把数据的基本结构返回给前端。

经过Ajax与后端服务器进行数据交互；前端只须要开发页面内容，数据由后端提供；ajax可使页面实现部分刷新，减小服务端负载和流量消耗。这是才有了专职的前端来法工程师，同时前端的各类类库就慢慢发展起来，好比早前的JQuery

优势

流量消耗变小了，局部刷新；用户体验提高

缺点

开发模式承载了更复杂的业务需求，一旦应用规模增大，仍是会致使难以维护，由于Html、Css、 JS仍是杂糅在一块儿。从而咱们须要设计模式和框架。
前端的MVC才会随之而来

MVC

MVC框架分为，前端MVC和后端MVC；
前端的MVC与后端的类似，模拟这后端的架构；都具备View、Controller和Model
Model： 模型负责保存应用数据，与后台数据进行同步
Controller：控制器负责业务逻辑，根据用户行为对Model数据进行修改
View： 负责视图的展现，将model中的数据可视化出来

来个模型瞅瞅～～
真够难画的，一图弄了10分钟。也没有多好看，应该是我不太用这个软件的问题，若是有错，那必定是个人错。哈哈哈哈哈

视图会经过事件去通知控制器，控制器去改模型，模型在尝试用某种办法通知视图去更新。
理论上可行，可是每每在实际开发中，并不会这样操做。由于开发过程并不灵活。好比： 一个小的事件操做，都必须通过这样的一个流程，那么开发就不便捷。

在实际中场景中，多是另外一种模式，这样的：
来～～～画图，算了用网上找的把。

这个模式看上去是方便一些，backbone.js框架就是这种模式；
View能够操做Model，Model改变也能够View；从而控制器层就显得很单薄，无关紧要；（控制器里面就变成了简单的数据坚监听和调用）
缺点： 错误很难定位，数据混乱

`由于MVC框架出现的缺陷，从而有了MVVM框架。最先是AngularJS 用的MVVM框架模式。
MVP模式前端开发并不常见，可是在安卓原生开发中，开发者仍是会考虑到它。`

MVP

MVP和MVC很接近，刚才看到了，可能会出现混乱的状况，MVP就 作了一个中间人，Presenter： 负责View和Model之间的数据流动，若是数据和视图非要交互就必需要经过中间人。

Presenter负责和Model进行双向交互，还有和View进行双向交互。
若是业务复杂一点，Presenter的体积增大、臃肿，就很难维护；

MVVM

MVVM能够分解成（Model-View-ViewModel）；ViewModel能够理解为在Presenter基础上的进阶。

ViewModel，主要是胶水层，核心思想是简化
1.数据发生变化，如何知道变化，经过数据响应式的机制，用某种机制知道这个数据的变化，自动的去响应数据的变化，自动去作更新；内部知道了数据的变化，不须要用户来操做。

1. 更新，之前作Dom操做，用JQ；数据变了要作Dom操做来更新（代码多，效率不高）；因此有虚拟Dom的方式去作更新，根据精准的diff算法来作比对；达到高效的结果。

`经过响应式和虚拟Dom来作到数据驱动。
若是数据变，直接视图更新；开发人员只须要修改数据，不用操做Dom；不须要操心其余事情。`

视图层如何改变数据层？
和以前同样，仍是作数据监听，模版引擎会有事件处理的语法，经过这些语法，轻易的写出这些事件监听的方式

优势

ViewModel 经过实现一套数据响应式机制自动响应Model中数据变化
ViewModel 也有一套更新策略自动将数据转化为视图更新
经过事件监听响应View中用户交互修改Model中数据
从而使开发者专一于业务逻辑，兼顾开发效率和可维护性

总结

三个框架，反映了web前端发展的进程，职责都是：

1. 代码分层
2. 职责（先后端）划分
3. 解决维护性问题
4. 解决 Model和View的耦合问题

MVC 早起专一应用在后端；前端早起的应用BackBone.js.

优势：分层清晰（刚开始，算是比以前清晰了）
缺点： 数据流混乱，灵活性带来的维护性问题

MVP 模式是由MVC的进化形式，Persenter做为中间层负责MV通讯，解决了二者耦合关系，可是中间层过于臃肿会致使维护问题

MVVM模式在前端领域目前更普遍。不只解决了MV的耦合问题，解决了维护二者映射关系的大量繁杂代码和Dom操做代码；提升了开发效率。