JavaScript /MV*/ 模式

鉴于上篇文章在上周五会议上被问到一些基础性问题时引发了一些碰撞搞得我好尴尬,这篇我尽量写的完备一些,但是我不写示例代码了,这篇文章最低门槛几乎和上一篇一样,是需要小伙伴们知道 JavaScript 是什么,/MV*/ 这个正则表达式能够匹配到什么。

背景

最近为开发新版瑞信通做准备,看 demo 源码时注意到 cache.js 中的一段注释:

// 建议开发者选择mvvm框架来通过数据来驱动UI变化

此篇我和小伙伴们分享的就是 MVVM,但是介绍 MVVM 之前,完备性起见要从 MVCMVP 开始。
因为我手头有 《JavaScript 设计模式》这本书,此篇文章也算是我对这本书做笔记了。

MVC

我觉得 MVCwell-known 并不会引起小伙伴们质疑,正文从下述 MVP 简介开始。

MVP

模型-视图-表示器(MVP)是 MVC 设计模式的一种衍生模式,专注于改进表示逻辑。它是在 1990 年代由 Taligent 公司创造的。

Model、View 和 Presenter

MVP 中的 P 代表表示器。这是一个包含用于 View(视图)的用户界面业务逻辑的组建。与 MVC 不同,来自 View(视图)的调用将委托给表示器,表示器是从 View(视图)中解耦,通过接口与它对话。
最后一句话总结一下 MVPMVC 之间的区别:

Model View Presenter 设计模式实际上就是许多开发人员已经熟悉的模型视图控制器的一个最新版本;两者的主要区别是 MVP 真正将 UI 从应用程序的域/服务层中分离。

MVVM

MVVM(模型-视图-视图模型)是一种基于 MVCMVP 的架构模式,它试图更清晰地将用户界面(UI)开发从应用程序的业务逻辑与行为中分离。
Model:和 MV* 家族的其他成员一样,MVVM 中的 Model(模型)表示应用程序将会使用的特定领域数据或信息。

View:与 MVC 一样,View 实际上仅是与用户进行交互的应用程序的一部分。
ViewModel:可以将 ViewModel 作为一个专门的 Controller,充当数据转换器。它将 Model 信息转变为 View 信息,还将命令从 View 传递到 Model

小结:ViewViewModelViewModelModel

ViewViewModel 之间通过数据绑定和事件进行通信。View 处理自己的用户界面事件,必要是将它们映射到 ViewModelModelViewModel 上的属性通过双向数据绑定进行同步和更新。
ViewModel 似乎是完全负责 MVVM 中的 Model,但这种关系中有一些微妙之处值得我们注意。ViewModel 可以为了数据绑定而暴露 ModelModel 属性,也可以包含接口,用于获取和操作在 View
中暴露的属性。

MVC、MVP 与 MVVM

MVPMVVM 均是 MVC 的衍生品。MVC 与其衍生品之间的主要区别是每一层对其他层的依赖,以及它们是如何紧密地互相绑定的。

MVC 中,View 位于架构之上,与 Controller(控制器)相邻。Model 位于 Controller(控制器)之下,因此 View 了解 Controller(控制器),Controller(控制器)了解 Model。在这里,View 能够直接访问 Model。但是,向 View 暴露完整的 Model 可能会带来安全性和性能成本,这取决与应用程序的复杂性。MVVM 试图避免这些问题。
MVP 中,Controller(控制器)的作用被 Presenter 所替代。表示器与 View(视图)位于同一位置,监听 ViewModel 的事件,并调解它们之间的行动。与 MVVM 不同,它没有使用将 View 绑定至 ViewModel 的机制,因此我们转而依赖每个 View 来实现用于让 PresenterView 进行交互的接口。
因此,MVVM 允许我们创建 Model 的特定于 View 的子集,它们可以包含状态和逻辑信息,无需向 View 暴露整个 Model。与 MVPPresenter 不同,引用 View 时不需要 ViewModelView 可以绑定到 ViewModel 上的属性,而属性会将 Model 所包含的数据暴露给 View。如前所述,View 的抽象意味着它背后的代码所要求的逻辑更少了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容