【面试题】MVC、MVP与MVVM模式是什么?

  •  MVC模式

MVC是应用最广泛的软件架构之一,一般MVC分为:

Model( 模型 )Controller( 控制器 )View( 视图 )

这主要是基于分层的目的,让彼此的职责分开。View 一般通过 Controller 来和 Model 进行联系。ControllerModelView 的协调者,ViewModel不直接联系。基本联系都是单向的。

1、View 传送指令到 Controller

2、Controller 完成业务逻辑后,要求 Model 改变状态

3、Model 将新的数据发送到 View,用户得到反馈  

  • MVP模式

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。

1、各部分之间的通信,都是双向的。

2、View 与 Model 不发生联系,都通过 Presenter 传递。

3、View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

  • MVVM模式

MVVM 是把 MVCControllerMVPPresenter 改成了 ViewModel

View 的变化会自动更新到 ViewModelViewModel 的变化也会自动同步到 View上显示。这种自动同步是因为 ViewModel 中的属性实现了 Observer,当属性变更时都能触发对应的操作。

 

  • MVVM模式的优点  

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

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

3、独立开发开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

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

  • MVVM 和 MVC 的区别

  • mvc 中 Controller演变成 mvvm 中的 viewModel。

  • mvvm 通过数据来显示视图层而不是节点操作。

  • mvvm主要解决了: mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

常见的实现MVVM数据绑定的做法有哪些?

实现数据绑定的做法有大致如下几种:

发布者-订阅者模式(backbone.js) 脏值检查(angular.js) 数据劫持(vue.js)

1、发布者-订阅者模式:


一般通过sub, pub的方式实现数据和视图的绑定监听, 更新数据方式通常做法是 vm.set('property', value)

这种方式现在毕竟太low了,我们更希望通过 vm.property = value这种方式更新数据,同时自动更新视图,于是有了下面两种方式。


2、脏值检查:


angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,

最简单的方式就是通过 setInterval() 定时轮询检测数据变动,

angular只有在指定的事件触发时进入脏值检测,大致如下:

1、DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
​
2、XHR响应事件 ( $http )
​
3、浏览器Location变更事件 ( $location )
​
4、Timer事件( $timeout , $interval )
​
5、执行 $digest() 或 $apply()

3、数据劫持:


vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,

通过Object.defineProperty()来劫持各个属性的settergetter

在数据变动时发布消息给订阅者,触发相应的监听回调。

 

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

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

相关文章

单片机电子元器件-数码管

数码管分类 共阳 把所有数码管的阳极接到一起形成公共阳极COM 数码管 共阳极COM 接到 5V 电源 共阴 把所有数码管的阴极接到一起形成公共阴极COM 数码管 共阴极COM 接到 地 GND 上 八段 数码管 和 七段数码管, 多了一个 小数点 DP 数码管显示原理 一个数码管如…

线性代数的学习和整理13: 定义域,值域,到达域 和单射,满射,双射,反函数,逆矩阵

目录 1 函数与 向量/矩阵 2 初等数学的函数 2.1 函数 2.2 函数的定义:定义域 →映射→ 值域 3 高等数学里的函数:定义域和陪域/到达域(非值域)的映射关系 3.1 函数 3.2 单射,满射,双射等都是针对…

Kubernetes入门 十、HPA 自动扩/缩容

目录 概述安装metrics-server使用HPA 概述 我们已经可以通过手动执行 kubectl scale 命令实现Pod的扩缩容,但是这显然不符合 Kubernetes 的定位目标–自动化和智能化。Kubernetes 期望可以通过监测Pod的使用情况,实现 Pod 数量的自动调整,于…

0基础学习VR全景平台篇 第92篇:智慧景区-智慧景区常见问题

Q:怎么编辑景区里面各个景点的介绍和推荐该景点A:在下方素材栏中该景点(素材)的右上角选择【编辑场景】里面就可以在场景介绍中编辑该场景的介绍并且在该选项中可以将此场景设置为推荐景点。 Q:景区项目可不可以离线浏…

【VMware】CentOS 设置静态IP(Windows 宿主机)

文章目录 1. 更改网络适配器设置2. 配置虚拟网络编辑器3. 修改 CentOS 网络配置文件4. ping 测试结果 宿主机:Win11 22H2 虚拟机:CentOS-Stream-9-20230612.0 (Minimal) 1. 更改网络适配器设置 Win R:control 打开控制面板 依次点击&#x…

0829【综述】面向时空数据的区块链研究综述

摘要:时空数据包括时间和空间2个维度,常被应用于物流、供应链等领域。传统的集中式存储方式虽然具有一定的便捷性,但不能充分满足时空数据存储及查询等要求,而区块链技术采用去中心化的分布式存储机制,并通过共识协议来保证数据的安全性。研究现有区块链1.0、2.0和以Block-DAG为…

Mysql高阶语句 (一)

一、常用查询 (增、删、改、查) 对 MySQL 数据库的查询,除了基本的查询外,有时候需要对查询的结果集进行处理。 例如只取 10 条数据、对查询结果进行排序或分组等等 1、按关键字排序 PS:类比于windows 任务管理器 使用 SELECT 语句…

debug调试时,通过[[FunctionLocation]]找到函数在源代码中的位置

[[FunctionLocation]] 是 JavaScript 引擎内部的一个属性,用于记录函数在代码中的位置。它不是 JavaScript 语法的一部分,而是在调试和开发过程中用于追踪函数定义位置的一个辅助属性。 当我们在浏览器的开发者工具或其他调试工具中查看函数的属性时&am…

docker部署前端项目保姆级教程

本地启动docker(有不会启动的吗?下载docker(小海豚)双击起来就行) 准备阿里云账号(免费) 没有就去注册一个,记住密码后面要用到 官网地址:阿里云登录 - 欢迎登录阿里云…

各个微服务模块之间互相依赖调用的问题

首先是模块之间不能够循环引用,否则会报循环依赖引入的错误。 没有了模块之间的相互依赖,在项目中这两个模块是相互调用的,分别各自定义相应的Feign接口,如下: 最开始写的运行报错的代码如下: FeignCli…

Axure RP

Axure RP 简介下载安装汉化注册 简介 Axure RP(Rapid Prototyping)是一款交互式原型设计工具,用于创建高保真的交互式界面原型和线框图。它主要用于用户体验(UX)和用户界面(UI)设计&#xff0c…

PyCharm软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 PyCharm是一种集成开发环境(IDE),专门为Python开发者设计。它是由捷克软件公司JetBrains开发的,为Python开发人员提供了高效、易用和功能丰富的工具集。 以下是PyCharm软件的主要…

机器学习——手写数字识别

0、:前言 这篇文章能够帮助你从数据到模型的整个过程实现不过至于安装第三方库等基础问题,本文不涉及,因为确实不难,搜一搜一大把本此实验运行环境为jupyter,当然通过pycharm也是可行的 1、数据: 手写数字…

【网络设备】交换机的概念、工作原理、功能以及以太网帧格式

个人主页:insist--个人主页​​​​​​ 本文专栏:网络基础——带你走进网络世界 本专栏会持续更新网络基础知识,希望大家多多支持,让我们一起探索这个神奇而广阔的网络世界。 目录 一、认识交换机 二、交换机的主要功能 1、数…

非计算机科班如何丝滑转码?(本人就是有点不丝滑)

我觉得无非三个办法可以选择(当然可能有其他方法) 自学 报班 有师傅带 但是在学习之前,你一定要明确你学习编程的目的是什么! 游戏开发?后台研发?爬虫工程师?前端程序员?数据分析师? 或者 仅仅是想做一…

【ES6】Proxy的高级用法,实现一个生成各种 DOM 节点的通用函数dom

下面的例子则是利用get拦截&#xff0c;实现一个生成各种 DOM 节点的通用函数dom。 <body> </body><script>const dom new Proxy({}, {get(target, property) {return function(attrs {}, ...children) {const el document.createElement(property);for …

ElasticSearch(一)数据类型

ElasticSearch&#xff08;一&#xff09;数据类型 1.简述 Es数据类型分为基础数据类型和复杂类型数据&#xff0c;掌握ES数据类型才能进一步使用ES检索数据内容。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

CSS中的margin与padding

目录 一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前&#xff0c;先看一张图&#xff0c;便于理解 一、margin 1.概念及作用 CSS margin 属性用于在任何定义的边框之外&#xff0c;…

网深科技与中科方德完成兼容性认证

网深科技的产品NetInside可观测性分析平台与国产中科方德主流操作系统完成兼容性适配&#xff0c;系统名称&#xff1a;方德高可信服务器操作系统V4.0&#xff0c;系统运行稳定&#xff0c;性能卓越&#xff0c;完美兼容&#xff0c;能够为广大用户提供灵活、专业、直观可视性&…

docker 安装 Nginx

1、下载 docker pull nginx:latest 2、本地创建管理目录 mkdir -p /var/docker/nginx/conf mkdir -p /var/docker/nginx/log mkdir -p /var/docker/nginx/html 3、将容器中的相应文件复制到管理目录中 /usr/docker/nginx docker run --name nginx -p 80:80 -d nginxdocke…