MVC、MVP和MVVM三种设计模式之间的区别是什么

embedded/2024/9/24 16:01:51/

区别:

  • mvc表示“模型-视图-控制器”,
  • mvp表示“模型-视图-演示者”,
  • mvvm表示“模型-视图-视图模型”;
    mvpmvvm都是由mvc衍生出的。mvc中,view会直接从model中读取数据;mvp中,view并不直接使用model

一、MVC模式优缺点

  • MVC是比较直观的架构模式,最初生根于服务器端的Web开发,后来渐渐能够胜任客户端Web开发,能够满足其复杂性和丰富性。
    在这里插入图片描述
  • MVC模式将应用程序划分为三个部分:

● Model: 模型(用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法)
● View: 视图(渲染页面)
● Controller: 控制器(M和V之间的连接器,用于控制应用程序的流程,及页面的业务逻辑)

  • MVC特点:

MVC模式的特点在于实现关注点分离,即应用程序中的数据模型与业务和展示逻辑解耦。在客户端web开发中,就是将模型(M-数据、操作数据)、视图(V-显示数据的HTML元素)之间实现代码分离,松散耦合,使之成为一个更容易开发、维护和测试的客户端应用程序。

用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View):
1、View 传送指令到 Controller ;
2、Controller 完成业务逻辑后,要求 Model 改变状态 ;
3、Model 将新的数据发送到 View,用户得到反馈。

  • React与传统MVC的关系
    轻量级的视图层库!A JavaScript library for building user interfaces

React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;React 构建页面 UI 的库。可以简单地理解为:React 将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。

  • React的特性
    声明式设计-React采用声明范式,可以轻松描述应用。

如果从后端拿回数据,按照react规则写好模板(不用自己判断、创建for循环、生成元素插入指定节点),react自己实现渲染,后端传来的数据改变react自己更新。

  • 高效-React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互。

  • 虚拟dom最大限度减少对dom的操作

  • 灵活-React可以与已知的库或框架很好地配合。

  • 可以与好看的ui框架,快速完成大型项目开发

  • JSX- JSX是 JavaScript语法的扩展。

  • JSX- JSX可以解析html、js、css

  • 组件-通过React构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

  • 组件复用,例如轮播

单向响应的数据流–React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。总结如下:
在这里插入图片描述

二、MVP模式优缺点

  • MVP是把MVC中的Controller换成了Presenter(呈现),目的就是为了完全切断View跟Model之间的联系,由Presenter充当桥梁,做到View-Model之间通信的完全隔离方向。

在这里插入图片描述

  • MVP特点:

● M、V、P之间双向通信。
● View 与 Model之间不通信,都通过 Presenter 传递。Presenter完全把Model和View进行了分离,主要的程序逻辑在Presenter里实现。
● View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
● Presenter与具体的View是没有直接关联的,而是通过定义好的接口进行交互,从而使得在变更View时候可以保持Presenter的不变,这样就可以重用。不仅如此,还可以编写测试用的View,模拟用户的各种操作,从而实现对Presenter的测试–从而不需要使用自动化的测试工具。

三、MVVM(Model-View-ViewModel)

  • MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。如果说MVP是对MVC的进一步改进,那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

在这里插入图片描述

  • vue官网上说的很清楚,是借鉴了mvvm,但是不是完全意义上的mvvm模式
    在这里插入图片描述
    具体到一个vue实例中的mvvm体现如下图
    在这里插入图片描述

总结:

  • 在MVC中,View会直接从Model中读取数据而不是通过 Controller;View和 Controller之间存在多对一关系。

  • 在MVP中,View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部;View和Presenter之间是一对一关系。

  • MVVM 模式基本上与 MVP 模式完全一致,唯一的区别是:MVVM采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。


http://www.ppmy.cn/embedded/116156.html

相关文章

渗透测试类 面试题

1、此时你负责等保测评几台服务器设备,没有相关权限,客户不愿意提供,你如何处理 答: 梳理相关服务器的测评流程,让客户按测评流程走一遍,你看着他们操作,或者录屏等方式,如果这种方…

调整奇数偶数顺序

题目: 输入一个整数数组,实现一个函数, 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分, 所有偶数位于数组的后半部分。 思路一: 可以重新开辟一个数组,然后将原有的数组遍历&#…

03-Docker下载加速

03-Docker下载加速 docker下载加速 方式1:使用 网易数帆、阿里云等容器镜像仓库进行下载。 网易数帆官网:https://sf.163.com/ 例如,下载网易数帆镜像中的mysql。(网易数帆的地址为 hub.c.163.com,网易数帆对dockerh…

卡牌抽卡机小程序:市场发展下的创新

今年以来,卡牌成为了行业中的黑马,在国内迅速流行,成为消费者的心头好。小小的卡牌创下了百亿的市场规模,发展前景巨大! 不过,随着卡牌市场的不断增长,市场发展也需要进行创新。线上抽卡机小程…

足球预测模型理论:足球数据分析——XGBoost算法实战

简介:本文将探讨如何使用XGBoost算法进行足球数据分析,特别是足球运动员身价估计。我们将通过实例和生动的语言,解释XGBoost算法的原理和实际应用,帮助读者理解复杂的技术概念,并提供可操作的建议和解决问题的方法。 足…

Docker Redis 7.2.3 部署

配置文件 # Redis 7.2.3 配置文件# 绑定IP地址,允许其他IP访问 # 默认情况下,Redis只绑定到127.0.0.1本地回环地址 # 如果需要让其他IP访问,注释掉或修改绑定的IP地址 # 例如,允许所有IP访问,可以注释掉bind行&#x…

鸿蒙OpenHarmony【轻量系统内核通信机制(互斥锁)】子系统开发

互斥锁 基本概念 互斥锁又称互斥型信号量,是一种特殊的二值性信号量,用于实现对共享资源的独占式处理。 任意时刻互斥锁的状态只有两种,开锁或闭锁。当任务持有互斥锁时,该互斥锁处于闭锁状态,这个任务获得该互斥锁…

Redis——笔记01

一、Redis简介 1.1 NoSQL NoSQL(Not Only SQL),意为“不仅仅是SQL”,是一项全新的数据库概念,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库再应付web2.0网站,特别是超大规模和高并…