参考：MVC、MVP与MVVM图解-阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198。..界面下：还原真实MV*模式https://segmentfault.com/a/11...AngularMeditation(1)DataBindinghttps://github.com/xufei/blog...深入理解JavaScript系列（32）：设计模式之观察者模式http://www.cnblogs.com/TomXu/...MVC/MVP/MVVM已经在很多博客问题中进行了整理。这里我是基于阅读博文和自己的理解，整理一下web前端html、css、javascript。1MVC1.1MVC调用关系用户行为输入，View传递给Controller（在JS中通过事件监听实现）；Controller进行应用逻辑处理，调用Model暴露的接口方法来操作Model；View和Model之间是观察者模式，Model更新数据后通知View更新。ObservermodeinJS-UncleTom的博文，这篇文章讲解了如何在JS中实现观察者模式：在观察者模式下，Model通知View进行更新，实际上是Model调用为View提供操作方法已订阅自身的视图。1.2经典MVCJS编码理解View，View由2部分组成：1）html+css实现界面显示；2）操作View对外暴露的方法。View->Controller，用户行为从view传递到controller，有两种方式：1）通过html标签的event属性如onclick；2）JS中的addEventListener（非IE）/attachEvent（IE）方法。（比如jQuery的bind和angular的ng-click都是对native方法的封装，相当于上面的方法）function，一般会对界面数据进行预处理（如：输入验证），应用逻辑处理（如：界面显示Loading），然后调用相应的Model方法更新模型。Controller->Model，在Controller的事件回调函数中调用Model的操作方法。Model，Model可以理解为一个对象，对象的属性就是抽象的数据模型，对象的方法就是暴露给Controller的操作方法。Model->View，Model使用观察者模式更新View。从JS实现的角度来看，Model有一个数组队列，里面存放着自己View的订阅（subscribe）更新方法。Model更新完成后，遍历并调用数组中的View更新方法publish。OK，这就是一个HTML+CSS+JS实现经典MVC的过程，下面说说它的优缺点。1.3MVC的优缺点优点：1）职责分离的思想，MVC三者各司其职，模块化；2）Observer模式，可以更新单个Model，实现多个view的更新。不用说，职责分离的好处是代码清晰，易于维护；观察者模式实现单一数据模型，可以同时更新多个视图，具有良好的可扩展性。缺点：1）View依赖于Model，不可避免地引入了业务逻辑，不易复用。比如model和view如下：model只有good/middle/bad三种数据，而view是基于这些数据，需要扩展颜色、图例描述等一系列业务逻辑。在经典MVC中，view暴露了渲染饼图的方法。颜色这个业务的东西是包含进来的，也就是我们所说的业务逻辑的必然引入。假设现在有一个新的model2，里面包含了3种商品（颜色分别是黄、绿、蓝），我们想复用饼图视图，我们很容易想到在视图和视图之间加一层模型转换该模型可以轻松实现重用。但是在经典的MVC中，观察者模式是介于模型和视图之间的，所以模型的转换只能放在视图中（模型一般保持不变），而视图要扩展一个新的方法来满足model2。这个简单的例子可能并不能完全说明View对Model的依赖带来的问题，但是可以想象，如果View的业务逻辑和应用功能非常复杂，那么适配不同的Model势必会导致View变得臃肿，并且在一定级别后将难以重用。2MVP我理解大家常说的MVC其实就是MVP，一般都是按照V->P->M->P->V的步骤来刷新界面。（MVP模式将Controller的名字改成了Presenter，可以认为是一样的）2.1MVP调用与用户行为输入相关，将View传递给Presenter（在JS中通过事件监听实现）；Presenter进行应用逻辑处理，调用Model暴露的接口方法对Model进行操作；Model更新数据后传递给Presenter（异步Model操作可以在回调函数中使用promise让Presenter获取最新数据），Presenter处理最新数据并调用暴露的接口方法通过View来更新View。2.2MVP的JS编码理解MVP完全分离了View和Model，使用HTML+CSS+JS编码，去除了MVC观察者模式，剩下的就很容易理解了，这里不再赘述。2.3MVP的优点和缺点优点：1）解决了View和Model的耦合问题，让View更瘦，更容易复用。请参考上面MVC中缺点1的例子。使用MVP后，Presenter作为View和Model的中间层，View和Model只需要对外暴露标准接口，模型转换的事情全部交给Presenter，View层变薄了更容易重用。缺点：1）Presenter承担了V->M和M->V的应用和业务逻辑，容易变得臃肿，可维护性降低。3MVVM（以Angular1.x为例）3.1MVVM调用关系MVVM模式其实就是将MVP中的Presenter改名为ViewModel，调用过程基本相同。最大的改进是ViewModel之间的双向绑定。3.2双向绑定带来了什么？这里以实际项目中使用的Angular1.x为例。下图只是为了说明，便于理解。View和ViewModel之间有一个对象$scope，ViewModel可以修改$scope.data，Viewhtml使用$scope.data。当ViewModel设置$scope.data=123时，Angular框架会自动刷新View123的显示。同样，当界面有input这样的入口时，当数据被修改时，Angular框架也会自动刷新到$scope。数据。【优点】View和ViewModel之间的数据同步功能部分由Angular框架承担，部分解决了MVP中Presenter臃肿的问题。当然编码也很方便。
