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

简介: MVC、MVP与MVVM模式是什么?

- MVC模式

MVC是应用最广泛的软件架构之一,一般MVC分为:Model( 模型 )、Controller( 控制器 )、View( 视图 )。

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

MVC.png
1、View 传送指令到 Controller

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

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

- MVP模式

MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
MVP.png
1、各部分之间的通信,都是双向的。

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

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

- MVVM模式

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel。

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

MVVM1.png
MVVM2.png

- 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数据绑定的做法有哪些?

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事件( {
   
   mathJaxContainer[0]}interval )5、执行 {
   
   mathJaxContainer[1]}apply()

3、数据劫持:

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

通过Object.defineProperty()来劫持各个属性的setter,getter,

在数据变动时发布消息给订阅者,触发相应的监听回调。
相关文章
|
2月前
|
前端开发
MVVM是什么?和MVC有何区别呢?
【10月更文挑战第11天】MVVM 和 MVC 都是为了更好地组织和管理软件架构,提高开发效率和代码质量。理解它们的特点和区别,有助于我们在实际开发中做出更合适的选择,并构建出更加优秀的应用程序。
|
2月前
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
3月前
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
59 2
|
2月前
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
98 0
|
3月前
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
4月前
|
负载均衡 前端开发 API
我希望在系统设计面试之前知道的 12 种微服务模式
我希望在系统设计面试之前知道的 12 种微服务模式
|
4月前
|
监控 Linux 数据安全/隐私保护
Linux大神养成记:掌握这些逆天命令与快捷方式,面试秒变MVP,让你的技术实力燃爆全场!
【8月更文挑战第5天】Linux作为开源领域的核心,熟悉其基本命令对系统管理员和技术人员至关重要。本文精选了面试中常考的Linux命令,覆盖文件管理、文本处理、进程监控及权限调整等关键领域,并介绍了提高效率的快捷方式。通过掌握如`ls -l`、`grep "error"`、`top`、`chmod 755`等实用命令,以及Tab自动补全、历史命令浏览等功能,不仅能显著提升日常工作效能,还能在求职面试时展现出扎实的技术功底。
67 4
|
3月前
|
设计模式 前端开发 PHP
PHP中实现简易的MVC模式
【8月更文挑战第31天】 本文将引导你了解如何在PHP中应用MVC(Model-View-Controller)架构模式,通过一个简单的例子展示其实现过程。我们将从基础的概念出发,逐步深入到代码实践,最终让你能够自己动手构建一个简易的MVC框架。文章不仅提供理论知识,还包含具体的代码示例,帮助你更好地理解并运用MVC模式。
|
6月前
|
前端开发 Dubbo Java
spring面试题_spring mvc面试题_springboot面试题库
spring面试题_spring mvc面试题_springboot面试题库
|
5月前
|
设计模式 安全 NoSQL
Java面试题:设计一个线程安全的单例模式,并解释其内存占用和垃圾回收机制;使用生产者消费者模式实现一个并发安全的队列;设计一个支持高并发的分布式锁
Java面试题:设计一个线程安全的单例模式,并解释其内存占用和垃圾回收机制;使用生产者消费者模式实现一个并发安全的队列;设计一个支持高并发的分布式锁
72 0