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 便会自动同步展示最新内容。

相关推荐
avi91112 小时前
【AI教人】在Inspector显示所有Delegate-Odin Inspector之三
java·前端·算法·delegate·inspector·editor扩展·unity editor
fengci.2 小时前
BUUCTF(困难部分)
android·开发语言·前端·学习·php
Ward的AI产品实战2 小时前
开源 AI 网关 Magpie 调优终结篇:顺位排错、跨家族对抗审查与 5 大路由组重构(下篇)
前端·人工智能
Highcharts.js2 小时前
BI可视化图表“维护难”问题的解决方案
开发语言·前端·javascript·编辑器·ecmascript·bi·highcharts
青春不朽5122 小时前
Python 的 list append 为什么是均摊 O(1)?拆开过度分配那张表,看容量翻倍背后的暗账
java·python·list
广州华水科技2 小时前
单北斗GNSS在建筑形变监测中的应用与优势分析
前端
hunter_0763 小时前
Swift、Objective-C++ 与 Flutter 如何调用 C++:从混编接入到内存安全
前端
Java后端的Ai之路3 小时前
前端技术Vue-13-安装webpack与vuejs
前端·vue.js·webpack
倚窗听花_3 小时前
IIS部署前端Vue项目
前端·javascript·vue.js
yixun_gdas3 小时前
政企网站错敏巡查:错敏都藏在哪些位置?
开发语言·前端·javascript·内容运营