谈谈前端MVC、MVVM设计模式

Ingram 2019-11-05

MV模式的目的是实现动态的程序设计,简化程序后续的修改和扩展过程,并且使模块能够被重复利用。此模式通过简化程序使之变得更为直观。MV不是一种技术 ,而是一种设计理念。MV*模式主要采用分层的思想来降低耦合度,从而使系统更加灵活,扩展性更强。它通过关注数据界面分离,来鼓励改进应用程序结构。
常见的两种MV*模式是MVC和MVVM,他们具有一些相同点:
Model(模型):负责保存应用数据,和后端交互同步应用数据,或校验数据。Model不涉及用户界面,也不涉及表示层,而是代表应用程序可能需要的独特形式的数据。当Model改变时,它会通知它的观察者(如视图)作出相应的反应。总的来说,Model 主要与业务数据有关,与应用内交互状态无关。
View(视图):Model 的可视化表示,表示当前状态的视图。前端View负责构建和维护DOM元素。
View 对应用程序中的 Model 和 Controller 的了解是有限的,更新 Model 的实际任务都是在 Controller 上。
用户可以与 View 交互,包括读取和编辑 Model,在 Model 中获取或设置属性值。
不同点在于
Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
VM(视图模型):通过数据绑定,自动完成M、V之间的更新
那么究竟两者有什么区别?

MVC

谈谈前端MVC、MVVM设计模式

如图,实线代表方法调用,虚线代表事件通知。

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新(观察者模式)。

谈谈前端MVC、MVVM设计模式

这张图把MVC分为三个独立的区域,你瞧C和V以及C和M之间的白线,一部分是虚线一部分是实线对吧,这就表明了引用关系:C可以直接引用V和M,而V和M不能直接引用C,至少你不能显式的在V和M的代码中去写和C相关的任何代码,而V和M之间则是双黄线,没错,它们俩谁也不能引用谁,你既不能在M里面写V,也不能在V里面写M。
但是,MVC框架允许View和Model直接进行通信!所以,可能会出现特别混乱的情况出现!以Backbone 为例,由于 Model 对外直接暴露了 set 和 on 方法,导致 View 层可以随意改变 Model 中的值,也可以随意监听 Model 中值的变化。

谈谈前端MVC、MVVM设计模式

MVVM

MVVM 出现于 2005 年,最大变化在于 VM(ViewModel)代替了 C(Controller)。其关键“改 进”是数据绑定(DataBinding),也就是说,View 的数据状态发生变化可以直接影响 VM,反之 亦然。这也可以说是 AngularJS 的核心特色之一。

谈谈前端MVC、MVVM设计模式

MVVM框架与MVC框架的主要区别有两点:
1、实现数据与视图的分离
2、通过数据来驱动视图,开发者只需要关心数据变化,DOM操作被封装了。

谈谈前端MVC、MVVM设计模式

MVVM的实现主要是三个核心点:

响应式:vue如何监听data的属性变化(Object.defineProperty)
模板解析:vue的模板是如何被解析的
渲染:vue模板是如何被渲染成HTML的

相关推荐