MVC、MVP、MVVM 架构 笔记

个人笔记 by Ai, 如有错误 望指正谢谢


一、主流 Web MVC

流程 :用户操作 → Controller -请求读/改数据 → Model -执行请求并返回结果 → Controller -传递结果→ View -根据结果更新页面

这里的 View不依赖Model行为,但大概率依赖数据契约,简单说就是 Model 负责规定数据"有什么",View 则根据这些数据的格式来决定页面"怎么显示"。属于耦合度偏低的数据耦合。


二、经典 MVC

流程①:View -主动监听 →Model -数据变动后通知 →View-拉取变动后的数据更新页面

流程② :用户操作 → Controller -请求读/改数据 → Model -变更数据,通知观察者(这里指的View)

View持有Model引用,但只读不写,同上面本质上是一回事,数据耦合、轻耦合。


三、MVP

流程 :用户操作 → Presenter -读/改数据 → Model -返回结果 → Presenter -操控→ View

和上面的主流 Web MVC 非常相似,不同是View:

  • View 和 Model 完全无耦合。
  • View更抽象 更通用化,它可能提供一系列元素或调用接口,供Presenter自由实现

**举例:**一个通用的账户登录页面,页面包含标题、背景图、账号密码输入框、登录按钮,以及错误弹窗。采用 MVP 架构时,View 只需定义好这些 UI 元素,可能再封装一个弹窗调用方法就完了。它就像一个纯静态界面,只负责展示视图本身,完全不理解按钮、输入框对应的业务逻辑,具体功能实现全部交由 Presenter 处理。

如果换成上面主流的 Web MVC,情况就大不一样了: View 清楚自己是登录界面。用户点击登录后,它会把账号和密码传给 Controller 做校验,拿到结果后自主判断对错,校验失败就弹出提示。同时它还会主动校验输入内容,一旦发现账号或密码为空,立刻弹窗提醒。还有页面标题显示的是什么,View 也会主动问问 Controller 。


四、MVVM

流程:

用户操作 View → ViewModel处理 → Model更新 → ViewModel更新 → View自动刷新

**数据驱动视图!自动同步!**View ← 双向绑定 → ViewModel

和 MVP 中的 View 一样,MVVM 的 View 也完全不关心业务逻辑。用户产生操作时,View 仅将事件传递给 ViewModel,由 ViewModel 全权处理业务逻辑与数据加工。二者最大的不同在于,MVVM 额外增加了数据绑定机制:View 在初始化阶段就会和专属的 ViewModel 完成绑定,此后只要 ViewModel 内部数据发生变化,View 便会自动同步展示最新内容。

相关推荐
总要学点什么9 分钟前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
简 洁 冬冬11 分钟前
泛型方法写法全面辨析:从「能编译」到「能跑」到「能用」
java·泛型
LGL6030A27 分钟前
Java学习历程31——初识Spring Boot
java·spring boot·学习
xiaoye-duck31 分钟前
《C++ 项目:手写大模型接入 SDK》会话模块整合:内存 SessionManager 与 DataManager 持久化联动
开发语言·数据库·c++·语言模型
Agent世界2 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo2 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
Funlang2 小时前
龙芯上的 Fun:从跑起来到机器码
开发语言·龙芯
总要学点什么2 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
某哈压力大2 小时前
SSH 突然 Connection reset?不是密钥坏了,是 OpenSSL 把 sshd 干趴了
前端·node.js·命令行
程序员大阳2 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构