Dojo：不容忽视的RIA框架
Dojo：不容忽视的RIA框架作者王沛发布于 2010年12月9日 领域 语言 & 开发主题 Dojo,JavaScript,Java,动态语言,RIA,Dojo之美,专栏
新浪微博
腾讯微博
豆瓣网
Twitter
Facebook
linkedin
邮件分享
更多
0
受邀写这样一个专题，非常乐意。这也让我看到了infoQ是一个真正以技术为导向的社区，不追求最热的话题，只看技术的价值，很欣赏。 相关厂商内容国内最大的Python应用——Sohu邮箱之经验分享，尽在QCon北京企业开发专题 持续集成与持续交付专家乔梁：近十年实战项目案例之深度剖析 Kinect for Windows人机交互新体验，免费培训报名中，限额30人（成都：3月27日，深圳：3月29日） 成为强大的程序员、Heroku的教训、Facebook如何备份PB级数据，3月刊《架构师》免费下载！ QCon北京2013大会“社区之夜”开放报名中（4月26日 周五） 2005年5月，Ajax概念被第一次提出。而在此一年之前，Dojo框架已经写下了第一行代码。作为Ajax之前的“Ajax”框架，Dojo官网至今一直用着朴素的名字来定义自己：javascript toolkit。看上去仅仅是个工具集，而事实上它却有框架的力量，推进着大型Web2.0应用的开发。这也是Dojo一直给人的印象，低调、沉稳，却很强大。如果你仅仅想让WordPress页面的下拉菜单效果更加酷，我不反对用JQuery；但如果你需要以Web2.0技术为基础去架构一整个应用，那么Dojo一定是你的最佳选择。 为什么选择Dojo？看完前一段，一定会有人说，Dojo给人的印象没有强大，只有庞大，难用以及糟糕的性能。这完全可以理解。Dojo文档的缺乏，社区的不活跃，相对严格的设计模式，让很多初学者难以上手，于是转投用起来更加友好的其它框架。这是一个偏见导致的恶性循环，造成用Dojo的人始终不多。而消除偏见，正是这个专栏的目的。 如果我们相信大公司CTO的眼光，不妨先看看Dojo的这些用户：
这只是Dojo用户的一小部分，实际用Dojo的公司更多，甚至中国的腾讯，百度。如果觉得这些公司的技术离自己很远，那么Java的Struct 2框架内置Ajax模块用的是Dojo，也许更能说明Dojo的价值。 为什么选择Dojo？这个问题其实很大，也许当你看完整个专题系列，心中自有选择。但在这里，我还是想先简单列出一些Dojo有吸引力的特性：
性能其实很优秀性能很难对比，即使相同的一个Calendar控件，功能都会有差别。这里从2个点来看性能问题：DOM节点的查询速度，以及Dijit展现的速度。前者大家的功能完全相同，可以有个比较；后者则专属Dojo，看看绝对的性能。 （1）节点查询速度JQuery最早引入基于CSS选择器进行DOM节点查找的机制，也是其最大特征。如今成为了各个框架都具备的功能。这应该算是最能体现Javascript算法设计的一点。下图来自于：http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised 是各个框架查询速度的对比，时间越少表示性能越好。虽然用的版本比较老，但在查询的实现上各个框架都没有太大的变化。
一图胜千言，Dojo的性能优势一目了然。如果你想亲自做这个测试，可以访问如下地址。 http://mootools.net/slickspeed/ （2）Dijit展现速度Dijit是Dojo的界面展现体系，性能好坏直接决定着页面的响应速度。在声明方式下，Dojo需要遍历页面Html找到所有的Dijit进而创建并展现它们。这个过程比你的想像要快的多，Dojo的ThemeTester是一个很好的例子： 它的访问地址是：http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
此页面包含了399个Dijit，全部通过声明方式创建。在FireFox3.6下总共的展现时间是2000ms左右，平均一个Dijit用时5ms。页面中包括了多个Tree，多个TabContainer，多个Menu以及富文本编辑器这样的复杂Dijit。因此，如果你发现你的界面远没有这么复杂，却展现的很慢，通常需要检查自定义的Dijit设计的是否合理。 综上所述，Dojo本身，包括自带的Dijit，拥有着相当不俗的性能。至于如何写出高性能Dijit，正如如何写出高性能的JQuery插件，需要的是经验和积累。 性能是软件开发的一个永恒话题，无处不在。没有一个统一的解决模式，桌面程序也好，Web程序也好，要提高性能，合理的设计、高效的算法永远是解决问题的王道。而Dojo在这一点上，绝不会是你的绊脚石。 开始使用Dojo作为专栏的开篇，这里并不会详细介绍很多具体的技术细节。而是通过几个重要Dojo相关网站的介绍来了解Dojo，如下表所示：
捷径：从Dojo Test Case学习Dojo控件用法除了上述网站之外，有一个快捷学习使用Dojo的方法，就是看Dojo Src包下面的test case。在源代码包下面（例如dojo-release-1.5.0-src.zip），每个命名空间下都会有一个tests目录，这里面包含了每个控件或者工具类的各种用法的实例，通过它们能够快速上手它们的用法。例如： http://yourhost/dojoroot/dijit/tests/test_Dialog.html，这个页面就展示了Dialog的各类用法。任何一个Test Case都是一个完整的Dojo环境，你完全可以模仿它写出自己的第一个Dojo程序。 从对象、事件、闭包看dojo对javascript的扩展和任何一个Ajax库一样，Dojo对Javascript语言本身也做了扩展，例如用dojo.forEach来方便的遍历一个集合。因此如果熟悉了一个框架，上手Dojo基本上只需要熟悉不同的API命名方法，dojo的这些功能基本都在dojo命名空间下，通过dojo.doSomething()的形式来调用，或者dojo.string.doSomething()这样的形式。 在这个功能上我们从3个方面的例子来看dojo。 （1）面向对象支持开始写代码之前，我们先为源代码位置指定一个命名空间，用如下代码： dojo.registerModulePath('com.infoq','../infoq');
第一个参数表示你的根命名空间，第二个是相对于dojo.js的目录。这样整个目录结构如下： /script /dijit /dojo /dojox /infoq 你可以注册多个命名空间到多个文件夹，方便组织源代码文件。这个结构和java非常类似，甚至比java少了com/infoq这样的多余目录。下面的代码就定义了一个Dojo类，这个类文件位于infoq/demo/Class1.js。代码中示例了继承，基类方法调用，构造函数的使用。 dojo.provide('infoq.demo.Class1'); //dojo特有，表明这个文件所属命名空间
dojo.require('infoq.BaseClass'); //引入基类定义
dojo.declare('infoq.demo.Class1',[infoq.BaseClass],{ //类定义
constructor: function(){
//构造函数代码逻辑
},doSomething: function(){
//调用基类infoq.BaseClass的doSomething方法
this.inherited(arguments);
}
});
示例中演示了Dojo的类定义，继承，基类方法调用的方法。可见其过程与传统面向对象的编程非常类似。Dojo中通常一个类就是一个文件，并且文件路径和dojo.provide声明的类路径严格对应。 （2）事件支持Dojo事件系统最大的特点是统一了DOM节点的原生事件和自定义事件，例如： var handler = dojo.connect(obj,‘onLoad',callback); 这个onLoad可以是DOM节点的原生事件，也可以是obj对象的一个纯javascript方法，调用onLoad的参数也会传个callback方法。dojo.connect函数返回一个handler，可以用dojo.disconnect(handler)的方式取消一个事件的绑定。 （3）闭包及dojo.hitch闭包是javascript的重要特色，它让函数回调的定义变的非常便捷。当年看到Prototype提供的Function.bind方法惊为天人，dojo中也提供了同样功能的函数：dojo.hitch。假设某对象的定义如下： var obj = {
doSomething: function(arg1,arg2,arg3){
//code
}
};
那么要把obj.doSomething进行一个闭包封装可以使用： var callback = dojo.hitch(obj,'doSomething','arg1Value'); 那么执行： callback('arg2Value','arg3Value');
完全等价于： obj.doSomething('arg1Value','arg2Value','arg3Value');
可以看到dojo.hitch甚至可以连接2个部分的参数传递，这个功能非常有用。 忘掉$(id)，看Dijit中如何使用DOM节点$(id)曾经是Prototype框架的特色，也是大家最为津津乐道的常用函数。后来各个框架均提供并加以扩展（JQuery中用于基于CSS选择器的节点选择）。dojo中也有一样的函数：dojo.byId(id)。但与其它框架对于$方法的不可或缺相比，dojo.byId使用非常少，因为它意味着对DOM节点的紧密耦合。Dojo中严格的模块化设计思想极力避免紧密耦合的出现。 开发中用到DOM节点时，通常和UI相关，而Dojo中所有对UI的操作和渲染都抽象成Dijit的形式，对于复杂的UI结构，可以嵌套使用Dijit。创建Dijit有2种方式，一种基于已有DOM节点，另一种基于模板。 （1）使用已有DOM节点创建Dijit首先自己定义一个Dijit： dojo.declare('infoq.demo.SomeDijit',[dijit._Widget],{
//dijit code
});
然后在页面中以声明方式创建实例： <div dojoType="infoq.demo.SomeDijit" sampleProp="sample"></div> 那么在Dijit中的代码就可以用this.domNode来引用到这个节点。而不再需要通过dojo.byId的方式来获取DOM节点的引用。 （2）使用模板创建Dijit顾名思义，模板定义了一个Dijit的骨架，假设有如下Dijit定义： dojo.declare('infoq.demo.TemplatedDijit',[dijit._Widget,dijit._Templated],{
templateString: dojo.cache('infoq.demo','templates/templated_dijit.html')
intro: 'demo template introduction'
//dojo.cache用于直接获得指定文件内容，会在build时自动嵌入代码
//templateString定义了一个dijit的模板内容
//other code
});
这就创建了一个基于模板的Dijit，模板文件位于script/infoq/demo/templates/templated_dijit.html（前面我们已经注册script/infoq对应于infoq命名空间）。假设模板文件内容如下： <div>
<img src='xx.png' dojoAttachPoint='imgAvatar'/>
<p dojoAttachPoint='introductionNode'>${intro}</p>
</div>
那么在页面上的Dijit就会以这个模板为骨架。在dijit代码中，可以使用this.imgAvatar来使用img节点。这里的dojoAttachPoint就是模板dijit中的特有属性，用于获取模板中包含的DOM节点或者Dijit的引用。例子里模板文件中的${intro}则会直接被替换为实例对象的intro属性。 测试及Build工具测试及Build是完整开发的重要组成部分，如果大家感兴趣，在后续系列中将详细介绍这两块内容，这里作一个简单的介绍： （1）测试工具：D.O.HDOH全称是Dojo Objective Harness，是一个基于Dojo的单元测试工具，具有如下特点：
大家可以通过http://yourhost/dojoroot/util/doh/runner.htm来运行Dojo自身的单元测试，体验其强大的功能。下面是其运行结果截图：
（2）Build工具：ShrinksafeShrinkSafe同样独立于Dojo，但针对Dojo特别优化，用于打包和压缩Ajax应用。其主要提供了如下功能：
通常经过build过的代码，体积会减少30％左右，并且因为将多个文件打包成一个，大大加快了浏览器加载速度，让交付的应用程序运行的更快。 这就是Dojo看完上文，相信大家对Dojo有了一个大概或者更深入的了解。一直以为Dojo是一款强大的工具，熟练掌握能让你的开发事半功倍。而Dojo的难用让它的用户相对较少，尤其是在国内。本文的目的正是希望通过对Dojo的系统性介绍，消除大家对Dojo的偏见，或者帮助那些想用Dojo的人用好Dojo。 如果大家有任何问题或建议，或者希望看到哪些具体的Dojo功能介绍，欢迎留下评论，会在后面的文章中针对热点问题进行详细介绍。 感谢张凯峰的策划以及审校。 给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家加入到InfoQ中文站用户讨论组中与我们的编辑和其他读者朋友交流。 您可能也会喜欢Dojo 1.8：向完美架构继续前行 Dojo1.6新特性：HTML5进行时 浅谈dojox中的一些小工具 dojo类机制简介 Dojo Build系统介绍 Dojo1.6新特性：AMD规范 31条回复关注此讨论回复
测试过了，还是jQuery方便快捷。 发表人 yu bingxing 发表于
09/12/2010 02:13
Re: 测试过了，还是jQuery方便快捷。 发表人 Kevin Hou 发表于
09/12/2010 02:30
Re: 测试过了，还是jQuery方便快捷。 发表人 Zhao Qing 发表于
10/12/2010 10:22
经过测试，在 IE6下 UI 很卡 发表人 w NO777 发表于
13/12/2010 12:11
Re: 测试过了，还是jQuery方便快捷。 发表人 Young Haolin 发表于
15/12/2010 12:20
收藏了 发表人 叶 楠 发表于
09/12/2010 02:15
Dojo: more than a toolkit 发表人 徐 明君 发表于
09/12/2010 03:24
拜读了- 发表人 ye cheng 发表于
09/12/2010 04:22
已经在项目中用了半年了，觉得非常不错。 发表人 谢 艳平 发表于
09/12/2010 05:18
Dojo确实不错，虽然在国内人气不旺 发表人 he zhigang 发表于
09/12/2010 08:35
性能对比选的版本确实都太老了，不具有参考价值 发表人 Li Richard 发表于
09/12/2010 11:52
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 王 沛 发表于
10/12/2010 10:07
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 Li Richard 发表于
10/12/2010 10:38
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 王 沛 发表于
10/12/2010 10:59
请各位同学随手将自己的账号更新为中文 发表人 霍 泰稳 发表于
10/12/2010 11:51
Re: 请各位同学随手将自己的账号更新为中文 发表人 叶 楠 发表于
10/12/2010 12:22
Re: 请各位同学随手将自己的账号更新为中文 发表人 霍 泰稳 发表于
10/12/2010 01:12
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 叶 楠 发表于
10/12/2010 11:59
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 Ys Chris 发表于
15/01/2011 02:26
Re: 性能对比选的版本确实都太老了，不具有参考价值 发表人 王 沛 发表于
19/01/2011 08:33
支持dojo 发表人 施 瑞琦 发表于
10/12/2010 03:57
没有过，观望中 发表人 王 杰 发表于
10/12/2010 05:53
Re: 没有过，观望中 发表人 华杰 杨 发表于
22/12/2010 10:37
zend framework对dojo整合得很好 发表人 Ting Wang 发表于
11/12/2010 00:34
dojo性能确实有点.. 发表人 強 周 发表于
13/12/2010 08:34
Dojo 的确是一个很 NICE 的框架 发表人 Angel Black 发表于
14/12/2010 09:54
Re: Dojo 的确是一个很 NICE 的框架 发表人 费 伽 发表于
15/12/2010 10:51
老的测试截图不给力啊 发表人 hong hao 发表于
16/12/2010 10:00
顶呀顶 发表人 陈 园军 发表于
19/12/2010 07:49
在用struts2的时候，我一直都是把dojo禁用掉的，因为老是有javascript 错误，看上去太不专业了，给客户影响不好 发表人 华杰 杨 发表于
22/12/2010 10:37
目前我们公司也决定采用dojo! 发表人 囧 南风囧 发表于
15/01/2011 10:15
按日期倒序排列
赞助商链接
深度内容
Etsy工程师Sam Haskins谈代码部署，监控与故障处理
在本次访谈中，Sam Haskins分享了他在Etsy做DevOps的经验。Etsy使用Git做代码管理，平均每天提交的更新数量在30次左右，有时甚至达到70个。在如此高频率提交代码的情况下，他们如何进行代码审查？如何在每次更新之后监控系统性能？如何处理故障？下面，Sam将一一解答。
Apache Crunch：用于简化MapReduce编程的Java库
Josh Wills在本文中介绍了一个新的Apache孵化器项目Crunch，该项目是用于创建MapReduce流水线的Java库。Crunch建立在一组用于简化MapReduce应用设计的高层抽象之上，还提供了用于实现如连接数据、执行聚合和排序记录等常见任务的模式库。
文化Hacking与即将到来的黄金时代
文化是共享的态度、价值观、目标与实践方式的集合，文化既描述了团队，又塑造了团队。我们的时代正日益被一种“软件文化”（software culture）所定义。好的hacking文化往往会促进自由，延伸开放性，并且增进设计的优雅。由于我们的文化正越来越被广泛的hack，我们的效率与视野将会不断成长，并且这将会带给带给我们越来越多的问题，同时这也可能会带领我们进入一个前所未有的黄金时代。
开发者需要了解的WebKit
Paul Irish是著名的前端开发工程师，同时他也是Chrome开发者关系团队成员。针对大家对WebKit的种种误解，他在自己的博客发表了《WebKit for Developers》一文，试图为大家解惑WebKit的同与不同。
互联网集群容量规划工作的探索
随着互联网的兴旺发展，这些年一些大型电子商务公司的业务蒸蒸日上，单一服务器早已不能满足业务的需要，负载均衡技术的应用催生了大小集群。如果不重视集群的容量规划，那会有2个直接的后果，一、线上服务器资源过于富裕。二、线上服务器资源不足。在这里，演讲者希望从运维角度就容量模型中涉及的核心思想，用户期待指标，资源，和压测方法等和大家做一次交流，顺带探讨下容量工作对运维自动化系统的贡献。
深入理解Java内存模型（七）——总结
Java线程之间的通信对程序员完全透明，内存可见性问题很容易困扰Java程序员，本文试图揭开Java内存模型神秘的面纱。本文大致分三部分：重排序与顺序一致性；三个同步原语（lock，volatile，final）的内存语义，重排序规则及在处理器中的实现；Java内存模型的设计目标，及其与处理器内存模型和顺序一致性内存模型的关系。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |