MVC、MVP、MVVM三种模式的区别

最新推荐文章于 2023-12-05 15:58:26 发布

原创最新推荐文章于 2023-12-05 15:58:26 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mvvm #mvc

web前端同时被 2 个专栏收录

13 篇文章

订阅专栏

4 篇文章

订阅专栏

本文探讨了MVC、MVP及MVVM三种软件架构模式的发展历程与特点。重点介绍了MVVM模式如何解决MVC和MVP的问题，实现低耦合、高复用性和易于独立开发与测试的优点。

一、MVC(model、view、controller)：

流程图：

在这里插入图片描述

框架：比较早的backbone.js框架使用MVC模式。

结构：
model：			负责保存应用数据，与后端数据进行同步；
view：			负责视图展示，将model中的数据记性可视化；
controller：	负责业务逻辑，根据用户行为对model数据进行修改。

问题：
1.model和view的数据流混乱，维护麻烦；
2.一些逻辑代码在view中增加，导致view体积过于庞大，而controller比较单薄。

二、MVP(model、view、presenter)：

流程图:

在这里插入图片描述

过度阶段，很快便被MVVM的出现替代

结构：
1.presenter，同时负责和model、view进行双向交互；view负责数据展示。
2.和MVC思想相通：controller/presenter负责逻辑处理，view负责显示；

问题：
1.相对于MVC，view变成了被动视图，但是体检缩小；
2.大部分逻辑都需要presenter处理，presenter体积过大，难以维护。

三、MVVM(model、view、viewModel)：

流程图：

在这里插入图片描述

框架：Angular.js		React.js	Vue.js

结构：view和model被分离，三部分都被解耦。model是数据层，view是视图层。

问题：
1.低耦合：	视图（view）独立于model变化和修改，一个viewmodel可以绑定到不同的view，view变化的时候model可以不变，model变化的时候view也可以不变；
2.可复用性：	可以把一些视图逻辑放在一个viewmodel里，让很多view重用这段视图逻辑；
3.独立开发：	开发人员专注业务逻辑和数据开发，设计人员专注页面设计；
4.可测试：	可以针对viewmodel进行测试。