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是后端的思想。

相关文章
|
4月前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
35 0
|
5月前
|
前端开发
MVVM和MVC的原理以及它们的区别
MVVM和MVC的原理以及它们的区别
|
2月前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
41 0
|
15天前
|
前端开发 JavaScript
Vue中mvvm/mvc/mvp三者区别
Vue中mvvm/mvc/mvp三者区别
|
1月前
|
前端开发 JavaScript
mvvm/mvc/mvp三者区别
mvvm/mvc/mvp三者区别
21 3
|
3月前
|
存储 前端开发 JavaScript
什么是MVVM?MVC、MVP与MVVM模式的区别?
什么是MVVM?MVC、MVP与MVVM模式的区别?
|
4月前
|
存储 开发框架 前端开发
MVVM 模式与 MVC 模式:构建高效应用的选择
MVVM 模式与 MVC 模式:构建高效应用的选择
MVVM 模式与 MVC 模式:构建高效应用的选择
|
4月前
|
前端开发 JavaScript 数据可视化
|
4月前
|
设计模式 存储 前端开发
【各种问题处理】MVC、MVP、MVVM 、MVI、VIPER 架构(设计模式)
【1月更文挑战第13天】【各种问题处理】MVC、MVP、MVVM 、MVI、VIPER 架构(设计模式)
|
4月前
|
设计模式 前端开发 数据可视化
前端框架中 MVC 和 MVVM 两种设计方式的区别
前端框架中 MVC 和 MVVM 两种设计方式的区别
19 0