乐趣区

浅谈前端MVCMVVM设计模式

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

这张图把 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 中值的变化。

MVVM

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

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

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

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

退出移动版