前端框架
- angular
MVC模式,双向数据绑定,依赖注入 - react
virtual DOM(虚拟DOM,即与DOM一样的对象,操作对象避免DOM的直接操作从而提高性能),性能上辗轧angular - vue
结合angular和react的优点,MVVM模式,高性能高效率框架
架构模式
MVC模式
- M: Model (数据) => 数据保存
Model(模型)表示应用程序核心(比如数据库记录列表)。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。 - V: View (视图) => 用户界面
View(视图)显示数据(数据库记录)。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。 - C: Controller (控制器) => 业务逻辑
Controller(控制器)处理输入(写入数据库记录)。
Controller(控制器)是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

MVC 分层有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
MVC是一个框架模式,它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件:模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。
MVP
MVP是模型(Model)、视图(View)、主持人(Presenter)的缩写,分别代表项目中3个不同的模块。
- 模型(Model):
负责处理数据的加载或者存储,比如从网络或本地数据库获取数据等; - 视图(View):
负责界面数据的展示,与用户进行交互; - 主持人(Presenter):
相当于协调者,是模型与视图之间的桥梁,将模型与视图分离开来。

View与Model并不直接交互,而是使用Presenter作为View与Model之间的桥梁。其中Presenter中同时持有View层以及Model层的Interface的引用,而View层持有Presenter层Interface的引用。当View层某个界面需要展示某些数据的时候,首先会调用Presenter层的某个接口,然后Presenter层会调用Model层请求数据,当Model层数据加载成功之后会调用Presenter层的回调方法通知Presenter层数据加载完毕,最后Presenter层再调用View层的接口将加载后的数据展示给用户。这就是MVP模式的整个核心过程。
MVVM
MVVM架构模式是MVP的演变
- Model
- View
- ViewModel类似于MVP中的Presenter,唯一区别是它为双向绑定,View的变动自动反映在ViewModel,反之亦然。

核心:关注Model的变化,让MVVM框架利用自己的机制去更新DOM,让开发者从操作DOM的繁琐解脱。
不管是哪个,让Model和View不能直接通信是非常关键的限制。让Model和View直接通信在系统变得复杂时会成为灾难,Model和View直接耦合,会使得系统失控。
本文介绍了前端框架Vue.js及其采用的MVVM架构模式,对比了MVC和MVP模式。Vue.js结合了Angular和React的优点,提供高性能的数据绑定。在MVC中,模型、视图和控制器各司其职,实现分层解耦。MVP模式中, Presenter作为View和Model的桥梁,实现双向通信。MVVM模式下,ViewModel通过双向绑定自动同步View和Model的状态。

被折叠的 条评论
为什么被折叠?



