鉴于上篇文章在上周五会议上被问到一些基础性问题时引发了一些碰撞搞得我好尴尬,这篇我尽量写的完备一些,但是我不写示例代码了,这篇文章最低门槛几乎和上一篇一样,是需要小伙伴们知道 JavaScript
是什么,/MV*/
这个正则表达式能够匹配到什么。
背景
最近为开发新版瑞信通做准备,看 demo
源码时注意到 cache.js
中的一段注释:
// 建议开发者选择mvvm框架来通过数据来驱动UI变化
此篇我和小伙伴们分享的就是 MVVM
,但是介绍 MVVM
之前,完备性起见要从 MVC
和 MVP
开始。
因为我手头有 《JavaScript
设计模式》这本书,此篇文章也算是我对这本书做笔记了。
MVC
我觉得 MVC
是 well-known
并不会引起小伙伴们质疑,正文从下述 MVP
简介开始。
MVP
模型-视图-表示器(MVP
)是 MVC
设计模式的一种衍生模式,专注于改进表示逻辑。它是在 1990 年代由 Taligent
公司创造的。
Model、View 和 Presenter
MVP
中的 P
代表表示器。这是一个包含用于 View
(视图)的用户界面业务逻辑的组建。与 MVC
不同,来自 View
(视图)的调用将委托给表示器,表示器是从 View
(视图)中解耦,通过接口与它对话。
最后一句话总结一下 MVP
和 MVC
之间的区别:
Model View Presenter
设计模式实际上就是许多开发人员已经熟悉的模型视图控制器的一个最新版本;两者的主要区别是MVP
真正将UI
从应用程序的域/服务层中分离。
MVVM
MVVM
(模型-视图-视图模型)是一种基于 MVC
和 MVP
的架构模式,它试图更清晰地将用户界面(UI
)开发从应用程序的业务逻辑与行为中分离。
Model
:和 MV*
家族的其他成员一样,MVVM
中的 Model
(模型)表示应用程序将会使用的特定领域数据或信息。
View
:与MVC
一样,View
实际上仅是与用户进行交互的应用程序的一部分。
ViewModel
:可以将ViewModel
作为一个专门的Controller
,充当数据转换器。它将Model
信息转变为View
信息,还将命令从View
传递到Model
。
小结:View
和 ViewModel
、ViewModel
和 Model
View
和ViewModel
之间通过数据绑定和事件进行通信。View
处理自己的用户界面事件,必要是将它们映射到ViewModel
。Model
和ViewModel
上的属性通过双向数据绑定进行同步和更新。
ViewModel
似乎是完全负责MVVM
中的Model
,但这种关系中有一些微妙之处值得我们注意。ViewModel
可以为了数据绑定而暴露Model
或Model
属性,也可以包含接口,用于获取和操作在View
中暴露的属性。
MVC、MVP 与 MVVM
MVP
和 MVVM
均是 MVC
的衍生品。MVC
与其衍生品之间的主要区别是每一层对其他层的依赖,以及它们是如何紧密地互相绑定的。
在
MVC
中,View
位于架构之上,与Controller
(控制器)相邻。Model
位于Controller
(控制器)之下,因此View
了解Controller
(控制器),Controller
(控制器)了解Model
。在这里,View
能够直接访问Model
。但是,向View
暴露完整的Model
可能会带来安全性和性能成本,这取决与应用程序的复杂性。MVVM
试图避免这些问题。
在MVP
中,Controller
(控制器)的作用被Presenter
所替代。表示器与View
(视图)位于同一位置,监听View
和Model
的事件,并调解它们之间的行动。与MVVM
不同,它没有使用将View
绑定至ViewModel
的机制,因此我们转而依赖每个View
来实现用于让Presenter
与View
进行交互的接口。
因此,MVVM
允许我们创建Model
的特定于View
的子集,它们可以包含状态和逻辑信息,无需向View
暴露整个Model
。与MVP
的Presenter
不同,引用View
时不需要ViewModel
。View
可以绑定到ViewModel
上的属性,而属性会将Model
所包含的数据暴露给View
。如前所述,View
的抽象意味着它背后的代码所要求的逻辑更少了。