简单介绍一下mvvm mvc mvp以及区别、历史

MVC(Model - View - Controller)

因MVC架构的灵活性,架构图形式很多,仅供参考

历史:

  • MVC 是最早出现的软件架构模式之一,其历史可以追溯到 20 世纪 70 年代,最初被用于 Smalltalk - 80 环境。它的出现是为了应对软件开发中用户界面与业务逻辑紧密耦合的问题,旨在分离数据处理、用户界面展示和交互逻辑。

架构介绍:

  • Model(模型): 负责数据存储和业务逻辑,如数据库操作、数据验证、计算等。它是应用程序的核心数据结构和处理单元。
  • View(视图): 主要负责将 Model 中的数据展示给用户,以可视化形式呈现信息。例如,通过 HTML、CSS 构建的网页界面。View 通常会监听用户操作并通知 Controller,但本身不处理业务逻辑。
  • Controller(控制器): 作为 View 和 Model 之间的桥梁,接收 View 传递的用户操作(如点击按钮),然后调用 Model 中的相关方法进行数据处理,并根据处理结果更新 View。

MVP(Model - View - Presenter)

历史:

  • MVP 是在 MVC 的基础上发展而来的,主要是为了进一步分离视图和模型,解决 MVC 在某些情况下视图对模型依赖过重的问题,在 20 世纪 90 年代开始受到关注并逐渐应用。

架构介绍:

  • Model(模型): 和 MVC 中的模型类似,处理数据存储和业务逻辑,如数据的获取、存储和复杂的计算规则。
  • View(视图): 负责显示数据,比 MVC 中的视图更 "薄",几乎不包含业务逻辑,只专注于展示 Presenter 传递过来的信息。它将用户操作反馈给 Presenter。
  • Presenter(展示器): Presenter 是 MVP 的核心,它接收来自 View 的用户输入,调用 Model 中的业务逻辑进行处理,然后将处理后的结果反馈给 View,以更新界面显示。它在 Model 和 View 之间起到了更主动的协调作用。

MVVM(Model - View - ViewModel)

历史:

  • MVVM 是随着微软的 WPF(Windows Presentation Foundation)和 Silverlight 技术发展起来的,它的出现是为了更好地利用数据绑定技术,简化用户界面开发,大概在 21 世纪初开始流行。

架构介绍:

  • Model(模型): 负责处理业务数据和逻辑,如数据的持久化、检索以及与业务相关的计算。
  • View(视图): 呈现用户界面,通过数据绑定与 ViewModel 关联。它不包含复杂的业务逻辑,只负责显示数据和接收用户交互事件,并将事件传递给 ViewModel。
  • ViewModel(视图模型): 作为连接 Model 和 View 的桥梁,从 Model 获取数据并进行转换,使其适合在 View 中显示。同时,它接收 View 传来的用户交互信息,并将其转化为对 Model 的操作。MVVM 的核心特点是双向数据绑定,即 View 和 ViewModel 的数据变化会自动相互更新。

三者区别

数据流向和绑定方式:

  • MVC: View 和 Model 之间的数据流向相对简单,View 从 Model 获取数据显示,用户操作通过 Controller 间接影响 Model。数据绑定通常是单向的(从 Model 到 View),需要手动更新 View。
  • MVP: Presenter 在数据交互中起关键作用,View 和 Model 通过 Presenter 进行数据交换,实现部分双向数据绑定。Presenter 从 Model 获取数据并处理后传递给 View,同时将 View 的用户输入反馈给 Model。
  • MVVM: 具有双向数据绑定机制,ViewModel 和 View 之间的数据变化自动同步,不需要手动干预。ViewModel 与 Model 之间则是单向的数据获取和操作关系。

各层职责和耦合度:

  • MVC: 在简单场景下容易理解和实现,但随着项目复杂度增加,Controller 可能会变得臃肿,View 和 Model 之间可能存在一定的间接耦合。
  • MVP: View 和 Model 的分离更加彻底,View 变得更加轻量,但 Presenter 可能会因为要处理大量的视图和模型交互逻辑而变得复杂,且代码的可测试性依赖于良好的接口设计。
  • MVVM: 由于双向数据绑定,开发效率较高,View 和 ViewModel 的耦合相对紧密,但只要设计合理,ViewModel 和 Model 的分离还是比较清晰的,同时也方便进行单元测试。

适用场景:

  • MVC: 适用于小型项目或者对交互逻辑要求不高的应用,能够快速实现功能。在 Web 开发早期应用广泛。
  • MVP: 在需要更好地分离视图和模型,特别是有复杂交互逻辑且对视图可测试性有要求的项目中表现出色,如一些企业级应用。
  • MVVM: 非常适合数据驱动的应用,特别是在开发具有丰富交互的用户界面且需要频繁更新数据的场景,如现代的前端单页应用(SPA)和移动应用开发。
相关推荐
米奇妙妙wuu13 分钟前
react使用sse流实现chat大模型问答,补充css样式
前端·css·react.js
傻小胖18 分钟前
React 生命周期完整指南
前端·react.js
梦境之冢1 小时前
axios 常见的content-type、responseType有哪些?
前端·javascript·http
racerun1 小时前
vue VueResource & axios
前端·javascript·vue.js
m0_548514771 小时前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
AndrewPerfect1 小时前
xss csrf怎么预防?
前端·xss·csrf
Calm5501 小时前
Vue3:uv-upload图片上传
前端·vue.js
浮游本尊1 小时前
Nginx配置:如何在一个域名下运行两个网站
前端·javascript
m0_748239831 小时前
前端bug调试
前端·bug
m0_748232921 小时前
[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结
前端·搜索引擎