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

谈谈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已经没法作为一种交流的标准词汇了。

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

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

去除IE 10广告的两种方法 直接拿来用!最火前端开源项目(二) 工作变得简单又高效 试试这八个WebApp 移动周报:生于微信,疯狂猜图的推广经 DataTorrent 将数据分析速度从“实时”提升至“现在时” 华为FusionCube开启全球规模商用 黑暗架构:以最少时间完成系统升级并获客户认可的开发之道 Hadoop Summit 2013见闻:创业与Hadoop 2.0不可阻挡 Facebook的清洁能源改革——革命尚未成功,仍需努力 YARN或将成为Hadoop新发力点 主流编程语言属性一览(多图) 粉碎硬件复杂论:开发者不懂硬件运行的方式怎么可以?! 最新版Chrome OS加入Word和Excel编辑功能 直指微软 传诺基亚将购诺西全部股份,疑为出售手机业务做准备? 优秀技术领导者的修成之道 直接拿来用!最火前端开源项目(三) 第八届开源中国开源世界高峰论坛成功举办 曾经那些主流的API,而今风光已不再! Android 4.3本月9日亮相 新功能汇总 移动游戏的国际化运营技巧 Google的Janus与Facebook的McDipper:将闪存用于数据中心 拥抱开源还是坚守阵地:传统数据库供应商面临抉择 超棒的30款JS类库和工具 立场坚定:惠普仍然密谋回到智能手机市场 6月份浏览器份额:Chrome成市场份额增长最快浏览器 关于PHP的十大误解 你中了几个? 专访西电朱虎明:异构计算硬件架构呈现百花齐放 百家争鸣 GSMA行纪:各种神器、好玩的、好看的全搜罗 大数据初创企业WibiData将Hadoop“打包”,谷歌董事长施密特两次参投 赚钱不忘环保 苹果计划为数据中心兴建太阳能发电厂 深度解析:清理烂代码 怎么在Installshield中创建对话框,并操作ACCESS数据库? win2000server的管理员密码让人改了,怎么办呀! 太气愤了,帮帮我? 用BDE连接MS SQL SERVER,为什么运行后出现未知用户名或密码的错误? datagrid中能不能进行统计 如何编写“outlook”风格的界面 如何实现flash截图?我研究了好久也不明白,希高手指点!(在线等待) 程序调用的DLL 在delphi中,用ADO如何实现将SQL中多表导出到一个Access中? 无聊啊无聊 想考软工???? Socket奇怪的问题! foxpro中如何实现按一按钮启动word和excel,并且直接弹出打开文件对话框? 关于分级权限管理(300分) 紧急求救!!!!!!!! 客户端web服务是否需要别的控件支持 帮帮我,朋友们请进.... Datareport问题! [cclq]竞选斑主,附我的方针! 用VB编写自己的服务器端组件 DAO问题,CDaoRecordset::addnew()和CDaoQueryDef::Execute插入一条记录,哪个更快? 谁能解释一下这个比较模糊的问题?关于地图窗口HWND。 闲人免进!如何增加信誉分! 如何改变Mem控件中插入符的形状? 各位大虾有没有检测日期的合法性的JAVASCRIPT脚本啊 怎么在Installshield中创建对话框,并操作ACCESS数据库? 两个问题,关于struts中form的action如何传递一个变量?如何使用科学计数变成普通数值? 救落水美女注意事项 如何学习NOTES? 急!!急!!给多分呀!!! 寻在windows下安装bugzilla时缺少的两个文件。 菜鸟问题。。。。。。需大师回答啊 怎样由实例句柄得到传口句柄? 请问,VB的DataReport是否有支持套打的功能? 有关ant和struts的问题,急。 有人用Panorama来做自动化测试吗? 请问各位,如何用PHP来实现这个功能啊! 关于列换顺序的问题 请教用户帐户在不同域间移动 ? 代理问题? weblogic81 和jbuilder怎么配置, 得到小数点后指定长度数据?? Sql语句怎么写? 一个关于框架的问题! ASP+是不是就是asp的新版本,怎么才能运行? 关于管理权限的设计办法(急) 在线等!很菜的问题! 多条件查询的问题!谢谢! 我想申请斑竹!!! 请问不打包怎么用????? 如何动态使用DBChart控件 若点p到A,B两点距离相等,则p为AB的中点, #儿时疑惑#有“咬舌自尽”这句话,咬舌那会死吗? 唾液泡沫过多是什么病?嘴巴有时还有点臭 微苦 嘴里不停的有小泡泡产生 吐个不停 舌苔发白 女 20 16岁适合染头下列哪种颜色,(皮肤很白) 求与夏沫匹配的词语 要求冬开头 格式:冬X 一只老虎重360千克,一只河马的体重是3吨.老虎的体重是河马体重的几分之几? 潮湿的反义词语是什么 关于“靖郭君将城薛”的问题~靖郭君将城薛,客多以谏.靖郭君谓谒者无为客通.齐人有请者曰:“臣请三言而已矣!益一言,臣请烹.”靖郭君因见之.客趋而进曰:“海大鱼.”因反走.君曰:“客 女43岁 南极磷虾油软胶囊 我怀孕8周了,可以吃磷虾油吗?我怀孕8周了,可以吃磷虾油吗?性别:女年龄:43病情描述我怀孕8周了,可以吃磷虾油吗?发病时间:不清楚 我们人类真的和外星人有关系吗? 齐人说靖郭君中“海大鱼”有何喻意 “影子也高兴”地笑了.请说说影子笑的原因? 人类在未来二十年内将与智能外星人亲密接触!是真的?人类在未来的20年内真的能和外星人亲密接触吗? 的主旨是什么 急求! 为什么两块冰块之间加盐后并在一起,就粘住了要原理原理要具体一点,60个字以上,也不要太长 翻译::孟子的《墦间乞食》 磷虾油是什么做的? 已知一块板材的动力实验数据,如何用fft函数计算并画出频谱?现在数据只有每个时间t对应的数值,而不知道函数关系,怎么求啊fx=fft(x);fx=abs(fx(1:length(fx)/2));plot(fx)能给解释下每句具体的意思吗 英语翻译孟子的文章 我们用湿手去拿冻冰室里的食物时,手马上会被粘住,这是由于-----引起的,如果用力拉会损伤皮肤,解决的方法是迅速将水放在水中使___而脱离 靖郭君准备在封地修筑城防工事,门客多来劝往的原因是什么 墦间乞食 磷虾油是虾青素吗? 齐人用什么方法说服靖郭君 坚强的反义词是什么?艰难的反义词是什么? 如图,AC交BD于点O,AC=DB,AB=DC,求证:∠C=∠B 分辩的反义词是什么 一艘潜水艇在水中的高度是负六十五米,一条大鲨鱼在艇上方22米,这条大鲨鱼在的高度是多少米? 颜色状态:银白色固体硬度:较软密度:2.7克/立方厘米熔点:660.4度导电性:良好导热性:良好延展性:良好将该金属投入稀盐酸中,可产生大量的无色气体,是不是铝? Cl-、Na+、S2-、Al3+能否共存?为什么?如果不能,请问会发生什么反应,离子方程式是什么? 坚强反义词是什么 靖郭君将城薛 Na+ K+ S2- CL- 能大量共存吗? 假设海平面的高度为0米,海边一座山的高度是572米,一条大鲨鱼在水下45米处游动,一搜潜艇在鲨鱼下方35米处航行.请你用合适的数分别表示高山、鲨鱼和潜水艇的高度 靖郭君将城薛字词解释 Cl-、Na+、S2-、Fe3+能否共存?为什么?如果不能,请问会发生什么反应,离子方程式是什么? 描写苏联一搜潜艇下潜的越来越深,艇内压强吃不消了,连耳朵里都出血了,最后决定把生的希望留给一位医生的电影叫什么? 靖郭君将城薛原文中的“谏止三言”怎么理解,“靖郭亦纳谏,乃辍城薛”反映了什么问题?靖郭君将城薛①,客多以谏.靖郭君谓谒者:“无为客通”②.齐人有请者曰:“臣请三言而已矣③!益一 用哪个EXCEL函数公式能够方便的解决此问题?请教一下各位大侠,我想用EXCEL函数建立一个公式:分为钢化和不钢化两种(玻璃宽*玻璃高*数量/1000000),计算两种不同种类玻璃的面积. 写反义词:依赖-____;舒适-____. (浅沫)的反义词是什么 请帮助我解决一道有关函数对应法则的题目.已知f(x)的定义域是{1,2,3,},从集合{1,2,3,4,5}中选出3个数构成函数f(x)的值域,若f(3)≠3,则这样的函数f(x)共有多少个?希望知道的人可以帮我解解,因为我 自在的反义词 泡沫的近反义词泡沫(是名词)的近反义词是什么?(要名词) 越多越好 请用自己读过的三本书名组成一段话 如图,三角形是以AD所在的直线为对称轴的图形,∠BAD=22°,求∠ABC、∠CAD的度数 靖郭君将城薛与邹忌讽齐王纳谏有什么不同 请用自己读过的三本书名组一段话 这真是一场惊心动魄的拼搏作者为什么会发出这样的感慨?音乐第三次奏响了!场子里静的没有一丝声息.有一些女观众,索性用手捂住了眼睛.这真是一场惊心动魄的拼搏!当那摞碗剧烈地晃动起 焦虑的反义词是什么可怜的反义词 掩没无闻还是淹没无闻 繁荣的近义词是什么 繁荣的反义词、同义词 污水处理规模怎么分,何为中小规模污水处理,到底是以什么为标准来区分规模? 请用自己读过的三本书的书名组成一段简短的话 书名___ ___ ___ 简短的话___________ 风声雨声读书声,声声入耳.的下句是什么 齐人谏靖郭君城薛中的海大鱼什么意思? 谁能用周杰伦的歌名组成一段话要语意连贯,通顺,快点呗 A点和B点有4条线连接,分别长17.15.26.22厘米其中只有一条线段,问AB两点的距离有 齐人谏靖郭君城薛问题~原文 齐人谏靖郭君城薛(齐策)靖郭君将城薛,客多以谏.靖郭君谓谒者:「无为客通.」齐人有请者曰:「臣请三言而已矣.益一言,臣请烹!」靖郭君因见之.客趋而进曰: 下面这编讲 道隐于小成:道家认为自己所主张的大道被各家的小成所掩没 为什么老子讲被他们淹没是不是他们有点小成就 就自以为是 还有老子为什么讲大道废,有仁义 最好是能整编全部解 亚马孙热带雨林4年发现441个新物种外媒分析耶伦若就任美联储下任主席 面日本东电职员因短信骚扰女性被捕 称为韩要求美澄清是否窃听韩总统 在野党向法国央行行长:金融交易税构成巨大风险法国夫妇汽车行李箱内藏一岁女婴 警方奥巴马医保网站频出错 分析称或危及其美媒报道称美国已停止对默克尔的监听活男子强奸亲生女儿10年 总认为别人都韩要求美澄清是否窃听韩总统 在野党向美国窃听默克尔手机长达十多年 奥巴马美国窃听默克尔手机长达十多年 奥巴马日本天皇夫妇访问日水俣市 向水俣病纪浙江秀洲一工地发生坍塌导致多人被困温州14岁小驴友大峡谷失踪四个月遗骸百度理财支持首款产品上线 受网民热捧大师对话上海滩 首届童书展彰显国际范20余省区市今晨现雾霾天 冷空气驱散广州疾控中心:大气污染与呼吸疾病死亡中国提速收入分配制度改革 专家称国企第六届金光印艺大奖颁奖典礼在杭圆满落李冰冰素颜打包行李 穿睡衣抱玩偶搞怪天野之弥:很难就伊朗是否研发过核武器美军将于明年6月在波兰进行联合军演六安:住海心沙小区近一年 非机动车库恐怖!勇士四优势完胜96公牛 一绝技亲历者忆援越抗法:越军干部不带头冲中俄媒:俄外交部建议在土耳其的俄罗斯公教宗来了六安:明有小雨“串场” 气温小幅回升珠海市大学生慈善公益论坛|大学生力量Shall We Talk| 十一月托人办年检 被骗又受罚六安:路面结冰谨慎出行普京要求土耳其道歉赔偿遭回绝桑兰摔伤真相调查:教练未撤垫 还是第俄实施经济制裁回击土耳其 德媒:搞清欧联杯:锋霸进球造点利物浦逆转 与热欧联杯:锋霸进球造点利物浦逆转 与热库里被比作“NBA梅西” 萌神坦言是从远处所见:对话朱利安兼论他对先秦儒原节子:小津安二郎的缪斯
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘