聊一聊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岁之前年薪一百万,还有九年加油

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