MVC 和 MVVM 的关系图解 | 学习笔记

简介: 快速学习 MVC 和 M VVM 的关系图解

开发者学堂课程【Vue.js 入门与实战:MVC 和 MVVM 的关系图解】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8127


MVC 和 MVVM 的关系图解


一、MVC 和 MVVM 的区别

Node (后端)中的 MVC 与前端中的 MVVM 之间的区别

1.MVC是后端的分层开发概念;

M 是 MOD 层主要处理数据的 CRUD。V 是视图层,一般看作前端页面。C 是业务逻辑层,路由也相当于里面的一部分,大部分是 Comtroller。

2.MVVM 是前端视图层的概念;

主要关注于视图层分离,也就是说:MVVM 把前端的视图层,分为了三部分 Model, View , VM ViewModel

image.png

(1)app.js

(项目的入口模块,一切的请求都要先进入这里进行处理)

注意: app.js 并没有路由分发的功能,需要调用 router.js 模块进行路由器分发处理。

(2)Router.js

这是路由分发处理模块;

【为了保证路由模块的职能单一,router.js 只负责分发路由,不负责具体业务逻辑的处理】

如果涉及到了业务逻辑处理操作; router.js 就无能为力了,只能调用 controller 模块进行业务逻辑处理)。

(3)Comtroller

(业务逻辑处理层,在这个模块中,封装了一些具体业务逻辑处理的逻辑代码,但是,也是为了保证职能单一,此模块只负责处理业务,不负责处理数据的 CRUD, 如果涉及倒了数据的 CRUD,需要调用 Model 层)。

(4)Model

(职能单一,只负责操作数据库,执行对应的 Sql 语句,进行数据的 CRUD。

C:create(创建)R:Read(读取) U:update(更新) D:Delete(删除)

App.js 导向 router.js,路由调用 controller 业务逻辑模块,controller 里如果涉及到数据操作调用 Model 层。

(5)View 视图层

(每当用户操作了界面,如果需要进行业务的处理,都会通过网络请求,去请求后端的服务器,此时,这个请求就会被后端的 App.js 监听到。

Router.js 和 Controller 就是 Controller 层。

这是后端里的 MVC 项,综合考虑了后端和前端,把整个项目划分为了三层。

M:Model层

V:View 视图层

C:Controller 层(路由和页面)

MVVM 是前端视图层的分层开发思想,主要把每个页面分成了 M、V 和 VM,其中 VM 是 MVVM思想的核心:因为 VM 层是 M 和 V 之间的调度者。

image.png

M:保存的是每个页面中单独的数据。

VM:是一个调度者,分割了 M 和 V,每当 V 层想要获取后保存的数据。

V:就是每个页面中的 HTML 结构。

比如有一个首页,首页里可能会渲染一个 table 表格,这时需要运用 AJEX 从服务器里获取,拿到数据后返回一个数组,这个数组就是当前页面的 M。

拿到 M 需要渲染到具体页面的某个部分,页面里的 html 代码就是 V。

M 里的数据渲染到 V 里面,现在用到 MVVM,不能直接渲染到 V 里面,假如 V 里面修改了某个文本框需要把数据同步到 M 里,也是不能直接同步,因为中间有一个 VM。

M 和 V 不可相互调用,所以拿取数据或者保存数据都需要调用 VM。

前端页面中使用 MVVM 的思想,主要是为了让我们开发更加方便,因为 MVVM 提供了数据的双向绑定;

注意:数据的双向绑定是由 VM 提供的;

为什么有了MVC还要有MVVM:MVVM 是专属于前端的思想,MVC是后端的思想。

相关文章
|
6月前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
136 12
|
7月前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
67 0
|
7月前
|
前端开发
MVVM和MVC的原理以及它们的区别
MVVM和MVC的原理以及它们的区别
|
7月前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
135 0
|
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)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
6月前
|
设计模式 存储 前端开发
【设计模式】MVC与MVVM详尽解读与实战指南
【设计模式】MVC与MVVM详尽解读与实战指南
963 0
|
7月前
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
6月前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
70 0
|
7月前
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
296 7