MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）

2024-09-08 15:04
文章标签 model mvc controller view viewmodel mvvm

本文主要是介绍MVC（Model-View-Controller）和MVVM（Model-View-ViewModel），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、MVC

MVC（Model-View-Controller） 是一种常用的架构模式，用于分离应用程序的逻辑、数据和展示。它通过三个核心组件（模型、视图和控制器）将应用程序的业务逻辑与用户界面隔离，促进代码的可维护性、可扩展性和模块化。在 MVC 模式中，各组件可以与多种设计模式结合使用，以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用：

1. Model（模型）

模型代表应用程序的核心数据和业务逻辑。它负责处理数据的存储、操作、验证和规则。

  • 设计模式：
    • 领域模型（Domain Model）：模型中的业务逻辑可以使用领域模型设计模式进行封装，将业务逻辑与数据密切结合。例如，订单、用户、产品等实体类封装业务逻辑。
    • 观察者模式（Observer Pattern）：当模型数据发生变化时，它可以通知视图更新。模型作为“被观察者”，视图作为“观察者”。观察者模式适合在模型改变时自动更新视图。
    • 代理模式（Proxy Pattern）：模型中的数据可能通过代理模式进行远程调用或延迟加载，这样可以避免不必要的数据加载，增强性能。
    • 数据访问对象模式（DAO Pattern）：与数据库交互时，可以通过 DAO 模式封装数据访问逻辑，将数据持久化操作与业务逻辑分离。

2. View（视图）

视图负责显示模型的数据，并将数据呈现给用户。它只关注如何将数据呈现，不负责业务逻辑。

  • 设计模式：
    • 组合模式（Composite Pattern）：如果视图由多个子视图组合而成（如一个页面上有多个部件），组合模式可以将视图组合成一个树形结构，便于处理复杂的视图层次。
    • 装饰者模式（Decorator Pattern）：通过装饰者模式，可以动态地为视图添加功能或行为，而不改变视图本身的结构。例如，添加滚动条、边框等。
    • 观察者模式（Observer Pattern）：视图可以订阅模型的变化。当模型发生变化时，视图会自动更新。

3. Controller（控制器）

控制器负责响应用户输入并更新模型。它从视图接收用户的操作请求，并相应地更新模型或改变视图的状态。

  • 设计模式：
    • 命令模式（Command Pattern）：控制器可以通过命令模式封装用户的操作请求，将其转化为命令对象。这样可以灵活处理用户操作，支持操作的撤销、重做等功能。
    • 策略模式（Strategy Pattern）：控制器可以根据用户的输入或操作选择不同的处理策略。通过策略模式，控制器可以动态改变其行为，增强灵活性。
    • 前端控制器模式（Front Controller Pattern）：Web 应用中，通常会有一个中央的控制器来处理所有的请求（如 Spring MVC 中的 DispatcherServlet），再根据请求选择具体的处理逻辑。前端控制器模式集中管理所有请求的路由和处理逻辑。

MVC 与各设计模式的结合关系：

  • 观察者模式 在 MVC 中非常重要，特别是在模型与视图之间。模型数据变化时自动通知视图更新，解耦了视图和模型之间的直接依赖。
  • 命令模式 可以用于控制器，将用户的操作封装为命令对象，使得操作可以记录、撤销或重做。这样特别适合复杂的交互场景。
  • 策略模式 可以用在控制器中，根据不同的用户输入或操作选择不同的处理方法。比如在输入不同格式的数据时，选择不同的验证逻辑。
  • 装饰者模式 和 组合模式 可以用于视图层，尤其是在复杂的用户界面上，将界面元素进行组合、扩展和装饰，增强视图的灵活性。
  • 前端控制器模式 适用于大型 Web 应用中的请求处理，将所有的请求集中管理，并通过路由选择合适的控制器来处理请求。

总结

  • MVC 架构模式 本身就可以看作是一种宏观的设计模式，通过将模型、视图和控制器分离，解决了代码结构的分离与解耦问题。
  • 设计模式（如观察者、命令、策略、装饰者等）可以在 MVC 的具体实现中进一步增强组件的功能和灵活性。不同设计模式用于解决 MVC 各个组件之间的协作问题，以及增强代码的可扩展性和可维护性。

通过将 MVC 与各种设计模式结合，应用程序可以更加模块化、灵活，并且具备良好的扩展性。

2、MVVM

MVVM（Model-View-ViewModel） 是一种常用于构建用户界面（UI）应用程序的架构模式，它通过Model、View 和 ViewModel 三个部分来分离业务逻辑、用户界面和数据处理，从而实现更清晰的职责划分、提高可维护性以及简化开发过程，特别适合需要数据绑定的场景。

MVVM 各部分职责

  1. Model（模型）：

    • 负责应用程序的业务逻辑、数据访问和处理等。
    • 它独立于视图，处理应用程序的核心逻辑。
    • 例如数据库操作、API调用、数据验证等都属于Model的职责。

  2. View（视图）：

    • 用户界面部分，用于展示数据并接收用户的输入。
    • View层与用户直接交互，负责UI的布局、元素的绘制和用户操作的响应。
    • 例如：按钮、文本框、列表等UI元素。
    • View不直接与Model交互，它通过ViewModel来获取和更新数据。

  3. ViewModel（视图模型）：

    • 充当View和Model之间的桥梁，负责处理应用逻辑、状态管理、以及数据的双向绑定。
    • ViewModel可以从Model获取数据，处理业务逻辑，并将数据传递给View。
    • ViewModel通过观察机制通知View数据的变化，同时View也可以通过ViewModel改变Model的数据。

MVVM模式的工作流程

  • 双向绑定：MVVM最显著的特点是它支持View和ViewModel之间的双向数据绑定，这意味着当ViewModel中的数据发生变化时，View会自动更新，反之亦然。当用户在UI中做出修改时，这些更改会自动反映到ViewModel中。
  • 数据流：
    1. 用户在View中执行某个操作（如点击按钮）。
    2. View通知ViewModel，ViewModel会处理该操作并可能更新Model中的数据。
    3. 当Model的数据变化时，ViewModel会感知到并通知View更新显示。

MVVM的优势

  1. 分离关注点：通过引入ViewModel，将视图逻辑和业务逻辑分离，减少了代码耦合，提升了代码的可维护性和复用性。
  2. 双向数据绑定：ViewModel和View之间实现了双向绑定，当Model中的数据更新时，UI会自动更新，这减少了手动同步UI状态的工作量。
  3. 更容易测试：由于ViewModel不依赖UI框架，单元测试可以集中在ViewModel中的业务逻辑上，而不涉及视图的复杂性。
  4. 简化复杂UI的管理：对于需要频繁更新UI的应用，MVVM通过ViewModel管理状态，简化了UI更新逻辑。

MVVM的劣势

  1. 复杂度增加：对于简单的应用，MVVM可能显得过于复杂，ViewModel的引入增加了初期的开发成本。
  2. 性能问题：大量的双向数据绑定可能在某些场景下带来性能开销，特别是当数据量大或更新频繁时。
  3. 学习曲线：对于没有使用过MVVM的开发者，理解ViewModel和数据绑定机制可能需要一定的时间和经验。

MVVM的典型应用场景

  • 桌面应用程序：特别是WPF（Windows Presentation Foundation）和UWP（Universal Windows Platform）等框架广泛使用MVVM架构。
  • 移动应用程序：例如Android开发中的Jetpack架构组件鼓励使用MVVM。
  • 复杂的单页应用（SPA）：前端框架如Vue.js、Knockout.js等，也实现了类似于MVVM的双向数据绑定模式，适用于需要频繁动态更新的页面。

MVVM实现示例（Java Swing示例）

为了演示MVVM架构模式的工作原理，这里用Java的Swing GUI库创建一个简单的示例，展示如何通过MVVM模式实现一个简单的用户输入和展示。

1. Model：代表业务逻辑和数据
public class User {private String name;private int age;public User(String name, int age) {this.name = name;this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}
}
2. ViewModel：负责将Model与View绑定
import java.beans.PropertyChangeListener;
import java.beans.PropertyChangeSupport;public class UserViewModel {private User user;private PropertyChangeSupport support;public UserViewModel(User user) {this.user = user;this.support = new PropertyChangeSupport(this);}public String getUserName() {return user.getName();}public void setUserName(String name) {String oldName = user.getName();user.setName(name);support.firePropertyChange("userName", oldName, name);}public int getUserAge() {return user.getAge();}public void setUserAge(int age) {int oldAge = user.getAge();user.setAge(age);support.firePropertyChange("userAge", oldAge, age);}public void addPropertyChangeListener(PropertyChangeListener listener) {support.addPropertyChangeListener(listener);}public void removePropertyChangeListener(PropertyChangeListener listener) {support.removePropertyChangeListener(listener);}
}
3. View：负责显示用户界面
import javax.swing.*;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;public class UserView extends JFrame implements PropertyChangeListener {private JTextField nameField;private JTextField ageField;private JLabel nameLabel;private JLabel ageLabel;private UserViewModel viewModel;public UserView(UserViewModel viewModel) {this.viewModel = viewModel;this.viewModel.addPropertyChangeListener(this);setupUI();}private void setupUI() {nameField = new JTextField(15);ageField = new JTextField(15);nameLabel = new JLabel("Name: ");ageLabel = new JLabel("Age: ");JButton updateButton = new JButton("Update");// 更新按钮的行为，使用ViewModel来处理updateButton.addActionListener(e -> {viewModel.setUserName(nameField.getText());viewModel.setUserAge(Integer.parseInt(ageField.getText()));});// 布局设置setLayout(new BoxLayout(getContentPane(), BoxLayout.Y_AXIS));add(nameLabel);add(nameField);add(ageLabel);add(ageField);add(updateButton);setTitle("User Info");setSize(300, 200);setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}@Overridepublic void propertyChange(PropertyChangeEvent evt) {if ("userName".equals(evt.getPropertyName())) {nameField.setText((String) evt.getNewValue());} else if ("userAge".equals(evt.getPropertyName())) {ageField.setText(evt.getNewValue().toString());}}public static void main(String[] args) {User user = new User("John Doe", 30);UserViewModel viewModel = new UserViewModel(user);UserView view = new UserView(viewModel);view.setVisible(true);}
}

总结

  • 在这个例子中，Model层User负责保存用户的数据，ViewModel层UserViewModel负责处理与Model的数据交互，View层UserView负责展示用户界面并通过PropertyChangeListener绑定ViewModel的数据变化。
  • 通过MVVM架构，View与Model之间的依赖被削弱，ViewModel管理了数据绑定的逻辑，使代码更加模块化、易于维护。

3、对比

**MVVM（Model-View-ViewModel）和MVC（Model-View-Controller）**都是流行的架构模式，用于构建可维护的用户界面应用程序。两者有相似的目标，都是为了分离关注点，但在实现和使用上各有优缺点。

MVC与MVVM对比

1. MVC模式
  • Model：表示数据和业务逻辑。它独立于用户界面，并且不直接与View交互。
  • View：负责显示Model的数据。View从Controller获取指令，更新界面。
  • Controller：充当Model和View之间的中介，处理用户输入并根据需要更新Model或View。
MVC的优点
  • 清晰的职责分离：Model、View、Controller各自负责独立的部分，降低代码耦合度。
  • 简单直观：适用于中小型应用，结构简单，易于理解。
  • 灵活性：Controller可以根据不同的输入调整Model或View的行为，拥有较高的灵活性。
  • 历史悠久：MVC模式已经被广泛使用，很多开发框架支持这种模式，社区和资源丰富。
MVC的缺点
  • Controller复杂度：随着系统规模增大，Controller的职责会变得复杂，需要处理大量逻辑和不同组件之间的交互，容易出现“肥大控制器”问题。
  • 双向绑定缺乏：MVC模式中的View和Model之间缺乏内置的双向绑定机制，View的状态更新需要手动处理，增加了管理的复杂度。
  • 测试困难：View和Controller之间的强耦合可能导致在进行单元测试时，测试的范围过大，不利于细粒度的测试。
2. MVVM模式
  • Model：和MVC中的Model类似，负责业务逻辑和数据处理。
  • View：负责用户界面和用户交互。
  • ViewModel：负责管理Model和View之间的数据和操作逻辑。ViewModel处理UI逻辑，且与View双向绑定，直接与View进行数据通信。
MVVM的优点
  • 双向数据绑定：MVVM模式支持双向数据绑定，ViewModel中的数据发生变化时，View会自动更新，反之亦然，减少了手动更新UI的工作量。
  • 弱化Controller的职责：MVVM将控制逻辑放到ViewModel中，避免Controller过度复杂化，简化了业务逻辑的实现。
  • 更容易测试：由于ViewModel不依赖于UI框架，逻辑集中在ViewModel中，且没有直接操作View，单元测试更容易实现。
  • 可复用性和扩展性：ViewModel可以根据不同的需求和上下文场景进行复用和扩展，便于维护。
  • 解耦性强：View和Model之间通过ViewModel解耦，降低了依赖性，尤其在复杂UI下，灵活性更高。
MVVM的缺点
  • 复杂度更高：对于简单应用来说，MVVM可能显得过于复杂。引入ViewModel层会增加初期开发成本和学习曲线。
  • 性能问题：在大量双向数据绑定的场景下，频繁的UI更新和数据变化可能导致性能问题，尤其在数据绑定的实现较为繁重时。
  • 学习成本：如果开发者不熟悉MVVM，尤其是双向绑定的机制，可能需要较长时间来适应该模式的使用。

MVC 与 MVVM 的优缺点对比

比较项MVCMVVM
复杂性相对较低，适合简单或中等复杂应用更高复杂度，适合大型复杂应用
职责分离清晰，但Controller易变得复杂职责更清晰，View和Model完全解耦
数据绑定没有内置数据绑定内置双向数据绑定，UI更新自动化
代码复用性Controller中的逻辑难以复用ViewModel中的逻辑易于复用
测试友好性Controller和View耦合较多，测试困难ViewModel易于测试
学习曲线相对简单，易于上手学习曲线较陡，双向绑定需要理解
性能表现UI更新手动控制，性能稳定频繁数据绑定可能影响性能

适用场景

  1. MVC 适用场景：

    • 中小型应用：应用逻辑较为简单，界面与业务逻辑的交互不复杂。
    • 经典Web应用：很多传统的Web应用使用MVC架构，页面跳转和视图更新相对简单。

  2. MVVM 适用场景：

    • 大型复杂应用：如桌面应用或移动应用，特别是需要频繁更新UI且有复杂数据展示和交互的系统。
    • 双向绑定需求强的场景：如需要大量动态数据展示的应用，如仪表盘或数据监控系统。

总结

  • MVC：更适合中小型应用，易于理解和实现。但随着复杂度增加，Controller部分可能变得笨重，代码复用性和可维护性较差。
  • MVVM：通过双向数据绑定，使得UI和逻辑层解耦，适合复杂场景，尤其是大量用户交互的应用。虽然复杂度较高，但更适合大型系统。

这篇关于MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1148438。

相关文章

Spring MVC 图片上传

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-
阅读更多...
【iOS】MVC模式

【iOS】MVC模式

MVC模式 MVC模式MVC模式demo MVC模式 MVC模式全称为model(模型)view(视图)controller(控制器)，他分为三个不同的层分别负责不同的职责。 View：该层用于存放视图，该层中我们可以对页面及控件进行布局。Model：模型一般都拥有很好的可复用性，在该层中，我们可以统一管理一些数据。Controlller：该层充当一个CPU的功能，即该应用程序
阅读更多...
MFC中App,Doc,MainFrame,View各指针的互相获取

MFC中App,Doc,MainFrame,View各指针的互相获取

纸上得来终觉浅，为了熟悉获取方法，我建了个SDI。 首先说明这四个类的执行顺序是App->Doc->Main->View 另外添加CDialog类获得各个指针的方法。 多文档的获取有点小区别，有时间也总结一下。 //  App void CSDIApp::OnApp() {      //  App      //  Doc     CDocument *pD
阅读更多...
Caused by: android.view.WindowManager$BadTokenException: Unable to add window -- token android.os.B

Caused by: android.view.WindowManager$BadTokenException: Unable to add window -- token android.os.B

一个bug日志 FATAL EXCEPTION: main03-25 14:24:07.724: E/AndroidRuntime(4135): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.syyx.jingubang.ky/com.anguotech.android.activity.Init
阅读更多...
自定义view中常用到哪些方法作用分别是什么

自定义view中常用到哪些方法作用分别是什么

目录 构造函数onMeasure(int widthMeasureSpec, int heightMeasureSpec)onDraw(Canvas canvas)onLayout(boolean changed, int left, int top, int right, int bottom)onTouchEvent(MotionEvent event)onSizeChanged(int
阅读更多...
.Net Mvc-导出PDF-思路方案

.Net Mvc-导出PDF-思路方案

效果图： 导语：     在我们做项目的过程中，经常会遇到一些服务性的需求，感到特别困扰，明明实用的价值不高，但是还是得实现；     因此小客在这里整理一下自己导出PDF的一些思路，供大家参考。     网上有很多导出PDF运用到的插件，大家也可以看看其他插件的使用，学习学习； 提要：     这里我使用的是-iTextSharp，供大家参考参考，借鉴方案，完善思路，补充自己，一起学习
阅读更多...
.net MVC 导出Word--思路详解

.net MVC 导出Word--思路详解

序言：          一般在项目的开发过程中，总会接收到一个个需求，其中将数据转换成Work来下载，是一个很常见的需求；          那么，我们改如何处理这种需求，并输出实现呢？          在做的过程中，去思考 1、第一步：首先确认，Work的存在位置，并创建字符输出路：             //在的项目中创建一个存储work的文件夹             string
阅读更多...
SSM Spring MVC集成mybatis

SSM Spring MVC集成mybatis

一、练习目标 1、需求 完成部门基本的 CRUD 和分页查询，完成员工基本的 CRUD、分页查询和过滤查询（根据姓名和邮箱模糊查询，根据部门查询）。 2、技术架构 使用 Spring MVC + Spring + MyBatis，数据库选用 MySQL，视图选用 JSP。 3、SSM 集成作用及本质 作用：在框架上基础上开发，发挥各个框架在各层的好处，提高开发效率。 本质： Sp
阅读更多...
Spring MVC 执行流程详解

Spring MVC 执行流程详解

Spring MVC 是一个典型的基于 MVC 设计模式的框架，它用于开发 Java Web 应用程序。在 Spring MVC 中，每个请求都要经历一系列的步骤，从客户端请求到服务器返回响应。下面的执行流程图很好地描述了 Spring MVC 的执行流程，从请求发起到最后返回数据。接下来，我将全面、深入地讲解 Spring MVC 的执行流程。 Spring MVC 执行流程图： +----
阅读更多...
spring MVC访问静态文件,如jpg,js,css

spring MVC访问静态文件,如jpg,js,css

如何你的DispatcherServlet拦截 *.do这样的URL，就不存在访问不到静态资源的问题。如果你的DispatcherServlet拦截“/”，拦截了所有的请求，同时对*.js,*.jpg的访问也就被拦截了。   目的：可以正常访问静态文件，不要找不到静态文件报404。   方案一：激活Tomcat的defaultServlet来处理静态文件 Xml代码 <se
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2