首页 > 其他分享 >前端框架中 MVC 和 MVVM 两种设计方式的区别

前端框架中 MVC 和 MVVM 两种设计方式的区别

时间:2023-12-09 13:12:17浏览次数:32  
标签:账单 MVVM 前端 ViewModel MVC Model View

MVC 和 MVVM 是两种常见的软件架构模式。它们都致力于提供清晰的组织结构和代码分离,让开发者能够更有效率地开发和维护复杂的应用程序。然而,它们在组织代码和处理用户交互上有一些重要的区别。

首先,让我们了解一下 MVC(Model-View-Controller)模式。MVC 是一种设计模式,被广泛应用于 GUI 的设计开发中,它把软件系统分为三个基本部分:Model(模型),View(视图)和 Controller(控制器)。

  • Model 代表了业务数据和业务逻辑。它维护了应用程序的数据和状态,并定义了操作数据的方法。例如,如果你正在开发一个账单管理系统,Model 可能包括账单数据以及添加,删除,修改账单的方法。

  • View 是用户看到和交互的部分。它是 Model 的可视化表示。在上述的账单管理系统例子中,View 可以是一个显示账单列表的表格,或者是一个表单用于输入新的账单信息。

  • ControllerModelView 之间的协调者。它接收用户的输入,更新 Model,然后更新 View 来反映 Model 的新状态。在账单管理系统的例子中,当用户在表单中输入新的账单信息并点击提交按钮时,Controller 会将这个新的账单信息添加到 Model,然后更新 View 来显示新的账单列表。

然后,我们来看一下 MVVM(Model-View-ViewModel)模式。MVVM 模式也分为三个部分:Model(模型),View(视图)和 ViewModel(视图模型)。

  • Model 在 MVVM 中的角色与 MVC 中的相同,代表了业务数据和业务逻辑。

  • View 在 MVVM 中,与 MVC 中的角色也相同,代表了用户界面。

  • ViewModel 是 MVVM 中特有的部分,它是 ViewModel 之间的抽象,是 View 的模型表示。ViewModel 可以获得 Model 的信息,无需知道 Model 的具体实现;同样,View 可以观察和更新 ViewModel,而无需知道 Model 的存在。这样,ViewModel 就实现了解耦。

最大的区别在于 ControllerViewModel。在 MVC 中,Controller 直接与 ModelView 交互,处理用户输入,更新 Model,然后更新 View。而在 MVVM 中,ViewModel 提供了一个数据绑定的机制,这使得 View 可以自动更新当 Model 改变时,反之亦然。这使得 ViewModel 可以独立于 View 进行测试,提高了代码的可测试性。

标签:账单,MVVM,前端,ViewModel,MVC,Model,View
From: https://www.cnblogs.com/sap-jerry/p/17890801.html

相关文章

  • 前端毕业设计选题之项目仓库管理系统
    作者简介:Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注作......
  • 通俗易懂的 Axios 拦截器指南:提升前端开发效率的利器
    Axios 提供了一种称为 “拦截器(interceptors)” 的功能,使我们能够在请求或响应被发送或处理之前对它们进行全局处理。拦截器为我们提供了一种简洁而强大的方式来转换请求和响应、进行错误处理、添加认证信息等操作。在本文中,我们将深入探讨如何使用Axios的拦截器,并提供一个实际......
  • 前端图片最优化压缩方案
    functioncompressImg(file,quality){varqualitys=0.52if(parseInt((file.size/1024).toFixed(2))<1024){qualitys=0.85}if(5*1024<parseInt......
  • ModelAndViewContainer、ModelMap、Model、ModelAndView详细介绍【享学Spring MVC】
    前言写这篇文章非我本意,因为我觉得对如题的这个几个类的了解还是比较基础且简单的一块内容,直到有超过两个同学问过我一些问题的时候:通过聊天发现小伙伴都听说过这几个类,但对于他们的使用、功能定位是傻傻分不清楚的(因为名字上都有很多的相似之处)。那么书写本文就是当作一篇科普类......
  • JavaWeb - Day03 - Ajax、前端工程化、Element
    01.Ajax-介绍Ajax概念:AsynchronousJavaScriptAndXML,异步的JavaScript和XML。作用:数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等......
  • 一文读懂〖MVCC〗多版本并发控制
    MVCC即多版本并发控制(Multi-VersionConcurrencyControl),是一种用于数据库管理系统的技术,主要用于提高数据库系统在并发操作下的性能,同时保证事务的一致性和隔离性。其核心思想是为每个读取的数据库对象(如行或记录)提供其事务时间点的快照,而不是锁定数据以防止其他事务访问。一、MVC......
  • vue-django 前端bootstrap配置
    2、前端引入bootstrap下载bootstrap源码,放在vue中的src目录中https://v5.bootcss.com/docs/getting-started/download/https://getbootstrap.net/docs/getting-started/introduction/在vue根目录修改main.jsimport{createApp}from'vue'importAppfrom'./App.vue'im......
  • 前端学习-JavaScript学习-js基础-API02
    学习视频:黑马程序员视频链接事件监听三要素:事件源、事件类型、事件处理程序随机点名案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • Flask读取MySQL数据库中的图片并返回给前端的步骤?
    要在Flask中读取MySQL数据库中的图片并返回给前端,可以按照以下步骤进行操作:导入相关模块:在Flask应用程序文件中,首先导入必要的模块,包括Flask、MySQL驱动和一些辅助函数。fromflaskimportFlask,request,send_fileimportmysql.connector创建Flask应用程序实例:创建一个Flask应......
  • 前端问题记录:el-row和el-col出现排版错乱
    el-row和el-col出现排版错乱,如图使用场景:使用了el-row和col配合form使用,不操作时候页面排版是正确的,进行操作就会出现排版错乱。问题原因:因为el-row和el-col的中的span元素之和超过了24的时候,就会出现排版错乱解决方案:.el-row{display:flex;//设置布局flex-wrap:wrap;//......