聊一聊MVC模式跟MVVM模式

简介: 聊一聊MVC模式跟MVVM模式

MVC思想

可以简单理解为三层:

M:model模型层,对数据的增删改查也可以说是dao层,涉及到数据层service

V:view视图层,前端页面(html,js,css),专门对数据进行渲染给用户看的

C:controller 控制层,主要用于处理业务也包括路由

MVC理解

用户去下订单支付订单

用户点击下订单,触发点击事件,这就是视图层(view:V),通过事件触发以后会到达后端,后端在路由配置里面会接收到用户的请求,用户的请求到达后端要去执行哪一个方法,执行什么方法是路由所控制的,路由拿到用户请求进行分析之后就是request然后进行分配控制器,然后把用户的请求丢给控制器,让控制器给用户请求进行相应的处理,这就是控制层(controller:C)【控制层其实包含了路由和控制器,路由:只是用来请求用户的请求和拿到你的请求然后丢到给下一个控制器,不会做额外的处理,仅仅负责页面的导向作用】,业务处理完毕,要针对订单做保存,记录日志等等这些数据,这些数据会通过模型层(model)去做一个增加数据的操作,这时候一条订单,日志会保存到数据库里面,随后做一个查询操作,查询操作也是在数据层做的,拿到用户所需要的信息之后,会在返回到控制器,返回给(控制层),再一次的进行业务处理,最后把数据包装好之后,在抛给视图层,在页面上做一个渲染,这就是MVC的处理过程。

MVVM思想

mvvm思想就是在后端的mvc思想上把(view视图层)进行分离

V(view:视图层) 指整个视图层的页面 【页面HTML】

**M(model:数据层)**每一个页面所存在的一些数据【单页面的静态数据】他是一个JSON对象,在页面展示的,需要渲染的都是model。

MVVM理解

老式操作方式

如果采用老式的开发模式,可以通过js、jq去操作dom,把数据渲染到页面之后用户在修改自己的个人信息去提交,在用户修改的时候会去监听用户的操作,用户修改过后我们会通过对应的方法把数据重新的拿到,(也可以说是把相应的内容封装到model里面去),这个过程需要额外在写一个方法的,也可以直接采用form的序列化,把form里面的数据序列化成一个json对象,随后在提交到后端进行了个修改的操作。

MVVM操作方式

新增viewModel是一个核心,也可以说是调度者或者协调器,在视图层数据层做一个数据的传递工作。

从拿到用户数据不是直接去交给视图层渲染的,我们会把相应的数据丢给我们的VM让他去做一个渲染的操作,随后数据就可以在视图层渲染了,用户在视图层里操作了其他的view的元素,修改了一些数据,这个时候开发者不用再去写额外的方法,只要用户修改了数据,要么数据就相应的会通过VM再一次传递到model里面去,双向的俩个动作都是由VM这个调度者去协调进行相应的处理,对于这俩个方向来回操作,我们也成为数据双向绑定,这么一整个就是MVVM的设计思想

今天入职喜提试用期4000,原本不打算学了,我这里十分感谢大厂出身的一个大牛,放弃了原本高薪的机会,才让我们得以相遇,让我看到了希望,目标 :30岁之前年薪一百万,还有九年加油

相关文章
|
4月前
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
32 0
|
4月前
|
XML 前端开发 测试技术
Android基础知识:解释Android的MVC和MVP模式。
Android基础知识:解释Android的MVC和MVP模式。
32 0
|
5月前
|
设计模式 前端开发 Java
Java设计模式【二十六】:MVC模式
Java设计模式【二十六】:MVC模式
35 0
|
7月前
|
SQL 前端开发 Java
JSP毕业设计选题系统统myeclipse开发sql数据库BS模式java编程mvc结构
JSP 毕业设计选题系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。
28 0
|
2月前
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
36 0
|
2月前
|
XML 前端开发 Java
MVC 模式及对象持久化
MVC 模式及对象持久化
27 7
|
3月前
|
存储 前端开发 JavaScript
什么是MVVM?MVC、MVP与MVVM模式的区别?
什么是MVVM?MVC、MVP与MVVM模式的区别?
|
4月前
|
存储 开发框架 前端开发
MVVM 模式与 MVC 模式:构建高效应用的选择
MVVM 模式与 MVC 模式:构建高效应用的选择
MVVM 模式与 MVC 模式:构建高效应用的选择
|
4月前
|
前端开发 JavaScript 数据可视化
|
4月前
|
前端开发 Java 数据库
MVC模式和三层架构
MVC模式和三层架构
21 0