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

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

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

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

微软最终加入OCP阵营,开源其云服务器设计 Docker:集装箱式“运输”在软件上的实现 《近匠》第09期:ShareSDK——专注社交分享工具 苹果车载iOS系统iOS in the Car界面被曝光 支撑过万亿音乐事件的数据分析系统 Facebook运维内幕曝光:一人管理2万台服务器 《近匠》第10期:友盟——开发服务平台化 LinkedIn耗资1.2亿收购数据驱动招聘服务公司Bright 谷歌推视频会议硬件产品Chromebox 基于Chrome OS 文件上传组件导致Apache DoS安全漏洞 EA,你是来拉仇恨的吗? Beep:前Google员工打造的流媒体音乐控制器 有利于开发App的5款天气预测API 七问微软新CEO,你准备好了吗? Hadoop虽然强大,但不是万能的 Flappy Bird:萌贱游戏日进斗金的烦恼 IT技术支持:索契冬奥会背后的无名英雄 简单10招,让你的云计算事业锦上添花 微软、谷歌及苹果从哪赚钱? 高大上!5.5寸屏幕的iPhone 6概念机来袭 苹果CEO Tim Cook:我们是一家快速发展的公司 2014年美国大学生数学建模竞赛翻译及建模思路 围观龙虎斗:谷歌GCE vs. 亚马逊AWS,要做9件事 未来编程趋势的12个猜想 命令行永存... IBM发布SmartCloud数据虚拟化服务 嚓嚓嚓嚓:虐心的Flappy Bird今日终于下架 Flappy Bird不再“飞翔”后,还剩下什么? 索尼抛售PC业务:内忧外患导致全面退出 慧正通软技术副总裁:工作流引擎厂商的生存之道 TIOBE 2014年2月编程语言排行榜:VB.NET首次进入TOP 10 斯诺登仅用“网络爬虫”软件获取机密文件 WIN2000和LINUX与PHP的搭配的困惑 继续帮忙!!! 菜鸟:使用adapter对dataset fill()时提示出错,不知道什么原因 入门问题 CString的find函数 哪位高手能解决Visual C++ Extensions for ADO之AddNew(&rs)的问题?(可惜无分可赠!!!) 在一个对话框中怎么得到另外一个对话框的某个控件的指针? 谁有delphi连接sql server的技术资料文章 谁有delphi6网络编程一书的代码???????????? 超级简单的问题!答了就给分!快快来! 谁有《delphi6网络编程》一书的原代码??????????? AMD xp cpu的性能是怎么样的 请大家帮忙,一个LPTCSTR的数据问题 散分,散分,高手在哪?新买的165上网卡无法拨号上网,救命,喔,救命 请问一个问题。 赛扬1.7G,256M内存打“传奇”有点卡!!!!!!!!帮我,快 如何 将数字字符串 转换为整数? 千万火急----如何把从组件中取的记录集在VB中赋给FPSpread控件? 探讨方法 有些不懂,请帮帮忙,有分。 大哥哥进来看看小妹这个问题好吗? socket高手请进!可以解决吗? java 的帮助文件哪儿可以找到? 很多页面都链接到同一页面,在返回时如何判断返回到原先的页面?(不用histroy.back())? jbuilder9中开发web services,import wsdl文件出错 很多页面都链接到同一页面,在返回时如何判断返回到原先的页面?(不用histroy.back()) 要调用某个DLL中函数,应如何申明? 有问题急? jb8中类找不到了??? 哪位可以告诉我在哪里可以改动网论坛首页上方的banner广告的路径? 救命啊!!为什么在DBASE4里执行“ALTER TABLE TableName ADD COLUMN AAA C(10)”发生异常?!,该语句不兼容啊! 如果当初你没遇到Java,你会选择什么 欢迎参加微软新闻组 & Diyinside Windows User Group离线技术沙龙 访问access数据库怎么不能查日期? Dll问题! 这个异常是什么回事? 小小问题。。。 為深麼我的Wizard模式的PreportyPage的OnWizardNext函數實現後,不能出現第二個頁面,how to. 那一个有的高程模拟试题 简单问题,请指点 在线等待求助:win2000缠人问题 ****郁闷,从来没有遇到这样的问题!!!为什么报表显示的时候会闪一下!而且显示出来后其窗体还没有自动关闭!******** 请大家发表一下自己的意见 问一个消息? 欢迎参加微软新闻组 & Diyinside Windows User Group离线技术沙龙 求助:chart使用Lineseries颜色问题 ?在C#的如何运用线程 关于安装Websphere Portal的问题。希望大家帮我解决一下。 非法字符的问题 转让一优派PT813 21寸显示器(适合专业作图) 北京 一个小问题,还请多帮忙!谢谢!! 羽绒衣洗后老下雨,在家晾了三天后有点臭味了.再哄干也有味道.怎么办? 如何判断是否会下雨 如何更快的提高 考博英语 水平? distal pulp是什么意思 澳洲的汽油中“PULP”是什么意思? 找一首歌,结尾一直重复着 it's all right ,和 no one's got it all,是女的唱的结尾一直重复着 it's all right ,和 no one's got it all,最后两句歌词是 all ,all,是女生唱的,外国的,在莎漠的五百天 这电影里 听见 关于帮写一份暑假兼职幼教的英语作文(英语看清),请用您的英语语言赋予一下,而不是汉译英给我弄一下内容:我暑假兼职,在网站上看到一则关于暑假兼职的工作,就去应聘,老板对我的面 这句话的语法分析.common as light is loved .love + ed 不是被动的意思吗? 如何考博 我要考博吗? 我想考博士后要几年 聚焦去美国化:是否为世界多极化发展的2名百岁抗战老兵60年后再相逢 多方北京数万重卡深夜进城 排污量相当于百万达称楼市调控方向偏差 应保证居者有尿毒症少年进京求医续:母亲将提交捐肾华盛顿举行抗议活动要求停止“棱镜式”学者质疑机关事业单位建职业年金 或制老伯拍摄监督公车8年频遭恐吓 出现反北京药店卖奶粉首日调查:价格未见便宜长沙天心区将女教师调到拆迁指挥部 劝德国巴西牵头起草联大决议 呼吁保障网互相叫早,晨读晨跑好电影还是好生意?一起寻找夏日精彩全球视野集中宣判省高院开通浙法公开网公平底线不容突破之江工商开展世界级文化名片网络文学绿色写作精神到处丹青老助我成仙炽袭美食猎人苍月奇劫血龙战神人皇之冕通天道途网游之盗贼神话魔王传凡人修仙实录邪恶力量长康路夜市旅游布帕壤寺旅游三王纪念碑旅游盼道寺旅游兰昌寺旅游清迈古城旅游素贴山双龙寺旅游瞿秋白纪念馆旅游东坡公园旅游秦邦宪故居旅游王选事迹陈列馆旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘