摘要：，的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为，调用过程基本一致，最大的改良是间的双向绑定。和间，有一个对象，可以操作修改，使用。
参考：
MVC，MVP 和 MVVM 的图示 - 阮一峰
http://www.ruanyifeng.com/blo...
Web开发的MVVM模式
http://www.cnblogs.com/dxy198...
界面之下：还原真实的MV*模式
https://segmentfault.com/a/11...
Angular沉思录（一）数据绑定
https://github.com/xufei/blog...
深入理解JavaScript系列（32）：设计模式之观察者模式
http://www.cnblogs.com/TomXu/...
1 MVC 1.1 MVC 调用关系MVC/MVP/MVVM 在很多博问中都有整理，这里我根据阅读博文和自己的理解，梳理一下 web 前端 html、css、javascript 中的他们。
1.2 经典MVC的JS编码理解用户行为输入，View 传递给 Controller（在JS中通过事件监听实现）；Controller 进行应用逻辑处理，调用 Model 暴露的接口方法操作 Model；View 与 Model 间为观察者模式，Model 更新完数据后通知 View 更新。
JS中的观察者模式 - 汤姆大叔博文，本文阐述了如何在JS中实现观察者模式：观察者模式中 Model 通知 View 更新，实际上是 Model 对订阅了自己的 View 提供操作方法的调用。
View，View 包含2部分：1）实现界面展示的 html+css；2）对外暴露的操作 View 的方法。
View -> Controller，用户行为从视图传递至控制器，有两种方法：1）通过 html 标签的事件属性如 onclick；2）JS中的addEventListener（非IE）/ attachEvent（IE）方法。（如JQuery的bind和angular的ng-click等都是对原生方法的封装，等效于上述方法）
Controller，当视图发生用户行为输入时候，会进入控制器中的事件回调函数，在回调函数中，一般会对界面数据进行预处理（如：输入校验）、应用逻辑处理（如：界面显示Loading），然后调用对应的 Model 方法进行模型更新操作。
Controller -> Model，Controller 的事件回调函数中调用 Model 的操作方法。
Model，Model 可理解为一个对象，对象的属性就是抽象的数据模型，对象的方法就是对 Controller 暴露的操作方法。
Model -> View，Model 更新 View 使用观察者模式，从JS实现上来说 Model 有个数组队列中保存着订阅（subscribe）了自己 View 的更新方法，Model 更新完毕后，遍历并调用数组中的 View 更新方法即为发布（publish）。
OK，这就是 HTML+CSS+JS 实现 经典MVC 的一个流程，下面我们说说它的优缺点。
1.3 MVC 优缺点优点：
1）职责分离思想，MVC三者各司其职，模块化；
2）观察者模式，实现单个Model可更新多视图更新。
职责分离的优点不用多说，代码清晰易维护；观察者模式实现单个数据模型，可同时更新多个视图，扩展性良好。
缺点：
1）View依赖Model，不可避免引入业务逻辑，不易复用。
举个栗子，model 和 view 如下：
model 仅有 good/middle/bad 3种数据，view 基于此数据，需扩展颜色、图例描述等系列业务逻辑，经典MVC中，view 对外暴露渲染饼图的方法，颜色这些业务的东东就被包含进去了，这就是我们说的不可避免引入业务逻辑。假设现在有新的 model2 含3种商品数量（颜色用黄、绿、蓝），要复用饼图 view，我们很容易想到，在 view 与 model 间加一层模型转换就能很实现复用，但是经典MVC中，model 与 view 之间是观察者模式，那么模型转换只能放到 view 中（model 一般不变），view 得扩展个新方法来满足 model2。
这个简单例子也许不能很充分说明 View 依赖 Model 造成的问题，但可设想如果 View 的业务逻辑和应用功能十分复杂，那么要适配不同的Model必然造成 View 的臃肿，一定程度后便难以复用。
2.1 MVP调用关系我理解，现在大家常提及的 MVC 实际就是 MVP，它刷新界面一般遵循 V -> P -> M -> P -> V 的步骤。（MVP 模式将 Controller 改名为 Presenter，可等同视之）
2.2 MVP的JS编码理解用户行为输入，View 传递给 Presenter（在JS中通过事件监听实现）；Presenter 进行应用逻辑处理，调用 Model 暴露的接口方法操作 Model；Model 更新完数据后传递给 Presenter（异步 Model 操作可使用 promise，让Presenter在回调函数中获得最新数据），Presenter 处理最新数据，调用 View 暴露的接口方法更新 View。
MVP 彻底分离了 View 与 Model，使用 HTML+CSS+JS 编码，移除 MVC 观察者模式，其余都很容易理解，在此不再赘述。
2.3 MVP 优缺点优点：
1）解决View与Model耦合问题，使View变薄，更易复用。
请对应参考上面 MVC 中的缺点1的例子。使用 MVP 后，Presenter 作为 View 和 Model 的中间层，那么 View 和 Model 仅需对外暴露标准接口，模型转换的那些事儿，全部可以交给Presenter，View 层变薄，更容易复用。
3 MVVM（以Angular1.x为例） 3.1 MVVM 调用关系缺点：
1）Presenter 承担了V->M和M->V的应用和业务逻辑，容易变得臃肿，可维护性降低。
3.2 双向绑定带来了什么MVVM 模式实际就是将 MVP 中的 Presenter 改名为 ViewModel，调用过程基本一致，最大的改良是 ViewModel 间的双向绑定。
这里以实际项目中用过的 Angular1.x 为例，下图仅为示意便于理解。
View 和 ViewModel 间，有一个对象 $scope，ViewModel 可以操作修改 $scope.data，View html 使用 $scope.data。当 ViewModel 设置 $scope.data=123 时，Angular框架会自动刷新 View 的显示 123，同理当界面有 input 这样的入口时，修改 data 时，Angular框架也会自动刷新到 $scope.data 中。
【优点】View 和 ViewModel 间的数据同步功能，部分被 Angular 框架承担，部分解决了 MVP 中 Presenter 臃肿的问题，当然编码也会很方便。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87366.html
摘要：如何同步的变更。在没有环境下对进行单元测试的时候，业务逻辑的正确性是无法验证的更新的时候，无法对的更新操作进行断言。对是通过接口进行，在对进行不依赖环境的单元测试的时候。这里根据上面的例子给出了的单元测试样例。 前言 做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过，都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。 网上很多文章关于这方面的讨...
摘要：模型与视图解耦，编写单元测试更方便。切实的将模型绑定到了视图，这一责任在中被控制器提前持有了。视图和视图模型使用数据绑定和事件进行通信。触发器数据触发器允许我们进一步在视图状态变化后改变我们的对象属性。 MVC、MVP 和 MVVM 三个非常重要的架构模式 MVC (Model(模型)-View(视图)-Controller(控制器)) MVP (Model(模型)-View(视图)...
摘要：的模式之间不同主要是与的数据传递的流程不同。所以无论是复杂化简单化还是修改流程，基本都是因为技术栈变化了对应做的调整。实例实际项目往往采用更灵活的方式，以为例。用户可以向发送指令事件，再由直接要求改变状态。与不发生联系，都通过传递。 概述 M -V- X 本质都是一样的 重点还是在于M-V 的桥梁要靠 X来牵线。 X的模式之间不同 主要是 M与V 的数据传递的流程不同。数据传递的流程不...
摘要：，的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为，调用过程基本一致，最大的改良是间的双向绑定。和间，有一个对象，可以操作修改，使用。 参考：MVC，MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下：还原真实的MV...
阅读 607·2023-04-26 00:30
阅读 2405·2021-11-23 09:51
阅读 865·2021-11-02 14:38
阅读 2431·2021-09-07 10:23
阅读 2081·2021-08-21 14:09
阅读 1152·2019-08-30 10:57
阅读 1508·2019-08-29 11:20
阅读 1014·2019-08-26 13:53
