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

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

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

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

Chrome 27来了:页面加载快5% 可同步数据到Google Drive 微软发布新一代游戏主机Xbox One 搭配全新Kinect 2.0体感系统 Unity游戏引擎向iOS与Android开发者免费 Twitter获“下拉刷新”专利 开发者仍可自由使用 复杂产品的响应式设计【流程篇】 使用Javassist库为Bytecode Instrumentation开发JVM Agent 内容解析创业公司Stremor推出4款API 2013中国云计算榜单之三:174家云应用服务商,繁花似锦! 盘点各大云服务提供商:麦当劳=AWS,汉堡王=? BlackBerry Jam亚洲开发者大会9月将在香港开幕 把服务器搬进来:Splashtop在中国搭建Bridging Cloud Web框架全对比第五期 新增Windows环境 前Tumblr首席开发者回忆录:一个人也能开发出好产品 测试者和开发者,为何我们不能友好地相处? 讲师秀之11:何刚谈京东的云机遇 讲师秀之10:武汉大学张焕国教授,可信计算是云计算之成败关键 【上海直播】Windows Azure+世纪互联:中国云计算“烈火烹油” 最新版Chrome浏览器推出全新语音搜索功能 惠普第二财季净利润同比下滑32% PC和服务器销售不佳 讲师秀之11:网易汪源的成长故事 PPT集萃(三):六位国内技术大牛分享巨型平台的打造与应用 聚焦全球移动市场:创新以色列 科技巨头的倾慕之地 Android版Chrome 27浏览器正式上架 机器人——数据中心的新“网管” George Chu:在雅虎打造真正的工程师文化 2013,303+家中国云计算企业的“生态系统”之梦! 高访问量Web应用跨云端迁移的原因:权限和易用性 Web应用开发者福音 Chrome 28新增丰富通知中心功能 帷千兰旭:推广渠道鱼龙混杂,开发者请小心 关于IE 10 你应该知道的6件事 Spring Framework 4.0M1发布,支持JDK 8、Java EE 7 好郁悶啊﹐大家幫幫我﹗ jsp中的select VC中如何打包 在文本中输入,在下拉框中动态显示,大家多帮忙! 寻找算法!! 参与有分了!! 各位大哥,有关软件测试的好书或好的网站能给小妹介绍一下么? 谢谢各位先!! 学习打不起精神.也不刻苦.天天玩,我看我要完蛋了. 软件发布,KindDiary日记软件 PowerBuilder 中Datawindow和Report的本质区别是什么,什么时候该用Report? MEMO字段在SQLSERVER里应为什么类型? 在vc++中client和server端的socket连接断掉了,server端如何能够立刻就知道,而不需server端send的时侯才发觉。 学习c++,到底要看那些方面的书?我现在在看vc++技术内幕,essential c++,effective c++,大家说还应该看什么书? 在VC下使用ODBC绑定时间数据时的问题的解决! 如何动态更改主窗口的菜单? asp编程主题显示,若是汉字则为前15个字,若是字符则前25个,怎么编码?谢谢! 用VBA如何去读服务器上的DOC文档? 一个小而急手的问题 请问哪里有检测IP包的软件? 从网上邻居连接nt时在小窗口中输入用户名和口令的过程如何在程序中实现? 请问:wise的注册吗怎么设置?偶在注册码是不是在第四步--〉对话框--〉注册信息/序列号里,添加了一个编辑文本,但里面就不知道该怎么版了 //牛虻 java applet怎样存取本地文件?我没有更多的分,但我尽己所能 请问:怎么用java执行web页中的javascript脚本? 请问:如何给分?急! 调用动态链结库的错误(BCB调VC的动态链结库)! 兄弟们,ExpressBars 4.1 那里有下的。 请问连接adoconnection的问题? 请大家谈谈自己的学习经验!!现在很多技术,很多书,有些人说:你应该看什么什么书,说了一大堆。我都晕了,不知道自己应该掌握什么? KindDiary日记软件 我想买一块视频采集卡,可否给点意见!!!!! 如何获得对话框中莫个控件地句柄 奇文共欣赏,帐号封存,6个月后再见! WIN200 SERVER中做WIN98无盘工作站的方法? 大虾,请问??? 怎样让一个确定表和一个非确定表建立联系? TC下gettext()的用法问题! 怎样使程序最小化时放到右下角去? 在编辑状态下,将DBGrid记录行内容拖到TreeView节点中去,急? 请教各位怎样使用netbeui协议实现Chat功能 小弟是初学ASP,在想自学的愿头下,不知道从何下手,装了PWS软件解释不了ASP代码。赐教! 短信二次开发包 for 诺基亚,感兴趣者请进。。。。 通过MCSD的考试是多看教材呢,还是多做习题库?我还听说多看MSDN也很有帮助. 给几封VC学习的好文章!自己写的最好! 在数据库中追加字段,网络版和单机版有何不同 override与overload的区别? 网络构架 如何在窗体中使用GIF画? main(String[] args)args传的是什么参,请举例说明 用jb5做oracle的CMP程序调试需要首先在WEBLOGIC CONSOLE设置连接池吗? 网站构架 哪位知道哪儿有类似OICQ的分组控件(也就是OutLook风格的) 如何用Delphi编程来获取outlook的邮件列表 某项工作,甲单独做4天完成,乙单独做6天完成,若甲先做一天,然后甲乙共同完成此项工作……某项工作,甲单独做4天完成,乙单独做6天完成,若甲先做一天,然后甲乙共同完成此项工作,若甲一共做 一工作,甲单独完成需要15天,乙需要12天.现在甲先单独做一天,接着乙单独做四天,剩下的工作由甲乙二人合作.问剩下的工作两人合作多少天可以完成全部?列方程,说明原因 有一件工作,50人去做要4天完成,现在计划栽掉30人并且如期完成工作任务,每天每人要干原来多少人的工作才能完成? 电导率单位Ms/cm,10s 与μs/cm如何换算 1kgf=多少N 我在百事可乐做业务然后不干了!现在都离职5个月了还没开工资?给打电话就说没批下来呢!求办法 银行卡定活两便存款能从自动取款机取款吗?其实现在网上银行和手机银行都挺方便的是不是卡里可以不留有活期,用的时候再转是不是就行了?平时存定期是不是还多得点利息. 谁知道1kgf=多少N (数学题)有一件工作,50人去做要4天完成,现在计划裁掉30人并且如期完成工作任务,每天每人要干原来多少人的 比10千克少2/5千克是多少千克,多少元增加30%后是52元. 人正常眼睛观察距离为_____________,最佳距离为________CM. S M 是啥意思? 一个密度为0.5×10的三次方千克每立方米,边长为0.2米的实心正方体放置在水平地面上,则该物体的质量是多少千克?它对地面的压力大小是多少牛?对地面的压强是多少帕?(g取10N每千克) 边长为a,密度为ρ的某正方体,放在水平桌面上,则它对水平桌面的压强__可能大于 ρga___为什么? N/m m^2-mm/s是什么单位, 边长为0.2米的实心正方体,密度为0.1乘10的3次方,质量为多少 一个数的50%与70%的60%一样多,这个数是( 钢管kg和m如何换算拜托各位大神各种直径的钢管每米等于多少公斤 边长为10厘米的实心正方体它的密度为0.6乘以十的三次方静止在装有足量水的容器,且上下底面与水平面平行求木块的体积,水对木块底下的压强求木块在水中的体积,和水对木块底下的压强 一个数的50%与70的60%样多这个数是多少 某钢瓶内所装氧气的密度为8千克每立方米,一次焊电用去其中的四分之一,则瓶内剩余的密度为____? 1.一项工程,甲做需8天完成,乙做需10天完成.甲的工作效率比乙的工作效率高百分之几? 1/3,150%,1,3/4,60%,50%,3/7,37.5%的规律是 144-x=2(54+x)怎么运算?请说明基本原理及其公式好吗谢谢 江森有8000元钱如果按整存整取存入5年5年后它可以从银行里支取多少钱?如果按定活两便存入5年相比整存整取他要少得多少利息?速度我我我我我我我急!11!11111!1a1快1!整存整取3.60百分之定活两 320mm等于多少cm即系有没普通键盘甘长啊? 12分之5和20分之7 ( )分之( )<( )分之( ) 我是这样想的:( ) 20千克比()千克少20% 37000mm等于多少cm?我不要公式, 7分之5和12分之7,哪个大? 2008年12月30日存定活两便5000元,2009.3月31日取,利息是多少 请向400mm等于多少cm 12分之5大于20分之7怎么解释 20千克比()少20%急 190mm等于多少cm 12分之5和20分之7谁最大,我是怎么想的 25之12,125分之76谁最大,我是怎么想的 一个物体重49N,体积为5x10负五次方m³,把它放入水中静止时收到的浮力是 cm等于多少mm Kg/cm^-3等于Kg/cm^3吗 测得苹果浸入水中的体积为1.2×10-4次方m³,求苹果受到的浮力大小?g=10n/kg 一项工程甲独做12天完成乙独做15天完成.现在甲工作四天,乙工作三天,共完成这项工程的多少? (一个居民小区计划用40名工人花两周的时间完成煤气管道的铺设人物.他们工作了2天后,又增加了20名,若每工人的工作效率相同,他们可以提前几天完工. 换算;7.3m=几cm=几微米=几纳米 12m/s=几km/h=几m/min 1g/cm³=( )kg/m³ 甲、乙两工人同时接受一批生产任务,开始工作时,甲先花去2.5小时改装机器,以提高工作效率,因此前4小时结束时统计甲比乙少做400个零件,继续工作4小时后,总计甲反比乙多做4200个零件.问这一 明明家有二万元钱想存五年定期,现在五年期整存整取定期存款的年利率为3.60%五年后,实际取回的本息时多少元 ()-0.4×()=0.54,怎样计算?请说明基本原理及其公式好吗谢谢 请最权威的老师解答好吗?它说1倍的括号减去0.4倍,是不是说一个括号就是1倍,2个括号就是2倍,3个括号就是就是3倍.请说明基本原 一工程原计划要270个工人诺干天完成现只要200个工人由于工作效率提高50%结果比原计划提前十天完成求原计划工作的天数 答对了 2011年3月1日存人1万元定活两便存款,于2011年8月4号,2011年9月15号和2012年6月16号取出分别能得多少利息3个月利率为3.33% 半年为3.78% 一年为4.14% 最好要有过程 某钢瓶内所装氧气的密度为8KG/M的3次方,若在某天的气焊中用去其质量的1/4,则瓶内剩余氧气的密度是A. 8KG/M的3次方 B.6KG/M的3次方 C 4KG/M的3次方 D.2KG/M的3次方原因是什么?谢谢各位 请问49.5+4×49.5-3×4.95=99,如果把它写成乘法分配律怎么写?请说明基本原理及其公式好吗谢谢?请用通俗易懂 1mm等于多少cm? ():()=5分之4=():10=12/()=20/()( ):( )=5分之4=( ):10=12/()=20/( ) 5、10、20、35、()、80 某项工作甲独做需要4天完成,乙单独做要6天完成,若甲先做1天,然后甲乙共同完成此项工作,问甲一共做了多少请把解题过程分析出来 银行规定定活两便存款按同档次定期存款利率打六折计算,现有定活两便存款4000元,存了六个月,而定期存款六个月的月利率为0.1725%,那么这项定活两便存款可得本利和多少元?若到期时,所的利 ()÷20=4:5=()分之12=()% 某项工作甲单独做需要4天完成,乙单独做需要6天完成,若甲先做1天,然后甲乙共同某项工作甲单独做需要4天完成,乙单独做需要6天完成,若甲先做1天,然后甲乙共同完成此项工作,设甲共做 一件工作,甲单独做需要15天完成,乙单独做需要12天完成,现在甲先单独做1天,接着已有单独做4天,剩下的工作由甲乙两人合作,问合作多少天可以完成全部工作任务(一元一次方程,最好给解释) ()-0.4×()=0.54,怎样计算?请说明基本原理及其公式好吗谢谢 请最权威的老师解答好吗?如果括号()-0.4×()=0.54,怎样计算?请说明基本原理及其公式好吗谢谢 请最权威的老师解答好吗?如
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn