首先我们来了解一下MVC、MVP、MVMM这三大架构模式在前端角度上的理解。
MVC分别是 Model(模型)、View(视图)、Controller(控制器)三个模块。View(视图层)最主要完成前端的数据展示,Controller(控制层)是对数据的接收和触发事件的接收和传递,Model(模型层)则是对数据的储存和处理,再传递给视图层相应或者展示。如下图所示,整个过程是单链条的传递,在前端开发中多将业务逻辑写在View层,使得View层比较厚,而Controller层比较薄。 缺点: 1、 开发者在代码中大量调用相同的 DOM API,处理繁琐 ,操作冗余,使得代码难以维护。
2、大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。 3、 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到Model 中,这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。
MVP是Model(模型)、View(视图)、Presenter(表示器)组成。MVP架构模式最主要是针对Android的MVC架构模式进行改进的,MVP与MVC最不同的一点是M与V是不直接关联的也是就Model与View不存在直接关系,这两者之间间隔着的是Presenter层,其负责调控View与Model之间的间接交互。
MVVM 架构模式最主要是针对前端和iOS的MVC架构模式进行改进的,减轻Controller层或者View层的压力,实现更加清晰化代码。通过对ViewModel层的封装:封装业务逻辑处理,封装网络处理、封装数据缓存等,让逻辑处理分离出来,并且不需要处理Model数据,使得Controller层或者View层结构简单,条理清晰。MVVM模式的优点在于当view和viewmodel的双向绑定,当数据改变后不需要改修改DOM结构。MVVM的实现原理:利用Object.defineProperty(),该方法有get、set两个属性方法,从而获取对象属性的值,给对象属性重新赋值。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119353209
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。