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

谈谈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如何在函数中传递数量不定的参数? VB使用 kb_event 函数模拟键盘操作 VB使用API获取颜色 VB使用标签控件调出浏览器 VB使用调用外部程序函数实现API函数高级功能 未公开API函数揭秘——通用对话框-VB资料 显示文件属性对话框-VB资料 VB用 API 打开打印对话框 VB用API函数改进ListView控件的显示效果 VB用API函数控制光驱的开关 VB用注册表保存数据(VB函数篇) 有关Tray系统盒的VB API函数 在VB中调用API函数动态改变及恢复屏幕设置 在VB中控制Ctrl+Del+Alt键 在VB中使用API函数 (之二) 在VB中使用API函数 (之三) 在VB中使用API函数 (之四) 在VB中使用API函数 (之五) 在VB中使用API函数 (之一) 在VB中用API实现多媒体 VB怎样用VB在应用程序中调用API VB怎样在DELPHI中使用API函数 指定文件夹-VB资料 VB5中注册控件三法 Bug:维护 Internet Transfer Control 之 Username 及 Pass VB对低层硬件访问控制 HitTest的妙用 -VB资料 ListBox项的控制-VB资料 VB 6.0中类聚集关系的实现 VB6编程中如何获取硬盘分区信息 VB的坐标系统综述 刚开始接触.net 求购程序,请进. 求购程序 求购程序 推荐一些适合初学者看的书吧 一家位于Montreal, Canada的公司,求购一个程序 如何保存UNICODE的字符串到硬盘上 如何将HTML文本直接显示在CppWebBrowser中?(不使用临时表) 如何保存UNICODE的字符串到硬盘上 redhat第4第5两个iso文件是做什么的 关于jsp做客户端调用ejb的问题?????望各位兄弟们救救我吧!!!!! COOL!将所有菜单设置为半透明的代码(只适用于WIN2000以下版本) 请问谁知道如何用jakarta-jmeter进行压力测试? 如何判断文件夹是否存在 在Win2K Server安装Oracle817时,没有安装数据库,后在创建数据库时出现"ORA-12560:TNS:协议适配器错误"... 请教.net服务器问题 解决这个问题,给你200分!!!!!!!!!!(回头追加给你!) 我是初学者,请问.net framework先进性在哪里? 有谁试过用JAVA编FTP软件? 很简单的listBox问题,HELP 今年大四,现在找工作,求助,我怎么样………UP有分。 寻找!! IE的文本输入框,输入一字符会联想,请问怎样去掉这个联想?(Win2K) 哪位大俠能賜教 哪位大俠能賜教 你们说VC到底要学些什么?VC更偏底层,总做这种纯技术总也做不完。迷茫~~~ 请问,在Oracle里建trigger是不是有什么说法呢?一个正常的不能在正常的trigger在Oracle里运行也说compilation errors. 请教:提取字符串里每个字符首字母,谢谢!!! aa模块代码 关于强烈要求恢复可用分增长、可用分转移、非技术区得分转换为可用分的建议!! SOS:如何找到窗口中多个进程其中我所需要的那一个? SOS:如何找到窗口中多个进程其中我所需要的那一个? 笑的人再发几个 query1.next是将指针移向下一条,啊向上条一记录是用什么命令呢? 对话框中使用工具栏如何进行更新? 关于文件指针的问题 ASP中SELECT 查询中前几条的查询如:TOP 的用法哪位讲解一下. 如何查找到两个不同数窗的不同数据 诚招ASP老师一名(请版主不要删) 提问!(欢迎讨论) 停电重启 原来已经编译通过的程序,再重新编译竟然出现了150个错误 一个很奇怪的想法 请问怎么转换以空格为分割符的文本文件转换为以TAB为分割符的文本文件?急! WIN2000下怎么设CLASSPATH (散分):BDE,ADO,dbExpress的前景如何? 关于VB调用asp的问题 如何关闭office2000文件优化器? 怎么知道combobox选中的序号如combobox.item[i]中的i 怎么知道一张图片的有效宽度及长度 浙大1082的几个疑问 系统快成功了,有个大问题 问号是开启任何一门科学的钥匙的作者在什么地方的什么人物什么学家 不能用汉字制作电脑系统,为什么不能用汉语注音符号做电脑系统呢?比如VB语言的“input”可以用“ㄕㄨˉㄖㄨˋ”(就是输入的注音符号,拼音‘shū rù’翻译过来就是了) PS和AI实质上的区别是什么.为什么PS那么普遍的使用.AI的使用面很小.他们有什么区别. 问号是开启任何一门科学的钥匙.作者巴尔扎克的国家在哪? 续写句子 书是钥匙,能开启智慧之门; 书是良药,__________; 书是_____,__________;在_____ 填 我的书屋,我的梦 .400字作文 交通运输对社会经济发展的作用有哪些 左边一个米右边一个少是什么字 求,写压岁钱的作文 求几个表示孤独的英文句子 左边一个米字 右边一个甚字 是什么字 骑马与砍杀和骑马与砍杀战团哪个好玩,有什么不同? 能不能不让我孤单翻译成英语句子 This shirt is cheaper ____ that one.填上合适的单词. 毛泽东的座车变迁史的第2题怎么写 中国社会的主要矛盾是人民日益增长的物质和文化的需要同落后生产力之间的矛盾为什么会出现这个现象?我想把这个问题展开来说! 一个者字下面一个羽字读什么一个者字下面一个羽字读什么 英语翻译当你还是很小的时候.妈妈花了很多时间教你用勺子、用筷子,教你怎麼吃饭.教你穿衣服、系鞋带、扣扣子.教你洗脸,梳头发.我爱我的妈妈!你在渐渐长大,而妈妈渐渐的老了有一天 当 《论语》警句摘录卡 表事拼搏的词 毛泽东的座车变迁史练习题的第1小题怎么写? 你认为中国古典诗词传达给现代人的是什么? 请问有那个做电线电缆外贸的高手可以告诉我电线,电缆的HS编码和其他相关信息啊我想知道这个编码那里有查找,还有相关的退税率,等等相关的信息.我们的产品主要是低压电力电缆,电线.比 食盐在20摄氏度,100摄氏度时的为36克,40克.若将100克水在100摄氏度时制成饱和溶液,溶解食盐——克,从中析出食盐固体_克;若降降温后所得溶液保持20克,50克水,则析出食盐的质量分别为_克,_克 ..]Eric _____ his bicycle to the shop.A.rides B.ride C.is riding我选C,“标准答案”是A...应该选什么啊... “问号是开启任何门科学的钥匙”的作者是谁?包括作者的国家 韩国蔚山与美国底特律都是著名的汽车城,它们有何异同? 求教第36题,谢谢了! 曾经沧海难为水,除却巫山不是云这两句诗是啥意思 世界上纬度最高,跨经度最多大洲和大洋分别是?北冰洋和南极洲共同的特点? 36题答案是什么, 请教一下“曾经沧海难为水,除却巫山不是云.”这两句诗, 七年级上册历史的三次改革都起到了怎样的作用 第三十六题 X^2-4X=0(解方程) 左边一个月字旁,右边一个会是什么字? 人教版五年级上册数学练习二十五第9题怎么写一张边长4cm的正方形纸,从相邻两边的中点连一条线段,沿这条线段剪去一个角,剩下的面积是多少? 初三数学二次函数题求解答过程.(主要是想看看我做的对不对,特别是最后一问.)某商场购进一批单价为 20 元的日用品,销售一段时间后,为了获得更多利润,商场 决定提高销售价格.试销阶段 左边一个女子 右上边一个公下面是一个羽 这个字怎么读啊!急 光学传递函数是什么?定义? 带口成语有哪些 英语翻译麻烦翻一下(谢绝翻译器答案 ):"欢迎留下你的脚印"(就是欢迎你留言的意思) 光学传递函数的理论基础是什么 汉字翻译正确拼音 上面文字下面拼音再别康桥徐志摩轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩.那河畔的金柳,是夕阳中的新娘;波光里的艳影,在我的心头荡漾.软泥上的 英语翻译1.上课认真听讲2.课后认真完成作业3.考前认真复习4.有恒心,有毅力,敢于钻研5.遇到问题及时询问老师取得好成绩就这么简单! 1.The children are coming____the classroom.A.at B.out of C.on2.Whose father is a worker?____,I don't know.A.Excuse me B.Pardon C.Sorry有原因更好(为什么不选其他选这个) 问号是开启任何一门科学的钥匙 巴尔扎克他是什么国,什么家kuai kuai 人工智能与智能的定义和本质区别是什么? 扩散性百万亚瑟王满破什么意思? 问号是开启任何一门科学的钥匙. 巴尔扎克他是什么国是什么家,比方物理学家 英语翻译我所居住的地方是中国冬天最多雪的地方,但今年雪下的特别少.很多国家都拍了以A 为主角的电影 ,但是我觉得J扮演的最形象.我也十分欣赏J.谢绝翻译软件 百万亚瑟王满级的 切尔莉 经验会变多么?满破呢? 检查一下我做的对不对31、I was bad at English last term, I will try my best to learn it _D_____. A. from then on B. from last term C. from on D. from now on 32.—I think that China will win the World Cup one day. —I__A_____. The Chine 60摄氏度时,将30克硝酸钾溶于210克水中,该溶液中溶质的质量分数为---,若将该溶液平均分成三等份,则:(1)取第一份,温度升高到90℃,此时溶液溶质的质量分数为---.(2)取第二份,要使溶液的 [百万亚瑟王]谁能给我解释解释,为什么我丢了一张满破的7星卡 帮我检查一下我做的对不对-1 I called____you five times yesterday.Where are you?(at)2 It's too late to go to the pictures.Why don't we call the whole thing____?(out)3 We called____to him but he could not hear us.(out)4 I called____the post 上面一个羽字,下面一个佳字.是什么字拼音字母拼 槽钢,上海槽钢贸易公司, 恐怕像这样的黑色鞋子在两个月前就不流行了.用英文翻译 AI和PS的区别
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘