2

参考:
web开发的MVVM模式:http://www.cnblogs.com/dxy198...
MVC,MVP 和 MVVM 的图示 - 阮一峰:http://www.ruanyifeng.com/blo...
界面之下:还原真实的MV*模式:https://segmentfault.com/a/11...

1. MVC

图片描述

  • View (视图层)。它是提供给用户的操作界面,是程序的外壳。

  • Model(数据层),也就是程序需要操作的数据或信息,是整个系统的核心部分。

  • Controller(控制层/逻辑层),它负责根据用户从"视图层"输入的指令,选取"数据层"中的数据,然后对其进行相应的操作,产生最终结果。

-View 当Model变更了以后,会通过观察者模式(Observer Pattern)通知View;View通过观察者模式收到Model变更的消息以后,会向Model请求最新的数据,然后重新更新界面

1.1 MVC是如何工作的?

view : 用户产生的行为(通过DOM事件)
Controller: 视图行为传递到了逻辑层,逻辑层对数据进行处理(比如对表单进行正则校验)、以及一些其他的逻辑处理。再调用Model相应的方法,更新数据。

1.2 优缺点

优点
  • 低耦合性、重用性高,应对每个组件的变化性好,便于开发,测试与维护。

  • 观察者模式可以做到多视图同时更新。

缺点
  • 存在一定的模糊性

2. MVP

图片描述

2.1 特点

  • View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里

  • MVP 隔离了MVC中的 M 与 V 的直接联系后,靠 Presenter 来中转,所以使用 MVP 时 P 是直接调用 View 的接口来实现对视图的操作的,这个 View 接口的东西一般来说是 showData、showLoading等等。M 与 V已经隔离了,方便测试了

  • 由于Presenter可以反作用于View,这样View的渲染有可能就放在了Presenter中,所以View和Presenter的交互会过于频繁。如果Presenter过多地渲染了View,往往会使得它与特定的View的联系过于紧密。一旦View需要变更,那么Presenter也需要变更了。

3. MVVM

图片描述

3.1

  • ViewModel和View之间的交互通过数据绑定,而数据绑定可以实现双向的交互,这就使得视图和控制层之间的耦合程度进一步降低

  • 从图中我们可以看到MVVM与MVP最大的不同就在于View与ViewModel交互的时候使用了松耦合的双向绑定,而不是像View与Presenter那样直接交互。ViewModel作为View的数据映射,通常View上有什么属性,ViewModel上也会存在相应的一个属性,这两个属性通过事件实现了双向的绑定,常见的MVVM框架都替我们完成了这样的绑定过程。


chase
9 声望0 粉丝

前端工程师


引用和评论

0 条评论