MVC、MVP、MVVM三种模式的介绍及区别(代码例子说明)

news2024/10/6 14:38:40

目录

一、MVC(Model-View-Controller)

二、MVP(Model-View-Presenter)

三、MVVM(Model-View-ViewModel)

四、几种架构模式的比较

五、例子演示


前言

       ”软件系统的架构将系统描述为计算机组件及组件之间的交互“。架构 = 组件 + 交互。

       MVC(Model-View-Controller)、MVP(Model-View-Presenter)和MVVM(Model-View-ViewModel)是常见的软件架构模式,用于将应用程序的逻辑分离成不同的组件。它们都有各自的特点和适用场景。

一、MVCModel-View-Controller)

        MVCModel-View-Controller) 是一种软件架构模式,用于将应用程序的逻辑分离成三个不同的组件:模型(Model)、视图(View)和控制器(Controller)。每个组件都有自己的职责和功能,相互之间通过定义好的接口进行通信。

1、MVC的组件说明

(1)Model(模型):负责数据的处理和业务逻辑。

(2)View(视图):负责展示数据给用户,并处理用户的输入。

(3)Controller(控制器):负责协调模型和视图之间的交互,处理用户的输入并更新模型和视图。

MVC模式的核心思想是将应用程序分为三个独立的部分,使得每个部分可以独立开发、测试和维护。

这3种组件通过交互来协作:View创建Controller后, Controller根据用户交互调用Model的相应服务,而Model会将自身的改变通知View,View则会读取Model的信息以更新自身。

2、优缺点

  • 优点:
    • 分离关注点:模型和视图的分离,提高了代码的可维护性和可测试性。
    • 控制器作为中介,实现了模型和视图之间的解耦。
    • 可以支持多个视图对应一个模型的情况。
  • 缺点:
    • 视图和控制器之间的交互复杂,增加了开发的复杂度。
    • 控制器可能会变得臃肿,难以管理。

二、MVP(Model-View-Presenter)

1、MVP组件说明

(1)Model(模型):负责数据的处理和业务逻辑。

(2)View(视图):负责展示数据给用户,并处理用户的输入。

(3)Presenter(Presenter):负责协调模型和视图之间的交互,处理用户的输入并更新模型和视图。

MVP模式将视图和模型解耦,通过Presenter作为中介来协调它们之间的交互。视图通过接口与Presenter进行交互,Presenter将视图的事件传递给模型进行处理,并将处理结果返回给视图进行展示。

2、优缺点

  • 优点:
    • 视图和模型的解耦,方便进行单元测试。
    • Presenter作为中介,将视图和模型之间的交互逻辑集中处理。
    • 可以支持多个视图对应一个Presenter的情况。
  • 缺点:
    • Presenter可能会变得臃肿,难以管理。
    • 视图和Presenter之间的交互仍然较为复杂。

三、MVVM(Model-View-ViewModel)

1、MVVM组件说明

(1)Model(模型):负责数据的处理和业务逻辑。

(2)View(视图):负责展示数据给用户,并处理用户的输入。

(3)ViewModel(视图模型):负责将模型中的数据转换为视图可以直接使用的形式,并监听视图的变化来更新模型的数据。

MVVM模式通过数据绑定机制将ViewModel中的数据直接绑定到视图上,实现了视图和数据的自动同步。

2、优缺点

  • 优点:
    • 视图和模型的解耦,方便进行单元测试。
    • 数据绑定机制简化了视图和模型之间的交互逻辑。
    • ViewModel可以通过命令模式实现对用户输入的响应。
  • 缺点:
    • 数据绑定可能导致性能问题,需要谨慎使用。
    • 对于复杂的交互逻辑,可能需要编写额外的代码来处理。

四、几种架构模式的比较

1、应用场景

(1)MVC:Web应用程序、桌面应用程序等。

(2)MVP:桌面应用程序、移动应用程序等。

(3)MVVM:前端开发、移动应用程序等。

2、互相比较的优劣:

(1)MVC相对简单,适用于小型应用程序,但控制器可能变得臃肿。

(2)MVP在MVC的基础上进一步解耦了视图和模型,但Presenter可能变得臃肿。

(3)MVVM通过数据绑定机制简化了视图和模型之间的交互,但可能导致性能问题。

总结:选择合适的模式取决于具体的应用需求和团队的技术栈。如果应用规模较小且交互逻辑简单,可以选择MVC;如果需要更好的可测试性和解耦性,可以选择MVP;如果需要更高的灵活性和可维护性,可以选择MVVM。

五、例子演示

下面是一个使用C++代码示例来说明MVC、MVP和MVVM的区别:


// 假设有一个计算器应用程序


// MVC示例

class CalculatorModel {
public:
    int add(int a, int b) {
        return a + b;
    }
};

class CalculatorView {
public:
    void displayResult(int result) {
        cout << "Result: " << result << endl;
    }

    pair<int, int> getUserInput() {
        int a, b;
        cout << "Enter two numbers: ";
        cin >> a >> b;
        return make_pair(a, b);
    }
};

class CalculatorController {
private:
    CalculatorModel model;
    CalculatorView view;

public:
    void calculate() {
        pair<int, int> input = view.getUserInput();
        int result = model.add(input.first, input.second);
        view.displayResult(result);
    }
};

// MVP示例

class CalculatorModel {
public:
    int add(int a, int b) {
        return a + b;
    }
};

class CalculatorView {
public:
    void displayResult(int result) {
        cout << "Result: " << result << endl;
    }

    pair<int, int> getUserInput() {
        int a, b;
        cout << "Enter two numbers: ";
        cin >> a >> b;
        return make_pair(a, b);
    }
};

class CalculatorPresenter {
private:
    CalculatorModel model;
    CalculatorView view;

public:
    void calculate() {
        pair<int, int> input = view.getUserInput();
        int result = model.add(input.first, input.second);
        view.displayResult(result);
    }
};

// MVVM示例

class CalculatorModel {
public:
    int add(int a, int b) {
        return a + b;
    }
};

class CalculatorViewModel {
private:
    CalculatorModel model;

public:
    int result;
    int inputA;
    int inputB;

    void calculate() {
        result = model.add(inputA, inputB);
    }
};

class CalculatorView {
public:
    CalculatorViewModel viewModel;

    void displayResult() {
        cout << "Result: " << viewModel.result << endl;
    }

    void getUserInput() {
        cout << "Enter two numbers: ";
        cin >> viewModel.inputA >> viewModel.inputB;
    }
};

int main() {
    // MVC示例

    CalculatorController controller;
    controller.calculate();

    // MVP示例

    CalculatorPresenter presenter;
    presenter.calculate();

    // MVVM示例

    CalculatorView view;
    view.getUserInput();
    view.viewModel.calculate();
    view.displayResult();

    return 0;
}

以上是一个简单的计算器应用程序的示例,展示了MVC、MVP和MVVM三种模式的不同实现方式。你可以通过对比代码来理解它们之间的区别和特点。注意,这只是一个简化的示例,实际应用中可能会更加复杂和灵活。

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

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

相关文章

基于A-Star搜索算法的迷宫小游戏的设计

这篇文章是作者人工智能导论课的大作业&#xff0c;发出来供大家学习参考&#xff08;有完整代码&#xff09;。想要论文WORD文件的可以在本文资源处下载&#xff08;可能还在审核&#xff09;。 摘要&#xff1a; 本文章聚焦于基于A-Star搜索算法的迷宫小游戏设计&#xff0c;…

蓝桥杯Web应用开发-CSS 基础语法3(文本属性)

CSS 基础语法-文本属性 专栏持续更新中 文本属性 文本属性用于定义文本的样式&#xff0c;通过文本属性&#xff0c;可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示&#xff1a; 属 性可取值描述line-heightnormal、number、length、…

vulhub中Apache APISIX Dashboard API权限绕过导致RCE(CVE-2021-45232)

Apache APISIX是一个动态、实时、高性能API网关&#xff0c;而Apache APISIX Dashboard是一个配套的前端面板。 Apache APISIX Dashboard 2.10.1版本前存在两个API/apisix/admin/migrate/export和/apisix/admin/migrate/import&#xff0c;他们没有经过droplet框架的权限验证&…

【Java报错】显示错误“Error:java: 程序包org.springframework.boot不存在“

使用idea运行项目&#xff0c;显示错误信息如下&#xff1a; 原因是&#xff1a;idea配置的maven加载不到autoconfigure。 解决方案一&#xff1a; 第6步绕过证书语句如下&#xff1a; -Dmaven.wagon.http.ssl.insecuretrue -Dmaven.wagon.http.ssl.allowalltrue 打开终端&am…

C++一维数组

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 铁汁们大家好呀&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习一下数组&#xff08;一维&#xff09;。 文章目录 1.数组的概念与思想 2.为什么要使用数组 3.数组的特性 4.数组的操作 1.定义…

浅谈QT的几种线程的使用和区别。

简介&#xff1a; 线程是操作系统中的基本执行单元&#xff0c;是一个独立的执行路径。每个线程都有自己的栈空间&#xff0c;用于存储本地变量和函数调用的上下文。多个线程可以在同一进程中并发执行&#xff0c;从而实现并发处理&#xff0c;提高程序的性能和响应能力。 与进…

【Docker】入门到精通(常用命令解读)

一、准备工作 1.配置Docker的yum库 首先要安装一个yum工具 yum install -y yum-utils安装成功后&#xff0c;执行命令&#xff0c;配置Docker的yum源&#xff1a; yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo2.安装Docker 执…

Go语言深度解析:探索 crypto/md5 标准库的强大功能

Go语言深度解析&#xff1a;探索 crypto/md5 标准库的强大功能 引言Go语言和MD5的基础知识MD5算法简介Go语言概述Go中的MD5实现 crypto/md5 库的使用方法基本用法处理大型数据安全注意事项 实际案例分析示例1&#xff1a;文件的MD5校验示例2&#xff1a;网络数据的MD5哈希示例3…

第9章 安全漏洞、威胁和对策(9.11-9.16)

9.11 专用设备 专用设备王国疆域辽阔&#xff0c;而且仍在不断扩张。 专用设备是指为某一特定目的而设计&#xff0c;供某一特定类型机构使用或执行某一特定功能的任何设备。 它们可被看作DCS、物联网、智能设备、端点设备或边缘计算系统的一个类型。 医疗设备、智能汽车、…

154基于matlab的二维元胞自动机模拟森林火灾(生命游戏 )和模拟收费站交通流

基于matlab的二维元胞自动机模拟森林火灾&#xff08;生命游戏 &#xff09;和模拟收费站交通流。全国大学生美国建模竞赛&#xff0c;程序已调通&#xff0c;可直接运行。 154 元细胞自动机 森林起火 收费站交通 (xiaohongshu.com)

大人不华,君子务实|复旦大学-华盛顿大学EMBA C18班优秀学生代表周靖毕业典礼演讲

周靖      Ecarx集团首席财务官      亲爱的Mazzeo院长、殷院长、尊敬的各位老师们、家人们以及各位同学们和毕业生们&#xff1a;      今天&#xff0c;当我们站在开启人生新篇章的分岔路&#xff0c;真是五味杂陈&#xff0c;感慨万千。对我们而言&#xff0c;能…

Day 35 | 贪心 860.柠檬水找零 、 406.根据身高重建队列 、 452. 用最少数量的箭引爆气球

860.柠檬水找零 题目 文章讲解 视频讲解 思路&#xff1a;分别列出三种支付方式对应的找零情况 class Solution {public boolean lemonadeChange(int[] bills) {int five 0, ten 0, twenty 0;for (int i 0; i < bills.length; i) {if (bills[i] 5) {five;} else if…

undefined symbol: avio_protocol_get_class, version LIBAVFORMAT_58

rv1126上进行编译和在虚拟机里面进行交叉编译ffmpeg都不行 解决办法查看 查看安装的ffmpeg链接的文件 ldd ./ffmpeg rootEASY-EAI-NANO:/home/nano/ffmpeg-4.3.6# ldd ffmpeg linux-vdso.so.1 (0xaeebd000)libavdevice.so.58 > /lib/arm-linux-gnueabihf/libavde…

防火墙是什么?聊聊如何轻松缓解应用漏洞

数字经济时代&#xff0c;也是应用爆炸的时代。企业越来越多地使用分布式应用架构构建现代微服务&#xff0c;以适应日益增长的应用使用量并提供更高的性能。与此同时却出现许多热点**&#xff0c;如供应链安全、零日漏洞、数据泄露等。忽视安全防护的企业会面临丢失业务的风险…

npm install express -g报错或一直卡着,亲测可解决

问题描述&#xff1a; 最近学习vue3前端框架&#xff0c;安装Node.js之后&#xff0c;在测试是否可行时&#xff0c;cmd窗口执行了&#xff1a;npm install express -g&#xff0c;发现如下图所示一直卡着不动&#xff0c;最后还报错了&#xff0c;网上找了好久&#xff0c;各…

操作系统基础:文件系统基础【下】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;OS从基础到进阶 ⚔️1 文件的基本操作⚖️1.1 总览⚖️1.2 几种基本操作&#x1f52d;1.2.1 创建文件&#x1f52d;1.2.2 删除文件&#x1f52d;1.2.3 打开文件&#x1f52d;1.2.4 关闭文件…

python算法与数据结构---动态规划

动态规划 记不住过去的人&#xff0c;注定要重蹈覆辙。 定义 对于一个模型为n的问题&#xff0c;将其分解为k个规模较小的子问题&#xff08;阶段&#xff09;&#xff0c;按顺序求解子问题&#xff0c;前一子问题的解&#xff0c;为后一子问题提供有用的信息。在求解任一子…

Multisim14.0仿真(四十一)交通信号灯仿真设计

一、功能简介&#xff1a; 1&#xff09;、采用两片74LS192做减法计数器&#xff0c;实现倒计时功能。 2&#xff09;、采用DCD数码管显示时间。 3&#xff09;、采用4个TRAFFIC_LIGHT_SINGLE红绿灯 4&#xff09;、采用74LS160和74LS138实现对红绿灯的逻辑控制。 5&#xff09…

Python 潮流周刊#38:Django + Next.js 构建全栈项目

△△请给“Python猫”加星标 &#xff0c;以免错过文章推送 你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。本周刊开源&#xff0c;欢迎投稿[1]。另有电报频道[2]作为副刊&#xff0c;补充发布更加丰富的资讯&#xff0c;…

elementUI 表格中如何合并动态数据的单元格

elementUI 表格中如何合并动态数据的单元格 ui中提供的案例是固定写法无法满足 实际开发需求 下面进行改造如下 准备数据如下 //在表格中 设置单元格的方法 :span-method"spanMethodFun" <el-table :data"tableData" border :span-method"spa…