前端---对MVC MVP MVVM的理解

就需要从前端这些年的从无到有、从有到优的变迁过程讲一下。

1. Web1.0时代

在web1.0时代并没有前端的概念,开发一个web应用多数采用ASP.NET/Java/PHP编写,项目通常用多个aspx/jsp/php文件构成,每个文件中同时包含了HTML、CSS、JavaScript、c#/Java/PHP代码,系统整体架构可能是这样子的:

在这里插入图片描述
我们可以看到服务端是比较重的,有一块既在客户端又在服务端,jsp是在我们server端生成的,然后他调用我们的service获取数据,然后在jsp页面进行封装,最后再把html前端的代码混成一个直接返回给前端。
所以我们可以看到这种架构的模式比较简单,而且很快捷。
但是缺点也很明显:jsp代码难以维护(前端代码和后端代码是混在一起的,如果业务逻辑复杂一些这个代码应该是非常庞大的)

2. MVC开发模式

为了让开发更加的快捷,代码更容易维护,前后的职责更清晰一些(不要把代码混在一起),就衍生出来了MVC开发模式和框架,前端展示以模型的形式出现。典型的框架就是Spring、Structs、Hibernate。整体框架如图所示:
在这里插入图片描述
他们的目标就是把我们的视图、数据和业务逻辑控制分层,这样代码也就分层了。
使用这种分层架构、职责清晰,代码容易维护。但是这里的MVC仅限于后端,前后端形成了一定的分离,前端只完成了后端开发中的view层。
那时候的前端程序员只是写一些前端页面和少量的js代码进行交互,但是仅限于静态页面,没有数据,然后再把这个页面交给后端程序员,后端再拿模版语法对他进行动态化的改造。

但是这种模式也存在着一些问题:

  1. 前端页面开发效率不高(主要把图变成静态页面然后交给后端)
  2. 前后端职责不清

3. Web 2.0

自从Gmail的出现,ajax技术风靡全球,有了ajax之后,前后端的职责就更加清晰了。因为前端可以通过ajax与后端进行数据交互,因此整体的架构图就变成了下幅图:
在这里插入图片描述
通过ajax与后台服务器进行数据交互,前端开发人员只需要开发页面这部分内容,数据可由后台进行提供。而且ajax可以使页面实现部分刷新,减少了服务端负载和流量消耗,用户体验更好。这时候才有了专职的前端工程师。同时前端的类库也慢慢的发展,最著名的就是jQuery了。
当然此架构也存在一些问题:缺乏可行的开发模式承载更复杂的业务需求,页面内容都糅杂在一起,一旦应用规模增大就难以维护。因为前端的MVC也随之而来。

4.前后端分离后的架构演变–MVC、MVP、MVVM

1. MVC

前端的MVC与后端的类似,具备着View、Controller和Model

Model:负责保存应用逻辑,与后端数据进行同步(专门用来封装和处理数据的)
Controller:负责业务逻辑,根据用户行为对Model数据进行修改(专门来处理请求的,1.接收参数 2.调用service层代码 3.控制页面跳转)
View:负责视图展示,将model中的数据可视化出来 好处:奇强调责任分离,方便维护代码

三者形成了一个模型:
在这里插入图片描述
这样的模型在理论上是可行的,但是在开发的过程中并不会这么操作。因为开发过程不灵活,例如:一个小小的事件操作都必须经过这么一个流程,那么开发就不在便捷了。

在实际场景中,我们往往会看到另外一种模式,如图:
在这里插入图片描述
这种模式在开发中更加的灵活,backbone.js框架就是这种模式。

但是这种灵活可能导致严重的问题:

  1. 数据流混乱(数据再发生变化时不知道是谁变的,在做维护的时候找问题就不好查)
    在这里插入图片描述
  2. View比较庞大,但是Controller比较单薄(一些简单的数据监听,然后直接调用Model层的更改逻辑,可有可无):由于很多的开发者都会在view中写一些逻辑代码,逐渐的就导致view中的内容越来越庞大,而controller变得越来越单薄。

既然有了缺陷就会有变革,前端的变化中似乎少了MVP的这种模式,是因为Angular早早地将MVVM框架模式带入了前端,MVP模式虽然在前端开发模式中不常见,但是在安卓等原生开发中,开发者还是会考虑它的。

2.MVP

MVP模式与MVC很接近,P指的是presenter,我们可以理解为一个中间人,他负责着View和Model之间的数据流动,防止二者之间的直接交流,我们可以看一下图示:
在这里插入图片描述
我们可以看到presenter负责和Model进行双向交互,还和View进行双向交互。这种交互方式相对于MVC来说少了一些灵活,View变成了被动视图,并且本身变得很小。虽然他分离了View和Model,但是应用逐渐变大之后导致presenter的体积变大,难以维护。如果想解决这个问题,我们可以从MVVM的思想中找到答案。

3.MVVM(Model-View-ViewModel)

ViewModel可以理解成是Presenter的进阶版

M(model):专门来准备数据的
V(View):展示页面
VM(ViewModel):视图和模型(视图和模型的转换):他是DOM监听器,监听着页面dom节点的变化,当页面DOM节点发生改变的时候,数据也会发生对应的改变

在这里插入图片描述
双向绑定机制:

  • ViewModel通过实现一套数据响应式机制自动响应Model中数据的变化(绑定数据:当model数据发生变化的时候,对应的界面也会发生改变)
  • 同时ViewModel会实现一套更新策略自动将数据变化转换成视图更新(DOM监听器,监听着页面dom节点的变化,当页面DOM节点发生改变的时候,数据也会发生对应的改变)
  • 实现数据绑定的方法有多种,常见的有观察者模式和发布-订阅模式。

通过事件监听响应View中用户交互修改Model数据
这样在ViewModel中就减少了大量的DOM操作代码
MVVM在保持View和Model松耦合的同时,还减少了维护他们关系的代码,使用户专注于业务逻辑,兼顾开发效率和可维护性。

5.总结

  • 这反映了前端领域的发展进程,这三者都是框架模式,它们设计的目标都是为了分层:解决Model和Viev的耦合问题
  • MVC模式出现较早主要应用在后端,如Spring MVC、ASP.NET MVC等,在前端领域的早期也有应用,如Backbone.js,它的优点是分层清晰,缺点是数据流混乱,灵活性带来的维护性问题。
  • MVP模式在是MVC的进化形式,Presenter作为中间层负责MV通信,解决了两者耦合问题,但P层过于臃肿会导致维护问题。
    -MVVM模式在前端领城有广泛应用,它不仅解决MV耦合问题,还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码,在提高开发效率、可谈性同时还保持了优越的性能表现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/874368.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安科瑞Acrelcloud-6000银行安全用电管理平台在湖南新盛业的应用

摘要 安科瑞Acrelcloud-6000安全用电管理平台是针对我国当前电气火灾事故频发而创新的一套电气火灾预警和预防管理系统,该系统是基于移动互联网、云计算技术、通过物联网传感终端(现场监控模块、传输模块),将供电侧、用电侧电气安…

jupyter出错ImportError: cannot import name ‘np_utils‘ from ‘keras.utils‘ ,怎么解决?

文章前言 此篇文章主要是记录一下我遇到的问题以及我是如何解决的,希望下次遇到类似问题可以很快解决。此外,也希望能帮助到大家。 遇到的问题 出错:ImportError: cannot import name np_utils from keras.utils ,如图&#xf…

Sky Takeaway

软件开发整体介绍 软件开发流程 角色分工 软件环境 苍穹外卖 项目介绍 定位:专门为餐饮企业定制的一款软件产品 技术选型 前端环境搭建 阅读readme文档 nginx.exe放入无中文目录运行并启动 后端环境搭建 项目结构 Nginx反向代理 优点 配置 Nginx反向代理 负…

Open CASCADE学习|通过指定点的曲线

在OpenCASCADE中,如果你想通过一系列指定的点来创建一条曲线,你可以使用Geom2dAPI_Interpolate类来实现二维曲线的插值,或者使用GeomAPI_Interpolate类来实现三维曲线的插值。这些类允许你定义一条B样条曲线,这条曲线将精确地通过…

【Sceneform-EQR】通过sceneform-eqr实现一个视频播放器(使用安卓MediaPlayer实现视频播放)

在前一篇文档中介绍了如何在AR\三维场景创建几种背景 【Sceneform-EQR】scenefrom-eqr中的几种背景实现(不仅用于AR、三维场景,在图片、视频播放器中也适用) 本文将侧重介绍如何使用安卓MediaPlayer实现视频播放。 ↓↓↓↓↓↓↓↓↓↓↓↓ 以下正文 ↓↓↓↓↓↓…

艺术体操与骑行的完美协奏:维乐Angel Rise+坐垫,激情与力量的展现!

在艺术体操的赛场上,每一次旋转、每一次跳跃,都凝聚着运动员的力量与技巧。这不仅是一场速度与激情的碰撞,更是一次力量与技巧的交融。正如在骑行的领域里,VELO Angel Rise坐垫以它独特的一体成型设计和技术,为骑行者们…

windows通过wsl2安装linux系统之Ubuntu,傻瓜式安装

期望通过每一次分享,让技术的门槛变低,落地更容易。 —— around 目录 1.基础环境和要求2.安装wsl23.安装linux系统4.迁移linux系统挂载5.配置linux账号密码6.配置ssh登录方式待续… 前言 为什么要在windows上安装linux,这个问题当你是研发…

rancher搭建k8s及jenkins自动化部署

1、准备环境 角色IP用途k8s-rancher-master192.168.3.63master节点k8s-rancher-node01192.168.3.64node节点k8s-rancher-node02192.168.3.66node节点k8s-rancher-server192.168.2.33rancher-server节点注: 服务器名需要配置不同,相同服务器名不能加入node节点 在所有节点进行…

1万3医学考研题库医学题库ACCESS\EXCEL数据库

今天这个题库按知识点分章节模块智能练习,覆盖书本上所有知识点以及考点,在真#题的解析里边也有详细的展示;另外,这份数据库与《4820道西#医综合真题西#医真#题ACCESS数据库》、《4170条中#医综合真#题中医真#题ACCESS\EXCEL数据库…

Android V 广播注册和配置注意事项问题

现象 在Android V平台上,应用注册非Protected广播时,如果没有加导出flag会抛出异常导致进程crash。 E/AndroidRuntime: FATAL EXCEPTION: main java.lang.SecurityException: com.demo.myapplication: One of RECEIVER_EXPORTED or RECEIVER_NOT_EXPORT…

如何用3个月零基础入门网络安全?_网络安全零基础怎么学习

前 言 写这篇教程的初衷是很多朋友都想了解如何入门/转行网络安全,实现自己的“黑客梦”。文章的宗旨是: 1.指出一些自学的误区 2.提供客观可行的学习表 3.推荐我认为适合小白学习的资源.大佬绕道哈! →点击获取网络安全资料攻略← 一、自学…

k8s的配置管理

一、配置管理分为两种: 1. 加密配置:用来保存密码和token密钥对以及其它敏感的k8s资源。 2.应用配置:我们需要定制化的给应用进行配置,我们需要把定制好的配置文件同步到pod当中的容器。 二、加密配置 1.secret三种类型&#xf…

YOLOv8改进 | 模块缝合 | C2f 融合RVB + EMA注意力机制【二次融合 + 结构图】

秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录 :《YOLOv8改进有效…

《垃圾回收的算法与实现》-算法-摘抄

本文是书籍《垃圾回收的算法与实现》的摘抄,不涉及算法源码及步骤讲解模块。 预备 对象由头(header)和域(field)构成。 头:对象中保存对象本身信息的部分,主要含有以下信息:对象的大小和种类。 域:对象使用者在对象…

图结构详解

概述 图是由有穷非空集合的顶点和顶点之间的边组成的集合,通常表示为 G(V,E)。G 表示一个图,V 是 图 G 顶点的集合,E 是图 G 边的集合。在图形结构中,数据之间具有任意联系,任意两个数据之间都可能相关,可…

彻底解决 node/npm, Electron下载失败相关问题, 从底层源码详解node electron 加速配置

最近玩了一下electron项目, 总是会遇到electron的下载失败问题, 于是看了一下node源码, 做一个记录. node/npm 加速配置 这个配置通过设置node配置里面的registry 这个配置项来完成加速. 配置方法 npm config set registry https://registry.npmmirror.com上面的命令就是将当…

打破界限,自闭症寄宿学校带给孩子的改变

在社会的广阔画卷中,有一群特别的孩子,他们以独特的视角感知世界,以非凡的方式表达情感,他们就是自闭症儿童。自闭症,这个听起来略带神秘色彩的词汇,实则承载着无数家庭的期盼与挑战。在这片充满爱的土地上…

C++设计模式——Iterator迭代器模式

一,迭代器模式的定义 迭代器模式是一种行为型设计模式,它使得遍历一个容器对象中的元素变得更加简单。 迭代器模式将遍历操作从容器对象(如集合、列表)中分离出来,它通过迭代器对象来遍历容器对象中的元素&#xff0…

RK3568平台开发系列讲解(PWM篇)使用 sysfs 接口操作 pwm

🚀返回专栏总目录 文章目录 一、查看 pwm 设备信息二、使用 sysfs 操作 PWM沉淀、分享、成长,让自己和他人都能有所收获!😄 PWM 子系统被划分为了三个层次, 分别为用户空间、 内核空间和硬件层, 内核空间包括 PWM 设备驱动层、 PWM 核心层和 PWM 适配器驱动层 一、查看…

JS面试真题 part3

JS面试真题 part3 11、bind、call、apply区别?如何实现一个bind12、JavaScript中执行上下文和执行栈是什么13、说说JavaScript中的事件模型14、解释下什么是事件代理?应用场景?15、说说你对闭包的理解?闭包使用场景 11、bind、cal…