当前位置: 首页 > news >正文

MVC、MVP、MVVM三种模式的介绍及区别

MVC、MVP 和 MVVM 是三种常见的 软件架构设计模式

MVC

M : Model,负责存储页面的业务数据,以及对相应数据的操作。
V : View,负责页面的显示逻辑。
C : Controller, 是 View 层和 Model 层的纽带,负责用户与应用的响应操作。

在mvc模式中,通过分离 Model、View 和 Controller 的方式来组织代码结构。当用户与页面产生交互的时候,Controller 层的事件触发器就开始工作了,通过调用 Model 层,来完成对 Model 的修改,然后 Model 层再去通知 View 层更新。

在这里插入图片描述

MVP

M : Model,负责存储页面的业务数据,以及对相应数据的操作。
V : View,负责页面的显示以及与用户交互。
P : Presenter, 负责完成View于Model间的交互。

MVP 的模式通过使用 Presenter 实现了对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口,因此它没有办法控制 View 层的更新,而在MVP 模式中,View 层的接口暴露给了 Presenter 因此可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起,以此来实现 View 和 Model 的同步更新。

在 View 层通过 presenter 对象来调用 Model 层中数据请求的接口,而 Model 层中数据请求的结果会通过 presenter 中定义的接口回调给 presenter ,然后 presenter 在通知给 View 层。

在这里插入图片描述

MVVM

M : Model,负责存储页面的业务数据和业务逻辑。
V : View,负责页面的显示。
VM : ViewModel,负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作。

Model 层和 View 层并无直接关联,而是通过 ViewModel 来进行联系的,MVVM通过实现双向数据绑定来实现 Model 层和 View 层的同步更新。

双向数据绑定的实现:ViewModel 层通过 数据绑定 来将 Model 转化成 View ,通过 DOM 事件监听 来将 View 转化成 Model ,这样就实现了双向数据绑定的效果。

在这里插入图片描述

区别

MVC 与 MVP 的区别:
上面在介绍MVP模式的时候也讲到了二者之间的区别,MVC 模式下 Controller 只能获取 Model 的接口,所以它没有办法控制 View 层的更新,是通过 Model 来控制 View 层的更新的。而 MVP 模式下,View 层向 Presenter 层暴露了接口,所以 Presenter 层可以直接操作 View 层,实现了对 Model 层和 View 层的解耦。

MVP 与 MVVM 的区别:
通过上面的模型图来看,MVP 和 MVVM 模式似乎是相同的,其实不然。它们是相似的,唯一区别在于 MVVM 模式采用了双向数据绑定。开发者只需要更改 View 层或者 Model 层中的数据值,不需要进行同步 Model 层和 View 层的操作,因为数据的同步会由 ViewModel 层自动完成。而 MVP 模式中,开发者需要进行处理接收事件和 View 更新的工作。

相关文章:

  • 注意力机制综述学习记录
  • 数据结构c语言版第二版(严蔚敏)第三章笔记
  • 羊了个羊,但是Python简(li)单(pu)版
  • 【软件测试】测试用例的设计方法
  • 二叉树的遍历问题
  • FPGA/HDL 人员开发利器-TerosHDL(开源 IDE)
  • 《谁动了我的奶酪》阅读笔记
  • 2023秋招--腾讯天美--游戏客户端--一面面经
  • 跨模态学习能力再升级,EasyNLP电商文图检索效果刷新SOTA
  • JavaScript 中什么时候使用 Map 更合适(二)
  • 【统计学习|书籍阅读】第五章 决策树 p55-p75
  • 【GlobalMapper精品教程】009:DSM过滤植被和房屋并生成等高线案例教程
  • web前端期末大作业:我的家乡广东(html+css布局)div制作
  • 【C进阶】——内存操作函数memcpy、memmove、memcmp、memset详解及其模拟实现
  • 【DNS服务器的配置】实操
  • .pyc 想到的一些问题
  • 0基础学习移动端适配
  • Angular Elements 及其运作原理
  • JAVA 学习IO流
  • js如何打印object对象
  • k个最大的数及变种小结
  • Linux快速复制或删除大量小文件
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • Promise面试题2实现异步串行执行
  • Python3爬取英雄联盟英雄皮肤大图
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 开源SQL-on-Hadoop系统一览
  • 排序(1):冒泡排序
  • 系统认识JavaScript正则表达式
  • 学习JavaScript数据结构与算法 — 树
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • zabbix3.2监控linux磁盘IO
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • 昨天1024程序员节,我故意写了个死循环~
  • ​第20课 在Android Native开发中加入新的C++类
  • #laravel 通过手动安装依赖PHPExcel#
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (6)添加vue-cookie
  • (ZT)一个美国文科博士的YardLife
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (论文阅读11/100)Fast R-CNN
  • (十) 初识 Docker file
  • (四)linux文件内容查看
  • (五)关系数据库标准语言SQL
  • (一)u-boot-nand.bin的下载
  • (一)VirtualBox安装增强功能
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • (转) RFS+AutoItLibrary测试web对话框
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .net core webapi 大文件上传到wwwroot文件夹