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

谈谈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中不规则图形热点的实现 VB中任意旋转位图的实现 VB中实现图像特技 VB中随机图像的魅力 VB中位图旋转的实现 Visual Basic设计图形浏览器示例 捕捉屏幕图象 -VB资料 放置“透明”的图片-VB资料 分割图像的方法-VB资料 如何将整个画面暗下来,如同关机前一般-VB资料 VB获取桌面图象 简单介绍透明位图的实现方法 -VB资料 将图片「非重叠显示」填满整个表格视窗 -VB资料 将英文字母及阿拉伯数字旋转任意角度 -VB资料 将真彩色图像变为256色灰度(BIG5码):-VB资料 VB利用Image控件实现图形浏览程序 利用VB捕捉并保存屏幕图象 切割一个Container中的图片 -VB资料 VB如何改变桌面的图片? VB如何实现“百叶窗”的图形特效? VB如何实现霓虹灯效果 VB如何在VB中用API获得EXE文件图标并显示在Picture控件里 VB如何在VB中直接显示无格式256灰度级图像 VB如何在窗体中平铺图片? 三维字的实现 -VB资料 闪动窗口标题 -VB资料 闪烁的标题栏 -VB资料 实现画面的各种切换方法-VB资料 实现屏幕变暗的效果 -VB资料 实现图像切换效果 -VB资料 做过数据分析的高手请进。。。(我感觉很头疼的一个问题!) 共享Interent怎样实现? 请问绿色程序是如何制作的??? Windows API和C 请问怎样把form中的picture属性中的图片删除? 请看看这个问题? 中程书上的错误?(清华) 各位大虾过来看看,救救我啊! flash简单问题 已知IP,求计算机名 求备份方案,oracle 数据库! 求解決方案:怎樣在運行狀態下增加或取消文本輸入框的滾動條. 大家发表些看法! 各位 帮帮忙,关于答复文档的 如何获取手机中的短消息发送结果状态报告,需要懂一点手机短信的朋友 有没有办法去掉jre1.4下向JTextField输入中文时弹出来的那个恶心的输入窗口? 将web工程加到sourcesafe的问题,十万火急,帮忙解决一定给分,分数不够可以其他方式给。 在sqlserver中有字段类型为image,如何往该字段放图象?200分 基础问题 NT ,when boot ,can not find system 关于internet上的控件打包??????????????? 请各位高手帮忙解决!谢谢!! 谁能告诉我那几个网络论坛比较好 如何实现socket 的多线程 高手请这边来瞧瞧 如何在ODBC应用程序中使用CListView? excelapplication控件???教教我吧,我不知道为什么?很简单的。 关于internet上的控件打包??????????????? 谁知道autovuex.ocx 控件(可以显示CAD等图形)哪儿有下载??拒绝up 大家都用VC吧,这个怎么实现? 能否用变量的内容说明对象 在 广州那边招DELPHI程序员的公司多不多呀! 请问在网页里,图片在装载完前,显示的区域是一个小方框再扩成一个图像,是怎么做的? 如何在ODBC应用程序中使用CListView? 关于获取list控件值的问题!在线等候!谢谢! 请帮忙提供一点怎样学习Delphi的知识! fireworks4.0英文版关于动画的制作? 求租西三环,紫竹院,首师大,航天桥,花园村附近的一居,价位在1000左右 WORD问题 谁知道autovuex.ocx 控件(可以显示CAD等图形)哪儿有下载??拒绝up ●●●最恶心内容,谁看了谁吐,不信,试试看?! 如何从文本文件中读取数据? 怎样建立一个局域网? 高分那里有JBuilder7下载, 提供者都有分(每人5-20分) 请问如何让dbgrid支持多选? 桌面设置小问题? 调用embed 方法播放avi文件需要客户端安装相应软件么? 高分求教两个webbrowser控件问题。 哪里有1.4版的sun.*包的原码? 为什么我打印出来是乱码?打印预览是正确的中文。 因为我是初学者,问了很多问题,都没解决,但是分已经发完,所以请ERP2帮我把分拿回给我,并没有做弊? 建筑系数怎么算呢 给我几个关于昆虫的电影 最好是灾难片 甲乙和打800字的稿件甲打80字乙打90字每分钟甲先打三分钟剩下的两人还需几分钟完成解方程 一副去掉大、小王的扑克牌中,随意抽取一张,抽到的牌是红色的.可能性有多少? 求关于昆虫的灾难片不是老的..那些虫子很恐怖,虫子可以进入人的体内迅速扩散..我只记得那些虫子把北极熊吃光了.感觉那是英或美制作的..线索只有这些了. 儿童教育对孩子将来的成长会有什么好处? 从一副扑克牌中随意抽一张,抽到方块的可能性是多少? 中西方婚礼的异同,用英文表达,以列表形式, 在幼儿园建动物角对孩子们的成长有什么好处? 从一副扑克牌中任意抽取一张,抽到红桃2的可能性与王(含大、小王)的可能性是多少? 做糖醋排骨要什么的材料?我想要我妈妈做出这道菜的味道和酒店一样.可是不知道用什么材料?做过的才好回答.如果做出那种味道,加100!. 畅想青春,展望未来的诗歌最好再加一两句关于中学生风范的一定要是自己编的,而且是在网上未发表的,体现的思想要积极向上麻烦各位了,时间紧急,快,最晚不内超过今天4点. 爱祖国爱家乡征文500~600字谢谢了有关天津芦台的, 谁能介绍一点关于丧尸的恐怖片和杀变异虫子的科幻片?就好比星际争霸(电影版)和生化危机这样的电影! 关于母爱的散文诗最好是自己写的,一定要好!行的话追加50分! 爱祖国 爱家乡的征文 一个长方体铁皮水箱的容积是23.04升,从里面量它的长是6分米,宽是2.4分米.这个铁皮水箱的深是多少分米? 怎样写散文诗 爱祖国爱家乡的征文! 水杯的体积一定大于他的容积对不对 十六年前的回忆 生字是什么急 变化的昆虫有哪些 C++英文读作什么是读作C plus plus?或者C double plus?还是另外的? 十六年前的回忆课文生字都有什么啊 求一些变异昆虫的电影(最好是蟑螂)我超级怕蟑螂,天天晚上出来捕杀,不过我这个可能有点BT,我喜欢看一些变异的昆虫电影,就类似金刚里面那些变大的蜘蛛虫子什么的,我要的只是蟑螂,不 12345678900用英文读作什么 十六年前的回忆生字字义我忘带语文书和字典了谢谢了 急啊 有什么方法一分钟可以打六十个字啊 -140度在英语中读作什么? 扑克牌有几张A 一分钟打60个字慢吗? 39%的英文 读作 扑克牌里为什么1是A 我想测试一下我一分钟打多少字,下什么软件啊 一分钟打60个字速度怎么样?求大神帮助 如题.有人知道油漆的制造过程吗? 一副扑克牌(54张)至少要取多少张才能保证一定有一张方块? 公共建筑的体形系数不能超过多少? 谁能告诉我涂料的种类,和涂料在试用过程中要注意的事项啊, 给推荐几部 人类和成灾虫子或者DNA变异虫子或者植物战斗的电影 星河战队(就第一部好看,剩下垃圾) 和 异型 生化危机 迷雾 系列就别说了 说点别的 没看过的 成本不见得要多高.就要这个 关于住宅节能计算中体形系数的问题.本人刚开始实习,对于节能计算不甚了解,计算体形系数需要知道建筑外表面积和体积,我想知道大家都用什么方法计算外表面积和体积呢,是用计算层建筑 求讲昆虫的恐怖片!最好是国外的! 一步美国电影关于外星人的,一个小男孩和一个外星人,外星人长得像昆虫.是在一本书上看到的 ,海报的样子是这样的,那个外星人长得有点像昆虫,手指头特别长,那个小男孩头发是金黄的,应该 油漆中要加入什么助剂 #英语读作什么? 我是88年的,记得小时候看过一部动画片,有个小男孩耳朵里住着一个会飞的小虫子,是什么动画片呢小男孩,一思考,耳朵里就升温,然后就把小虫子的屁股烧的红红的飞出来,说是热死了什么的,只 助剂 添加到油漆中的 在哪边有卖的 联系方式等等 物体的体积一定大于它的容积吗?——关于体积与容积的教学思考 电影讲外星人.和一个地球男孩外星人好特别看起来好象是昆虫然后男孩救了外星人外星人说三年后.我一定来救是什么电影啊?结果哪个男孩不知道为什么变了外星人的人一样.人不象人.外星 求个动物变异灾难片! 南瓜有什么作用 一部关于昆虫的电影主要就是描写一直瓢虫从出生到四处游历的电影,以瓢虫的视觉拍的,主要就是讲自然界的各种生物,适合小孩子启蒙,忘了叫什么名字了!开始出来的时候 碰到小苍蝇,然后被 求一部灾难片,跟宇宙里吃一切东西的虫子有关就是类似虫子的生物从宇宙里来,吃掉一切可以吃的东西.看了片段, 写一首诗歌或适于朗诵的散文 主题是 畅想世博 展望未来 - - (⊙v⊙)嗯 规划总用地面积怎么算?还有建筑系数 涂料储存期应加入什么助剂? 难忘的风景500字作文 建筑系数怎么算 前言看的一部电影就是一中昆虫飞到人的体内把人杀开昆虫又飞出来了是灾难片 作文:难忘的风景
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘