MVC 模式、MVP 模式与 MVVM 模式

在学习编程的过程中,我们或多或少都听说过这几种模式:MVC、MVP 与 MVVM,今天用一个篇幅来总结一下我认知中的三种模式

MVC

MVC 模式的意义是软件可以分为三个部分:

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

MVC 模式的基础通讯逻辑是这样的:

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

互动模式

MVC 有两种互动模式,一种是通过 View 接收指令,另一种是通过 Controller 接收指令

  1. 我们使用 View 接收指令时,View 会将指令发给 Controller 进行逻辑处理,Controller 处理以后会通知 Model 进行修改,随后 Model 通知 View 进行更新
  2. 当我们使用 Controller 接受指令时,Controller 接收到指令,然后通知 Model 进行数据修改,Model 负责通知 View 进行视图更新。


MVP

MVP 模式中 Controller 变成了 Presenter,同时也改变了通信方向

在 MVP 的模式下 View 与 Model 不再发生任何交互,所有的一切都通过 Presenter 进行通信

Presenter 在这里负责所有的业务逻辑处理,View 也就成为了 “被动视图”

MVVM

MVVM 则是我们近些年听到最多的模式,当前应用最广的 VUE、Angular 与 React 都是属于 MVVM 模式的框架

MVVM = Model + View + ViewModel

这里的 View 与 ViewModel 的通信方式是双向绑定,View 的所有变动都会体现在 ViewModel 中,由 ViewModel 进行逻辑处理并且通知 Model 进行数据更新,反过来一样,当 Model 中数据进行更新时也同时在 ViewModel 中进行逻辑处理,然后 ViewModel 会通知 View 进行视图更新

总结

以上三种模式对于编程规范甚至是了解框架原理都非常重要,有了模式的基础我们会更好地了解框架地做法甚至时逻辑地实现,能够有效减少无用代码的编写

当然以上大多都是参考自阮一峰老师的《MVC,MVP 和 MVVM 的图示》一文