MVC到MVP最后形成MVVM,经历了什么

发布于 2021-12-27  181 次阅读


MVC 到 MVP最后形成MVVM,经历了什么

我也不知道经历了什么


MVC

MVC模式的意思是,软件可以分成三个部分。

img

  • 视图(View):用户界面。
  • 控制器(Controller):业务逻辑
  • 模型(Model):数据保存

各部分之间的通信方式如下。

img

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后,要求 Model 改变状态
  3. Model 将新的数据发送到 View,用户得到反馈

所有通信都是单向的。

  • 接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。

img

  • 另一种是直接通过controller接受指令。

img

MVP

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

img

  1. 各部分之间的通信,都是双向的。

  2. View 与 Model 不发生联系,都通过 Presenter 传递。

  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式一致。

img

唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

ViewModel需要实现一套数据响应式机制,自动响应Model中数据变化,同时Viewmodel需要实现一套更新策略自动将数据变化转换为视图更新;此外,VM还要通过事件监听响应View中用户交互修改Model中数据。这样在ViewModel中就减少了大量DOM操作代码,就像我们写Vue的时候如果没有特别需求,一般不用写原生的addEventListener。

MVVM在保持View和Model松耦合的同时,还减少了维护它们关系的代码,使用户专注于业务逻辑,兼

顾开发效率和可维护性。

谈一谈你对MVC_MVP_MVVM的理解

::: tip

其实我们这一代前端程序员对MVC的接触并不多,因为我们入门级的前端框架就是MVVM.

而MVC还是我在学习后端开发的时候遇到的,比如说在Express的一些教材里面,它采用的前后耦合的开发方式,我认为就是传统的MVC。

M, 也就是Model, 它主要进行的是一些数据结构的定义以及数据的保存;

V, 就是views也就是视图,在Node里面,它会结合一些模板引擎就是前端的页面渲染,并返回给客户浏览器进行渲染;

C, 就是Control, 后端也称为控制层,它负责监听用户事件,进行一些逻辑处理,最后进行视图更新。

总的来说, MVC是单向数据流的一个开发模式,V到C,C到M,最后M到V, 形成一个闭环。

MVP我并没有真正接触,对它的了解全都源于网络,就是它把MVC中的C变成了P(presenter),

然后,各部分之间的通信,都是双向的,但是View 与 Model 不发生联系,都要通过 Presenter 传递。

MVVM也就是Vue采用的模式,Model- View- ViewModel三层。它是MVC的发展产物,MV的角色没有发生变化,VM是这个开发模式里面的核心,但同时又是我们无需理解细节即可进行开发的一个层面。

ViewModel需要实现一套数据响应式机制,自动响应Model中数据变化,同时Viewmodel需要实现一套更新策略自动将数据变化转换为视图更新;此外,VM还要通过事件监听响应View中用户交互修改Model中数据。这样在ViewModel中就减少了大量DOM操作代码,就像我们写Vue的时候如果没有特别需求,一般不用写原生的addEventListener。

MVVM在保持View和Model松耦合的同时,还减少了维护它们关系的代码,使用户专注于业务逻辑,兼

顾开发效率和可维护性。

:::

资料参考

MVC,MVP 和 MVVM 的图示 - 阮一峰的网络日志 (ruanyifeng.com)


见其广知其深