MVC、MVP、MVVM三种模式的介绍及区别

MVC、MVP 和 MVVM 是三种常见的 软件架构设计模式

MVC

M : Model,负责存储页面的业务数据,以及对相应数据的操作。
V : View,负责页面的显示逻辑。
C : Controller, 是 View 层和 Model 层的纽带,负责用户与应用的响应操作。

在mvc模式中,通过分离 Model、View 和 Controller 的方式来组织代码结构。当用户与页面产生交互的时候,Controller 层的事件触发器就开始工作了,通过调用 Model 层,来完成对 Model 的修改,然后 Model 层再去通知 View 层更新。

在这里插入图片描述

MVP

M : Model,负责存储页面的业务数据,以及对相应数据的操作。
V : View,负责页面的显示以及与用户交互。
P : Presenter, 负责完成View于Model间的交互。

MVP 的模式通过使用 Presenter 实现了对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,而在MVP 模式中,View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。

在 View 层通过 presenter 对象来调用 Model 层中数据请求的接口,而 Model 层中数据请求的结果会通过 presenter 中定义的接口回调给 presenter ,然后 presenter 在通知给 View 层。

在这里插入图片描述

MVVM

M : Model,负责存储页面的业务数据和业务逻辑。
V : View,负责页面的显示。
VM : ViewModel,负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作。

Model 层和 View 层并无直接关联,而是通过 ViewModel 来进行联系的,MVVM通过实现双向数据绑定来实现 Model 层和 View 层的同步更新。

双向数据绑定的实现:ViewModel 层通过 数据绑定 来将 Model 转化成 View ,通过 DOM 事件监听 来将 View 转化成 Model ,这样就实现了双向数据绑定的效果。

在这里插入图片描述

区别

MVC 与 MVP 的区别:
上面在介绍MVP模式的时候也讲到了二者之间的区别,MVC 模式下 Controller 只能获取 Model 的接口,所以它没有办法控制 View 层的更新,是通过 Model 来控制 View 层的更新的。而 MVP 模式下,View 层向 Presenter 层暴露了接口,所以 Presenter 层可以直接操作 View 层,实现了对 Model 层和 View 层的解耦。

MVP 与 MVVM 的区别:
通过上面的模型图来看,MVP 和 MVVM 模式似乎是相同的,其实不然。它们是相似的,唯一区别在于 MVVM 模式采用了双向数据绑定。开发者只需要更改 View 层或者 Model 层中的数据值,不需要进行同步 Model 层和 View 层的操作,因为数据的同步会由 ViewModel 层自动完成。而 MVP 模式中,开发者需要进行处理接收事件和 View 更新的工作。

猜你喜欢

转载自blog.csdn.net/jiangjunyuan168/article/details/127043879