前端开发中,MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern)。它们通过分离关注点来改进代码的组织方式。
不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往使用了多种设计模式。
要了解MVC、MVP和MVVM,就要知道它们的相同点和不同点。
不同部分包括3部分,分别是C(Controller)、P(Presenter)、VM(View-Model),而相同的部分则是MV(Model-View)。
MVC
MVC是软件架构中最常见的一种框架,它的意思是,软件可以分成三个部分:
视图(View),用户界面;
控制器(Controller),即业务逻辑;
模型(Model),数据保存。
各部分之间的通信方式如下:
View传送指令到Controller;Controller完成业务逻辑后,要求Model改变状态;Model将新的数据发送到View,用户得到反馈。所有通信都是单向的。
MVC还有一个重要的缺陷,view层和model层是相互可知的,这意味着两层之间存在耦合。
耦合对于一个大型程序来说是非常致命的,因为这表示开发,测试,维护都需要花大量的精力。
正因为MVC有这样那样的缺点,所以才演化出了MVP和MVVM这两种框架。
MVP
MVP模式将Controller改名为Presenter,同时改变了通信方向。
各部分之间的通信,都是双向的。View与Model不发生联系,都通过Presenter传递。View非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View)。即没有任何主动性,而Presenter非常厚,所有关于用户事件的转发全部交由presenter层处理,所有逻辑都部署在presenter层。
MVVM
MVVM 由 Model、View、ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
MVVM模式将Presenter改名为ViewModel,基本上与MVP模式完全一致。
唯一的区别是,提供对View和ViewModel的双向数据绑定,View和Model之间并没有直接的联系,而是通过ViewModel进行交互。
View的变动,自动反映在ViewModel上,反之亦然,这样就保证视图和数据的一致性。
ViewModel通过双向数据绑定把View层和Model层连接了起来。
而View和Model之间的同步工作完全是自动的,无需人为干涉。
因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理