400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

再谈MV*(MVVMMVPMVC)模式的设计原理—封装与解耦-创新互联

精炼并增补于:界面之下:还原真实的MV*模式

成都创新互联2013年至今,先为阜阳等服务建站,阜阳等地企业,进行企业商务咨询服务。为阜阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

图形界面的应用程序提供给用户可视化的操作界面,这个界面提供给数据和信息。用户输入行为(键盘,鼠标等)会执行一些应用逻辑,应用逻辑(application logic)可能会触发一定的业务逻辑(business logic)对应用程序数据的变更,数据的变更自然需要用户界面的同步变更以提供最准确的信息。

在开发应用程序的时候,以求更好的管理应用程序的复杂性,基于职责分离(Speration of Duties)的思想都会对应用程序进行分层。在开发图形界面应用程序的时候,会把管理用户界面的层次称为View应用程序的数据为Model(注意这里的Model指的是Domain Model,这个应用程序对需要解决的问题的数据抽象,不包含应用的状态,可以简单理解为对象)。Model提供数据操作的接口,执行相应的业务逻辑。

有了View和Model的分层,那么问题就来了:View如何同步Model的变更,View和Model之间如何粘合在一起?

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

MV*模式解决什么问题

MV*就是实现了领域模型数据和UI层的解耦

MVC、MVP、MVVM对其解耦的思路的不同。从历史的角度来看,MVC、MVP和MVVM是一种进化的关系。但是鉴于项目的规模以及模式实现的方式不同,不同的MV*模式各有其优点和缺点,难分孰好孰坏

但是业界越来越认为:MVVM是前端领域最好的MV*模式。Angular、Vue是MVVM模式典范

MVC的依赖关系

MVC出了把应用程序分成View、Model层,还额外的加了一个Controller层,职责为进行Model和View之间的协作(路由、输入预处理等)的应用逻辑(application logic)。

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

用户对View的输入等操作并不会在View的相关模块中处理逻辑,而是由Controller层获得这些操作(所谓的Pass Call),并由Controller层对这些操作中的数据经过应用逻辑的操作,然后在调用Model层的接口,将数据交给Model层。Model层执行与业务逻辑相关的操作,并更新数据。Model和View通过观察者模式联系在一起,即View是Model的观察者,当Model数据变动之后,通知View层进行数据更新。

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

MVC优点

MVC缺点

MVP模式

MVP比起MVC模式,它的特点很明显。MVP中M和V之间的依赖关系被消除了。

在MVC中,M和V之间通过观察者模式依赖。这种依赖关系在MVP中被转移到M和P层中。这样一来P层必须通过一定的机制通知V层进行数据的更新。所以MVP模式中V层中提供了供P层调用的接口。P层作为观察者获得数据变化是,将调用V层的接口将变化反映到V层中。

在MVP中:

MVP(Passive View)的调用关系

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

MVP(Passive View)优点

MVP(Passive View)缺点

MVP(Supervising Controller)

Supervising Controller模式中,Presenter会把一部分简单的同步逻辑交给View自己去做,Presenter只负责比较复杂的、高层次的UI操作,所以可以把它看成一个Supervising Controller。

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

因为Supervising Controller用得比较少,MVVM可以看作是一种特殊的MVP(Passive View)模式,或者说是对MVP模式的一种改良。

MVVM的依赖

Model-View-ViewModel模式中,M层数据的变化不是通过观察者模式通知到V层的(即没有M和V的依赖),也不是通过VM层调用V层的接口将数据传递给V层的(这意味着用户代码不需要手动更新V层)。而是通过在VM层实现一个特殊的binder,将数据从M层直接绑定到V层。这样ViewModel层了解Model层,View层了解ViewModel层。

ViewModel充当了一个数据转换器的作用。它将Model信息转换为View信息,还将命令从View传递到Model。在这里,View可以访问ViewModel,ViewModel可以访问Model。

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

MVVM的调用关系和MVP一样。但是,在ViewModel当中会有一个叫Binder,或者是Data-binding engine的东西。以前全部由Presenter负责的View和Model之间数据同步操作交由给Binder处理。你只需要在View的模版语法当中,指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对进行Model更新的时候,Binder会自动把数据更新到View上去,当用户对View进行操作(例如表单输入),Binder也会自动把数据更新到Model上去。这种方式称为:Two-way data-binding,双向数据绑定。可以简单而不恰当地理解为一个模版引擎,但是会根据数据变更实时渲染。

MVVM把View和Model的同步逻辑自动化了。以前Presenter负责的View和Model同步不再手动地进行操作,而是交由框架所提供的Binder进行负责。只需要告诉Binder,View显示的数据对应的是Model哪一部分即可。

再谈MV*(MVVM MVP MVC)模式的设计原理—封装与解耦

MVVM优点

MVVM缺点

如有更新,只在原文进行:再谈MV*(MVVM MVP MVC)模式的设计原理-封装与解耦,如果不妥之处,亲留言告知。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文题目:再谈MV*(MVVMMVPMVC)模式的设计原理—封装与解耦-创新互联
网页链接:http://mbwzsj.com/article/hjjhj.html

其他资讯

让你的专属顾问为你服务