MVC和MVVM的关系图解

简介: MVC和MVVM的关系图解

MVCMVVM的关系图解

 

一、MVCMVVM的区别


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


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

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


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

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

image.png

1app.js

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

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


(2)Router.js

这是路由分发处理模块;

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

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


(3)Comtroller

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


(4)Model

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

Ccreate(创建)RRead(读取) Uupdate(更新) DDelete(删除)

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


(5)View 视图层

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


Router.jsController 就是 Controller 层。

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

M:Model

VView 视图层

CController层(路由和页面)


MVVM是前端视图层的分层开发思想,主要把每个页面分成了MV 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


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


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


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

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

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