一、MVC的模型
1.1 什么是MVC模型?
MVC模型算是一种设计模式,其目的是给视图与模型数据构建桥梁,使其分离并便于通过控制台进行管理,为了代码更加的规范化但不能简化。
主要细分成下面三部分:
- M(模型model):应用程序中与数据库存储连接的模型部分,负责进行数据逻辑处理的部分。
- V(视图view):应用程序中负责显示数据的部分,既是用户页面显示。视图是根据数据模型而进行创建的。
- C(控制台controller):应用程序中负责修改数据请求操作的部分,既是用户与页面交互操作。其本身只是进行数据的逻辑处理,并不具备像视图的输出以及模型的数据处理操作。它只接收用户交互请求,并给模型分配哪个模型部分需要进行请求,再给视图确定需要在哪个版块显示已处理的数据。
1.2 MVC的模型图
1.3 MVC的使用框架
例如C++语言使用的QT,就是通过MVC的框架来搭建的,毕竟QT也可以实现窗口化数据可视化,用户交互。
1.4 MVC的优缺点
优点:
- 更改视图层代码编译不需要编译模型与控制台的代码。
- 因为多个视图可以共享一个模型用户部分,使用手机或电脑的业务场景大为相同。
- 因为业务层与视图层分离,比较适合维护,而在开发阶段部署也相对较低(有点类似前后端分离,视图与业务分开)
缺点:
- 代码实现较为复杂。
- 不适合小型项目开发,因为模型与视图部分是完全分离的,调试起来比较繁琐。
- 视图与控制台联系比较频繁,而导致视图可能会对模型进行没有必要的联系重复,而影响性能。
二、MVVM的模型
2.1 什么是MVVM模型?
2.1.1 MVVM模型原理
本质上是MVC的改进版,视图与视图模型的响应式数据双向绑定。在开发中,模型就是后端进行业务操作,视图是前端的html,css的部分,视图模型既是js部分。
主要分为下面三部分:
- M(模型model):与数据库存储联系的模型部分,负责进行数据逻辑处理的部分。(后端的数据)
- V(视图view):负责显示数据的部分,既是用户页面显示。视图是根据数据模型而进行创建的。(DOM中的NODE节点树)
- VM(视图模型层viewModel):是构建模型与视图的桥梁。因为模型传过来的数据平时是不能与视图上的控件一一对应上的,所以视图模型层负责是把模型封装成显示和接收的界面数据对象。
2.1.2 MVVM模型是怎么进行数据双向绑定的
MVVM中的数据双向绑定原理主要是在视图view与视图模型viewModel中进行处理的。
- 当视图模型监听到数据更新,会把此数据传给视图进行渲染显示。
- 当视图数据更新(通常是表单元素)时,如input输入字符串。框架监听到视图数据变化,会告知视图模型进行同步更新。
结合2.2 MVVM的模型图可以更直观理解数据双向绑定概念。
2.2 MVVM的模型图
2.2.1 MVVM的原型图
2.2.2 MVVM框架模型图
2.2.3 根据VUE框架以视图模型为中转站的MVVM模型图
2.2.4 MVVM与三剑客分配(html,css,js等)
2.3 MVVM的使用框架
微信小程序,vue.js等等
2.4 MVVM的使用框架
优点:
- 减少对DOM的操作,可以提升页面的性能。视图对立与model的变化与修改。
- 复用性高,可以把一些视图写在视图模型中,而多个视图可以服用这个视图的逻辑。
缺点:
- 简单的视图使用MVVM可能会大材小用。
- 随着页面的视图模块增加,对于视图模型的维护成本会更加困难。
三、MVC的模型与MVVM模型的区别
MVVM模型与MVC模型最大的区别是MVVM实现视图与模型的同步更新。当模型的数据发生改变的时候,不需要手动刷新DOM获得新的视图,会自动实现同步。
但MVC也不是完全摒弃,MVVM中的视图模型只是把控制台的一部分业务逻辑抽取出来,毕竟有些视图有关的业务逻辑操作还是需要放在控制台中完成。
四、总结
经过学习,可以看出MVC→MVVM中,在数据与页面的DOM进行独立分开,提高页面的DOM与数据动态双向绑定,更便于前端开发使用后端接收的数据以及进行相应的渲染操作。本人之后会进一步研究VUE中的数据双向绑定的底层原理。