前端三大MV*模式:MVC、mvvm、mvp模式介绍

  1. MVC(同步通信为主):Model、View、Controller

  2. MVP(异步通信为主):Model、View、Presenter

  3. MVVM(异步通信为主):Model、View、ViewModel

mvc模式介绍

MVC(Model–View–Controller)模式是软件工程中的一种软件架构模式,它把软件系统分为三个基本部分:模型(Model)视图(View)控制器(Controller)

  • Model(模型)表示应用程序核心(如数据库)。

  • View(视图)显示效果(HTML页面)。

  • Controller(控制器)处理输入(业务逻辑)。

(1)视图(View):负责界面的显示,以及与用户的交互功能,例如表单、网页等。

(2)控制器(Controller):可以理解为一个分发器,用来决定对于视图发来的请求,需要用哪一个模型来处理,以及处理完后需要跳回到哪一个视图。即用来连接视图和模型。

实际开发中,通常用控制器对客户端的请求数据进行封装(如将form表单发来的若干个表单字段值,封装到一个实体对象中),然后调用某一个模型来处理此请求,最后再转发请求(或重定向)到视图(或另一个控制器)。

(3)模型(Model):模型持有所有的数据、状态和程序逻辑。模型接受视图数据的请求,并返回最终的处理结果。

MVC模式的流程:浏览器通过视图向控制器发出请求,控制器接收到请求之后通过选择模型进行处理,处理完请求以后再转发到视图,进行视图界面的渲染并做出最终响应

在MVC模式中,视图View可以用JSP/HTML/CSS实现,模型Model可以用JavaBean实现,而控制器Control就可以用Servlet来实现。

MVC模式的优点

 低耦合、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理

MVC模式的缺点

没有明确的定义、不适合小、中型应用程序、增加系统结构和实现的复杂性、视图对模型数据的低效率访问

MVVM模式的组成部分

  • 模型

  • 模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。

  • 视图

  • 就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。

  • 视图模型

  • 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器之间进行通信。

  • 绑定器

  • 声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素。 [1]

MVVM优点

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点

1. 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

mvp模式介绍

MVP(Model-View-Presenter)

MVP定义了Presenter和View之间的接口,用户对View的操作都转移到了Presenter。比如这里可以让View暴露setter接口以便Presenter调用,待Presenter通知Model更新后,Presenter调用View提供的接口更新视图。

优点

1、模型与视图完全分离,我们可以修改视图而不影响模型

2、可以更高效地使用模型,因为所有的交互都发生在一个地方——Presenter内部

3、我们可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化总是比模型的变化频繁。

4、如果我们把逻辑放在Presenter中,那么我们就可以脱离用户接口来测试这些逻辑(单元测试)

缺点

由于对视图的渲染放在了Presenter中,所以视图和Presenter的交互会过于频繁。还有一点需要明白,如果Presenter过多地渲染了视图,往往会使得它与特定的视图的联系过于紧密。一旦视图需要变更,那么Presenter也需要变更了。比如说,原本用来呈现Html的Presenter现在也需要用于呈现pdf了,那么视图很有可能也需要变更。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Small Data Transmission (二)具体过程

这篇是SDT相关的具体过程,包括RRC层初始化SDT 的条件,MAC 层初始化SDT过程的判断,CG-SDT的具体过程,TA Validation for CG-SDT, CG-SDT TA 验证的路径损耗参考推导,SDT Uplink Time Alignment,RRC inactive中的CG based PUSCH传输和RA based PUSCH传输,依次看下。 初始…

Java Swing管理系统万能模板 课程设计素材

JavaSwing管理系统万能模板 视频教程: 【课程设计】2小时学会JavaSwing课程设计-万能模板-图书管理系统-[你的课程我设计] 万能模板是用Java Swing开发的,包含管理系统常用的多角色登录、数据查询、添加、修改、删除。常用的管理系统都可以使用万能模板…

【23真题】快跑,考太偏了这所211!

今天分享的是23年湖南师范997的信号与系统试题及解析。 小马哥Tips: 本套试卷难度分析:22年湖南师范997考研真题,我也发布过,若有需要,戳这里自取!本套试题难度中等,题量适中,但是…

Airtest进阶使用篇!提高脚本稳定性 + 批量运行脚本!

一、背景 今天彭于晏为大家分享Airtest进阶使用篇,主要包含两块的内容: 提高脚本稳定性批量运行脚本生成测试报告 二、提高脚本稳定性 1、添加全局配置: #全局设置 ST.FIND_TIMEOUT10 #设置隐式等待时长,默认识别图片时间是30秒,可改为…

外包干了5个月,技术退步明显.......

先说一下自己的情况,大专生,18年通过校招进入武汉某软件公司,干了接近4年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

Vue.js 组件生命周期

Vue.js 组件生命周期 生命周期函数(钩子)就是给我们提供了一些特定的时刻,让我们可以在这个周期段内加入自己的代码,做一些需要的事情; 生命周期钩子中的this指向是VM 或 组件实例对象 在JS 中,函数的执行上下文&#…

HarmonyOS入门开发(三) 持久化存储Preferences

接入鸿蒙几天以来,发现各种和Android不一样的地方,今天来看一下Preferences存储 在Android中比如有ShardPreferences、Mmkv这些持久化存储方式,开发起来很方便,读取速度也很快,在鸿蒙里面也提供了对应的持久化存储方案…

系统设计面试指南之分布式任务调度

1 简介 任务是需要资源(CPU 时间、内存、存储、网络带宽等)在指定时间内完成的一段计算工作。 通过智能地将资源分配给任务以满足任务级和系统级目标的系统称为任务调度程序。 任务调度程序: 及时决定和分配资源给任务的过程称为任务调度。 当我们在 Facebook 发…

拓数派荣获上海市“智慧工匠”工业软件创新案例奖

近日,由上海市经济和信息化委员会指导、上海市城市数字化转型应用促进中心主办、上海中创产业创新研究院承办的“工业软件赋能新型工业化”主题沙龙暨2023“智慧工匠”工业软件创新案例竞赛颁奖典礼在上海圆满落幕。拓数派凭借上汽集团工业数据管理服务平台案例成功…

建设中国版MBA在线教育网站,群硕为Quantic敲开中国大门

2024考研即将拉开序幕,一个令人胆寒的问题出现在问答社区热榜—— 从现实来看,学历贬值已经成为一种全球现象。在卷学历的也不仅是大学生,还有很多职场人士,渴望通过获得MBA学位成为精英人才、商业领袖。 Quantic是交互式MBA线上…

【追求卓越10】算法--跳表

引导 在上一节中,我们学习到二分查找,惊叹于它超高的效率(时间复杂度为O(logn))。但是二分查找有一个局限性就是依赖于数组,这就导致它应用并不广泛。 那么适用链表是否可以做到呢?答案是可以的。只不过要复…

VUE2+THREE.JS项目搭建

THREE项目搭建 简介学习文档推荐搭建1.下载three.js2.新建3DWorkShop.vue文件3.创建utils/three/tool.js4.创建components/three/draw.vue[重点]4.1 引入文件4.2 初始化场景4.3 初始化渲染器4.4 初始化光源4.5 初始化相机(人眼模式)4.6 初始化控制器4.7 初始化动画4.8 添加全局…