说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

谈谈UI架构设计的演化

HTML文档下载 WORD文档下载 PDF文档下载
从经典MVC到MVVM,UI架构经过数次重大变迁,一些概念也在不断变化,架构和底层环境互相影响、适配,时至今日,经典MVC已不再是UI架构的正常选项。本文介绍MVC演进过程,帮大家更好地理解该概念,并指导今后的开发。

【编者按】近日,阿里无线事业部前端工程师寒泉在一篇文章《谈谈UI架构设计的演化》中表示,从经典MVC到MVVM,UI架构经过数次重大变迁。今天无数经过演绎的MVC实现和科普文,要么是原本作者概念已经很混乱,掺杂私货,要么为了适配现代的标记语言和控件模式,自己修改了经典MVC中的一些概念和耦合关系。实际上今天MVC已经没法作为一种交流的标准词汇了。该文从MVC的发展历程着手,对其概念及演进过程进行了肃清,以防开发者被误导。下面为原文。


经典MVC

在1979年,经典MVC模式被提出。

在当时,人们一直试图将纯粹描述思维中的对象与跟计算机环境打交道的代码隔离开来,而Trygve Reenskaug在跟一些人的讨论中,逐渐剥离出一系列的概念,最初是Thing、Model、View、Editor。后来经过讨论定为Model、View和Controller。作者自言“最难搞的就是给这些架构组件起名字”。

因为当时的软件环境跟现在有很大不同,所以经典MVC中的概念很难被现在的工程师理解。比如经典MVC中说:“View永远不应该知道用户输入,比如鼠标操作和按键。”对一个现代的软件工程师来说,这听上去相当不可思议:难道监听事件不需要类似这样的代码吗?

view.onclick = ......

但是想想在70年代末,80年代初,我们并没有操作系统和消息循环,甚至鼠标的光标都需要我们的UI系统来自行绘制,所以我们面对的应该是类似下面的局面:

mouse.onclick = ......mouse.onmove = ......

当鼠标点击事件发生后,我们需要通过View的信息将点击事件派发到正确的View来处理。假如我们面对的是鼠标、键盘驱动这样的底层环境,我们就需要一定的机制和系统来统一处理用户输入并且分配给正确的View或者Model来处理。这样也就不难理解为什么经典MVC中称"Controller是用户和系统之间的链接"。

因为现在的多数环境和UI系统设计思路已经跟1979年完全不同,所以现代一些喜好生搬硬套的"MVC"实现者常常会认为Controller的输入来自View,以至于画出Model、View、Controller之间很奇葩的依赖关系:


我们来看看Trygve Reenskaug自己画的图(这恶趣味的骷髅啊……):


值得一提的是,其实MVC的论文中,还提到了"editor"这个概念。因为没有出现在标题中,所以editor声名不著。MVC论文中推荐Controller想要根据输入修改View时,从View中获取一个叫做editor的临时对象,它也是一种特殊的Controller,它会完成对View和View相关的Model的修改操作。

控件系统

MVC是一种非常有价值的架构思路,然而时代在变迁,随着以windows系为代表的WIMP(window、icon、menu、pointer)风格的应用逐渐成为主流,人们发现,View和Controller某些部件之间的局部性实际上强于Controller内部的局部性。于是一种叫做控件(control)的预制组件开始出现了。

控件本身带有一定的交互功能,从MVC的视角来看,它既包含View,又包含Controller,并且它通过"属性",来把用户输入暴露给Model。

Controller的输入分配功能,则被操作系统提供的各种机制取代:

  • 指针系统:少数DOS时代过来的程序员应该记得,20年前的程序中的“鼠标箭头”实际上是由各个应用自己绘制的,以MVC的视角来看,这应当属于一个"PointerView"的职责范畴。但是20世纪以后,这样的工作基本由操作系统的底层UI系统来实现了。
  • 文本系统:今天我们几乎不需要再去关心文本编辑、选中、拖拽等逻辑,对web程序员可以尝试自己用canvas写一个文本编辑框来体验一下上个时代程序员编写程序的感受。你会发现,选中、插入/覆盖模式切换、换行、退格、双击、拖拽等逻辑异常复杂,经典MVC模式中通常使用TextView和TextEditor配合来完成这样的工作,但是今天几乎找不到需要我们自己处理这些逻辑的场景。
  • 焦点系统:焦点系统通过响应鼠标、tab键等消息来使得控件获得操作系统级唯一的焦点状态,所有的键盘事件通常仅仅会由拥有焦点的控件来响应。在没有焦点系统的时代,操作系统通常是单任务的,但是即使是单一应用,仍然要自己管理多个Controller之间的优先权和覆盖逻辑,焦点系统不但从技术上,也从交互设计的角度规范化了UI的输入响应,而最妙的是,焦点系统是对视觉障碍人士友好的,现在颇多盲人用读屏软件都是强依赖焦点系统的。

所以时至今日,MVC,尤其是其中Controller的功能已经意义不大,若是在控件系统中,再令所有用户输入流经一个Controller则可谓不伦不类、本末倒置。MVVM的提出者,微软架构师John Gossman曾言:“我倾向于认为它(指Controller)只是隐藏到后台了,它仍然存在,但是我们不需要像是1979年那样考虑那么多事情了”

MVP

1996年,Taligent公司的CTO,Mike Potel在一篇论文中提出Model-View-Presenter的概念。

在这个时期,主流的View的概念跟经典MVC中的那个“永远不应该知道用户输入”的View有了很大的差别,它通常指本文中所述的控件,此时在Mike眼中,输入已经是由View获得的了:


Model-View-Presenter是在MVC的基础上,进一步规定了Controller中的一些概念而成的:


对,所以,不论你按照Mike还是Trygve的理解方式,MVP和MVC的依赖关系图应该是一!模!一!样!的!因为Mike的论文里说了“we refer to this kind(指应用程序全局且使用interactor, command以及selection概念的) of controller as a presenter”。presenter它就是一种Controller啊!


把依赖关系画成这样也是醉了啊!不管你信不信我反正是不信啊!

标记语言和MVVM

随着20世纪初web的崛起,HTML跟JS这样标记语言+程序语言的组合模式开始变得令人注目。逐渐推出的Flex、Sliverlight、QT、WPF、JSF、Cocoa等UI系统不约而同地选择了标记语言来描述界面。

在这样的架构中,View(或者说叫控件,不但是从依赖关系上跟程序的其他部件解耦,而且从语言上跟其它部分隔离开来。

标记语言的好处是,它可以由非专业的程序员产生,通过工具或者经过简单培训,一些设计师可以直接产生用标记语言描述的UI。想要突破这个限制使得View跟其它部分异常耦合可能性也更低。

然而这样的系统架构中,MVC和MVP模式已经不能很好地适用了。微软架构师John Gossman在WPF的XAML模式推出的同时,提出了MVVM的概念。

WPF得MVVM正式说明了它的View的概念跟MVC中的View的概念的区别。这里简单画了一下:


在MVVM模式中,数据绑定是最重要的概念,在MVC和MVP中的View和Model的互相通讯,被以双向绑定的方式替代,这进一步把逻辑代码变成了声明模式。

结语

从经典MVC到MVVM,UI架构经过数次重大变迁,一些概念也在不断变化,架构和底层环境互相影响、适配,我认为时至今日,经典MVC已经不再是UI架构的正常选项。

更糟糕的是,今天无数经过演绎的MVC实现(如backbone)和科普文,要么是原本作者概念已经很混乱,掺杂私货,要么为了适配现代的标记语言和控件模式,自己修改了经典MVC中的一些概念和耦合关系。实际上今天MVC已经没法作为一种交流的标准词汇了。

写此文,希望大家能了解些历史上的发展历程,莫被不严谨的文章误导。(责编:陈秋歌)

原文来自:寒泉的微博文章

VB用ActiveX Control Pad VB用API函数改进ListView 控件的显示效果 用VB6.0中文版进行DHTML程序开发 用VB编写标准CGI程序 用VB编写留言板 用VB播放FLASH动画 用VB开发进程管理软件 VB用WinSock设计Chat程序 运用MSChart,生成统计图形-VB资料 向文本框等等控件的系统右键菜单里追加自己定义的菜单-VB资料 在VB中用定时控件实现长定时操作 在Visual Basic中,在GotFocus事件中快速选定文本 在程序中注册和注销 OCX 控件 -VB资料 在运行时维护DBGRID的栏位宽度-VB资料 VB怎样使用VB开发基于Sybase的C/S软件 VB怎样在运行时动态生成多个相同的控件 直接编辑VB中网格控制项的两种方法 自制控件方面的有关知识-VB资料 Unicode vs Ansi -VB资料 VB 中调用 Word 拼写检查 VB4.0安装程序的汉化 VB中对字符串的处理及其扩展 把符串中的一子串替换为另一子串 -VB资料 把数字转成英文字-VB资料 翻转一个字符串-VB资料 混合字符串的长度 -VB资料 将阿拉伯数字转成中文字的程式 -VB资料 将包含有Null结尾的字符串转换为VB字符串 切分字符串-VB资料 清除字符串中指定的字符 -VB资料 VB如何取得计算机的所有字型? 有关B/S与三层结构的讨论!!!!请大家关注!!!!! 局域网内怎么样知道与某个已知ip地址的计算机通讯畅通? 框架问题 那位大哥有网站的规划书吗:)有分啊,还有钱啊:) arp表如何填? 过几天要去面试,我应该注意哪些地方呢? 我想得到大家的关于p2p的相关资料 Java 2核心技术 卷2到底买第四版好,还是刚出的第五版好呢!!! 用bcc5.5编译mysql程序的问题 打印问题 怎样将一个文本文件以二进制的形式显示 在ASP.NET中怎样使TEXTBOX中的文本垂直居中 用ODBC连ORACLE为什么表名前面多了表空间? 怎样将页面中下拉框的内容与数据库某列关联 请问广州市的朋友,哪儿有旺盛的二手电脑市场? 怎样在VB里用代码设置ACCESS数据库密码 为什么【select * from Topics [OrderBy 发表时间 desc]】和【...[OrderBy 发表时间 desc]】效果一样? 用SUN WTK2.0开发的程序在Nokia模拟器下可编译不可运行,请教 第一个不头晕者接分 杭州工作难找!!!! 如何修改tomcat 4.1.18的配置,使修改过的Servlet能够及时重新加载! edit的text读取 关于ocx的问题? 怎样将一个文本文件以二进制的形式显示 请大家帮我一下!! 怎么破解Email密码? 国内手机及PDA大都用的是哪个操作系统?Palm? 如何是MEMO中增加一行后光标保持在最后位置? vb.net怎样选定word中表格的某一行? ado+intraweb中如何调用coInitialize? 寻找最恶心的笑话 一些对未来的思索、问题,各位来谈谈 有谁知道用哪款打印机比较好呢? 关于类和接口设计问题 如何能把98 聯入2000 如何做一个后台管理-数据库备份程序 如果我用一个Winsock(index)控件数组。Winsock(1)、Winsock(2)同时调用一个延时函数会出什么问题吗? 已知表中字段ID的值,如何定位到这个字段? 谁知道为什么会出这种错误fatal error C1004: unexpected end of file found 小小问题,也有小小的分,不成敬意。 visio ,rose ,ERwin 他们各自的用途是什么,有什么区别呀? Oracle安装的问题——寻求帮忙!!!! 请问Crystal(水晶)报表如何对TextBox进行动态绑定字段? 如何设定mapx图层的颜色 对汇编的渴望! 谁有Asp做的网站?100分奉上! 都进来看看 vc新兵问函数调用菜鸟问题 紧急求救!!!! 谁有delphi关于ado编程 的资料啊(要详细一点的) TreeView的问题,很实在的问题。 英语翻译太宗令封德彝举贤…………………………安可诬一世之人 “青青子衿,悠悠我心”内涵? 关于物候的诗句、谚语、俗语、歇后语、成语各5个(诗句要有出处作者及朝代最好是些常见的 求烤鱼的做法 配方! 爱直至成伤 之后就是永远 在Na2CO3和Na2SO4混合物中加入m克水后,完全溶解,再向所得溶液中加入50克稀硫酸恰好完全反应,产生4.4克气体,得到100克21.3%的溶液.回答:(1)m的值是--------- 英语翻译因为自己用字典翻很不通顺 想找厉害的人帮忙Before the presentation,it is vital to develop a marketing strategy for your baseball products.The focus of your marketing strategy should indicate that your products and servic 爱直至成伤就是永远, 让我拿什么报答你 求古诗"厌"字的解释 破釜沉舟这个成语出自哪个战征? 在一杯盛有11.4g Na2CO3和Na2SO4组成的固体混合物,加94g水溶解 制成溶液 向其中逐渐滴加溶质质量分数为20%的稀硫酸 放出气体的总质量与滴加入稀硫酸的质量关系曲线如右图所示当滴加了49g稀硫 独坐敬亭山字词解释 破釜沉舟 这个成语出于哪次战争? 我是女生 我暗恋一个男同事 他也是我的指导老师如果转正了 我怎么报答他? 在离子反应方程式中,能够拆分的化合物必须是电解质吗? 第2题,为什么? 向20g 硫酸钠和碳酸钠的混合物中加入135.4g水,待固体全部溶解后,向所得溶液中滴加硫酸溶液,直到不再产生气体为止(假设气体全部逸出),共用去49 g质量分数为20%的硫酸溶液.求:⑴生成二氧 hcl在离子反应方程式中中为什可以拆,hcl不是强电解质吗 古诗文中含“客”字的诗句,最好是末尾一个字是“客”,其余的也可以古诗文中含“客”“君”“帝”字的诗句,最好是末尾一个字是“客”“君”“帝”,其余的也可以 我拿什么报答你 汽油跟双氧水混合(我知道不互溶) 然后燃烧 会爆炸吗双氧水加热分解 产生更多的氧气 汽油燃烧更加充分 会使汽车出现危险么双氧水浓度低呢 客有好佛者,每与人论道理,必以其说驾之,欣欣然自以为有独得焉.出自于哪一篇文言文 求啦,会报答你的, 独坐敬亭山的意思要简单的. 向氢硫酸中加入什么物质能使PH减小往氢硫酸中加入氧气,氯气,二氧化硫,硫酸铜什么能使PH减小 求以下几篇高中语文古文古诗考试常会考到几句重点句子,零时抱下佛脚谢谢《指南录后续》,《五人墓碑记》,《离骚》,《烛之武退秦师》,《谏太宗十思疏》. 《独坐敬亭山》题目的意思是什么?我要的是题目的意思 谁有《〈独坐敬亭山〉》的全文, 青青子衿,悠悠我心是什么意思?熟知,但不太理解. "何以解忧, 往见王曰:“今者臣来,见人于大行.方北面而持其驾,告臣曰:“我欲之楚.”臣曰:“ 青青子衿悠悠我心是什么意思啊? 一年中国产多少斤大米,准确量! PH=4的盐酸稀释后,溶液中所有离子的浓度 3、在373 K时,把0.5 mol N2O4气体通入体积为5L的真空密闭容器中,立即出现棕色,反应进行到2 s时,浓度为0.02 mol/L,在60 s时,体系已达到平衡,此时容器内压强为开始时的1.6倍,下列说法正确的是( ).A. “何以解忧,唯有杜康”出自哪里? 河流弯道造成的横向环流和科氏力造成的横向环流相同或相反的结果如何? 破釜沉舟这个成语出于哪次战争 学奕的意思 河流的环流会引起什么 5、在一密闭的容器中,将一定量的NH3加热使其发生分解反应:2NH3(g)== N2(g)+3H2(g),当达到平衡时,测得25%的NH3分解,此时容器内的压强是原来的( ).A、1.125倍 B、1.25倍 C、1.375倍 D、1.50 过氧化氢不支持燃烧吗 为什么地转偏向力,会促使台风发展成气旋式环流和气流混合? 8、在一定体积的密闭容器中放入3L气体R和5L气体Q,在一定条件下发生反应:2R(g)+5Q(g)== 4X(g)+nY(g),反应完全后,容器温度不变,混合气体的压强是原来的87.5%,则化学方程式中的n值是 过氧化氢的脱脂棉加水为什么会燃烧 把镁条投入到盛有盐酸的敞口容器里,产生H2的速率可由右图表示①盐酸的浓度;②镁条的表面积;③溶液的温度;④Cl-的浓度.影响反应速率的因素是()我想问问1,盐酸浓度增加了吗? 破釜沉舟这个成语出自哪次战争. 过氧化氢燃烧 方程式 问下《独坐敬亭山》的意思 简要介绍左传和春秋的关系 独坐敬亭山 的意思是什么 将Mg条投入盛有稀HCl的容器里,产生H2的速率与下列因素:①盐酸浓度②温度③镁条 青青子衿,悠悠我心 《独坐敬亭山》独 的意思 青青子衿,悠悠我心表达的是什么意思? 在括号里填上于成语、歇后语相关的人物洛阳纸兵( ),图穷匕见( ),乐不思蜀( ), 很想知道其言之意 “爱直至成伤,之后,就是永远.出自[[谈谈心恋恋爱]]的一句含义深刻的话, 关于四大名著的歇后语 成语 作者(朝代) 韩国总统朴槿惠巴黎会见联合国教科文组阿富汗总统批评美无人机炸死巴塔头目时日本一司机醉酒驾车连撞5名女中学生后英国三百余名议员被指仍挪公款用于日常埃及前总统穆尔西即将受审 罪名成立或印度将发射火星探测器 舆论对印度太空印尼组织攻击澳大利亚百家网站 抗议澳杨洁篪会见英国客人新加坡用不粘漆对付小广告埃及审判穆尔西或酿新一轮冲突印度东北部发生袭击事件7人死亡布宜诺斯艾利斯摄影展点燃阿根廷人摄影布宜诺斯艾利斯摄影展点燃阿根廷人摄影澳维州公租房房租欠费飙升 议员归咎政泰国民调显示超半数受访民众反对特赦法中国富豪被指乘私人飞机赴澳 花1.1法国记者马里遇害 法前部长呼吁法国迅一名韩国女游客在澳大利亚遭两少年性侵日本第26号台风给伊豆大岛带来11万美国称不会考虑赦免斯诺登 促其回国受日本前首相小泉坚定反核电路线 再次公贵州省今年1至10月服务业市场活力明受冷空气影响 贵阳下周一或有雨夹雪《贵州省公民民族成份登记管理实施办法婚姻可以找,爱情只能等小型SUV又添丁,这次还是比空间为什么德国和美国都在放弃学前教育?这样劣质的护眼灯,比台灯更伤孩子的眼在应该奋斗的年纪,千万别选择安逸周四股市\"机构预测明日大盘走势\"药检错过圣诞活动,德赫亚怒了!厄齐尔:离开皇马是正确的抉择蒂亚戈:我的续约和瓜帅没关系游客在印尼拍下老人吃生肉的一幕 真的玩了三十年美元骗局,中国如今逃脱了美原油(WTI)和布伦特原油的区别是分享你的精彩生活 - 照片圈 #iO路痴的梦魇? - 顺路 #Andro有生命迹象!这些证据表明火星适合居住外媒盘点2015年最佳航拍图 包括中12-23收盘 周四行情走势推敲预演DIF与MACD不得不说的秘密,不看
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘