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

2024-09-07 10:04
文章标签 理解 前端 mvc frontend mvp mvvm

本文主要是介绍前端---对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操作代码,在提高开发效率、可谈性同时还保持了优越的性能表现。

这篇关于前端---对MVC MVP MVVM的理解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1144755

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图

基于@RequestParam注解之Spring MVC参数绑定的利器

《基于@RequestParam注解之SpringMVC参数绑定的利器》:本文主要介绍基于@RequestParam注解之SpringMVC参数绑定的利器,具有很好的参考价值,希望对大家有所帮助... 目录@RequestParam注解:Spring MVC参数绑定的利器什么是@RequestParam?@

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分