专栏首页YuanXin从Web开发的角度聊聊MVC、MVP和MVVM

从Web开发的角度聊聊MVC、MVP和MVVM

本文从 Web 开发的角度聊聊 MVC、MVP 和 MVVM 这三种架构模式。

什么是 M、V?

M、V 是这三种架构模式中的共同含有的部分,M 是 Model 的缩写,代表“数据模型”;V 是 View 的缩写,代表“视图”。

这三种架构设计中,都对 M 和 V 进行了分离,Model 掌握数据源,View 负责视图展示。而剩下的部分(MVC 中的 C、MVP 中的 P、MVVM 中的 VM),就是不同架构中对 M 与 V 之间“交互”的特色处理。

MVC

MVC 中的 C 是 Controler 的缩写,代表“控制器”,它的职责是消息处理。这里的“消息”在不同情况下,有不同的语义。在前端,消息指的是用户对于视图的操作;在后端,消息指的是来自客户端的 rest api 请求。

对于 View 来说,它不是和 Model 完全分离的。如果用户的操作是访问数据,那么可以在 View 中向 Model 要数据;如果用户的操作是更新数据,那么需要统一交给 可以看出,MVC 的不足是 View 和 Controler 来处理,并且 可以看出,MVC 的不足是 View 和 Controler 在处理完成后,会有机制通知 View,一般采用“观察监听”设计模式。

三者之间的关系如下图所示:

如果想看 Nodejs 的 demo,请参考《使用 Node.js 实现简易 MVC 框架》这篇文章。

MVP

可以看出,MVC 的不足是 View 和 Model 之间不是严格意义的完全分离。MVP 正是对 MVC 这一点做出了改进。

MVP 中的 P 是 Presenter 的缩写,代表“展示器”。所有的消息(客户端请求、用户事件)都统一交给 Presenter 来处理,由 Presenter 来向 Model 进行数据查询或者更新。而 Presenter 和 View 之间,一般会约定好接口调用的格式。

三者之间的关系如下图所示:

MVVM

可以看出,MVP 虽然实现了 V 和 M 的分离,但是开发者必须提前规定 P 和 V 的交互接口,对开发来说并不友好。有没有办法能够实现,当 Model 发生改变的时候,立即就下发到视图,并且实现视图更新呢?

MVVM 通过“双向绑定”实现了这个要求。MVVM 中的 VM 是 View Model 的缩写,代表“数据模型”。

前端框架 Vuejs 就使用了这种设计,使得开发者用起来非常方便。开发者只需要关注 View Model 和 Model 即可,不再需要对 View 进行显式手动操作:用户事件导致的 View 变动会自然反映在 ViewModel 上,ViewModel 中的数据操作也会自动反映在 View 上。

它们的关系如下图所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6重难点整理

    ES6 新增了let和const,它们声明的变量,都处于“块级作用域”。并且不存在“变量提升”,不允许重复声明。

    心谭博客
  • 剑指offer - 从尾到头打印链表 - JavaScript

    发现后半段出栈的逻辑,其实就是将数组reverse反转。因此,借助 javascript 的 api,更优雅的写法如下:

    心谭博客
  • 玩转 Nodejs 命令行

    在做 cli 工具的时候,非常需要命令行相关的第三方库。一个比较稳健成熟的命令行应该考虑以下 4 种需求:

    心谭博客
  • 聊聊iOS中的 MVC、MVP、MVVM以及 VIPER等代码组织方式

    但是现实中我们的View依然跟Model耦合,因为如果完全按照这个理想化的MVC的话,View(cell)层的设置都应该在 Controller中,这样的话,C...

    進无尽
  • 界面之下:还原真实的MV*模式

    做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这...

    laixiangran
  • 你真的了解MVC吗

    提到MVC,你会想到什么?三层架构?设计模式?JSP?老掉牙?面相对象制造器? 先来听个故事吧。

    nimomeng
  • MVC, MVP, MVVM比较以及区别

    作者:JustRun 原文:cnblogs.com/JustRun1983/p/3679827.html MVC, MVP和MVVM都是用来解决界面呈现和逻辑...

    顶级程序员
  • VS2012+EF5学习MVC4(一)

    诶,一言难尽的苦楚啊。昨天被人刺激的一文不值,就因为自己丢了几个月的Entity FrameWork和MVC,也怪咱自己不争气啊,忙了几个月其他事把这个忘得差不...

    Isaac Zhang
  • JavaScript实现在线生成二维码

    二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。

    何处锦绣不灰堆
  • 表观调控13张图之一证明基因干扰有效性

    我把表观调控数据分析,拆分成为了13张图,分别录制为13个视频,即将免费发布在B站,这个期间我们的视频编辑师还在兢兢业业的奋斗,希望这13张图能带领大家学会表观...

    生信技能树

扫码关注云+社区

领取腾讯云代金券