What it really is, not what it is
看了 infinte 的这篇文章:再见,Button;你好,Command, 和我这半年的一些想法很相近,本质是对 UI Controls 的再次抽象分类。
传统的 UI 控件分类,体现的是 what is looks like, 比如 Menu, Button, Tabs, Toolbar, Dialog, Grid, Tree 等等。
近期新近的一些 UI 类库比如 jQuery EasyUI, 开始逐步抽象出 Draggable, Droppable, Resizable 等 Base 功能点,这些形容词已经逐步开始从 what to do, not what it is 层面开始抽象。虽然 EasyUI 最后体现出来的依旧是 Menu, Dialog, Tree 等传统 UI 控件,但抽象层次和代码组织等已经逐步演化。
前不久在 InfoQ 发过一篇文章:构建 UI 组件的新思路, 介绍了 KISSY 类库中,通过 Switchable 抽象,实现 Tabs, Slide, Album 等 UI 控件的思路,抽象的出发点是 what it really is, not what it is.
结合 infinte 的想法,画了一个还比较混乱的图:

或许 UI 3.0 的时代真的来临了!
比如 Autocomplete(自动补全组件)或 Suggest(搜索提示组件),可以这样实现:
Suggest = Widget.combine(DataProvider, Overlay, Selectable);
在现实生活中,我们需要实现一个复杂实体时,经常用到的办法是将简单的实体组合起来。比如法拉利,是一堆汽车零件的组合。不同的法拉利,是选用的零件或组合方法有差异。类、继承等 OOP 概念,真的不是必须的。去掉后,世界照样清晰。
抽象、思考,思考、再抽象,多想想 what it really is, and what to do, not what it is. 我相信,未来是 UI 3.0 的世界!
infinte 的文章让我很激动,上面的想法还很不成熟,UI 3.0 是我杜撰的(当然,希望以后会说是我首创的,哈哈)。大家随意看看,极其欢迎讨论,提出你的想法与建议。

July 14th, 2010 on 23:04
要是JS给自定义运算符就可以用*了。
其实这有点数学中集合论的感觉,像你那个例子就可以写成
DataProvider ∩ Overlaied ∩ Selectable
另外你的英语语法有问题,应该是What it really is。其实我想把它翻译成拉丁语……
July 15th, 2010 on 0:10
我的jQuery.Switchable就整合了Tabs、Slide、Scrollable
http://ilikejquery.com/switchable/
实在闲着没事干的时候帮忙提点意见啊
July 15th, 2010 on 0:14
我把你的文翻译+顶到reddit上了:
http://www.reddit.com/r/javascript/comments/cpij4/what_it_really_is_not_only_what_it_is_in_zhcn/
July 15th, 2010 on 8:50
感谢 infinte 的指正与推广,的确应该是 what it really is :)
July 15th, 2010 on 9:38
做 UI 可借鉴 ExtJS,界面元素很齐全,不同元素很容易组合,数据的组织也很见功夫。
July 15th, 2010 on 10:10
之前bi上有同学就这么做的:
http://code.google.com/p/sochange-juqeryplugin/
July 15th, 2010 on 21:13
有点复杂了
July 15th, 2010 on 22:11
继承与组合是对现实的不同方式抽象,虽然设计模式提倡组合优先继承,我觉得还是不能完全否定某一个的,该继承还是继承,ext是榜样
July 15th, 2010 on 22:12
可以继承结合组合,每个功能可以用继承细化,功能组合可以成为组件
July 15th, 2010 on 23:28
radio, single select, switch tab-bar 都是可以用来做单向选择的控件;multi select, checkbox 是多项选择的控件;它们各有优缺点,使用的时候可以考虑下。
https://twitter.com/hotoo/statuses/14806262643
July 16th, 2010 on 0:06
第二层的各个节点描述的层次不一致:switchable, selectable似乎是行为接口,SinglePicker,MultiPicker似乎是抽象组件,ControlList, overlay更像是一个大杂烩,DataProvider撇开不谈,至于CommandExecuter,这个名字实在是太糟糕了,试想用户的哪个动作不是在下达一个指令呢?
July 16th, 2010 on 1:38
@feng:: 这个东西目前还没有成型,自然会乱……可能还要等大概一个月才会成型吧。
July 16th, 2010 on 15:04
这不正是jQuery UI的设计思路吗?以及jQuery UI的自定义组件。所有的组件是可以组合的,并且容易扩展,包括内部的方法与属性的继承。
July 19th, 2010 on 11:56
还是看不懂
July 19th, 2010 on 14:32
这个图是用什么软件画的??? :)
July 19th, 2010 on 15:05
看了infoq里面的文章,启发很大。
透过现象看本质!
July 20th, 2010 on 20:44
既然来了就留个脚印再走。
July 21st, 2010 on 0:44
来踩几十脚了!
July 21st, 2010 on 14:57
ie有什么比较好的调试工具吗 我的博客ie6下问题不小 可以智能装一个版本的IE
July 23rd, 2010 on 14:06
没有人了解过这个UI库吗 : http://code.google.com/p/bgjs
July 26th, 2010 on 11:49
所谓的 behavior driven 。 JavaScript 是设计来负责 behavior 的,用它来做别的事情本来就是不对的,专注于 behavior 才是正确的设计模式。
July 27th, 2010 on 14:29
过来踩踩
August 2nd, 2010 on 22:52
再见,Button;你好,Command 不愧是前端的人
leave a reply