Dojo：不容忽视的 RIA 框架

受邀写这样一个专题，非常乐意。这也让我看到了 infoQ 是一个真正以技术为导向的社区，不追求最热的话题，只看技术的价值，很欣赏。

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 有吸引力的特性：

特性

描述

优秀的面向对象体系

类定义，多继承，基类方法调用，在 Dojo 中都设计的自然而合理。良好的 OO 体系，是大型应用的基础。

命名空间

和 Java 一样的命名空间管理，对应文件夹层次结构，让我们能有效管理大量源代码以及他们的依赖关系。

Dijit 界面控件系统

Dijit 是 Dojo 的最大特色，它很容易创建和使用，方便了界面模块化开发且易于维护；基于内容构建的天然特性更方便创建 SEO 优化的 Ajax 页面。

严格的设计模式

很多人说 Dojo 难用，严格的设计模式是一个重要原因。很多东西也许第一眼看上去不是很直观，但一但掌握，用这种风格写出的代码会非常容易扩展和维护。

灵活的单元测试框架

DOH 是 Dojo 自带的测试框架，除了标准的函数级别单元测试，你还能用它自动控制鼠标移动和点击来进行自动的界面测试。而且 DOH 同样可以用于非 Dojo 框架的其它 Ajax 测试。

强大的构建工具

Dojo 的 Build 工具其实有很多限制，需要遵循一定的编码规范，这为丰富的功能提供了前提。它能自动处理文件依赖关系，自动分离 i18n 文件，自动嵌入模板文件，让交付的系统运行的更快。

性能其实很优秀

性能很难对比，即使相同的一个 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 官网

本质上官网总是没有太多实际性的作用，作为一个产品门户，起到总体介绍的作用，内容相对很少，而且个人觉得 Dojo 官网的设计实在差强人意，很多过期内容，而且导航非常不便。

Dojo 下载地址

在这里可以下载到所有的 Dojo 稳定版本，每个版本都有几个不同的包可供下载，以 dojo1.5 为例：

1. dojo-release-1.5.0.zip
   Dojo 标准包，已经压缩，可供生产环境直接使用。
2. dojo-release-1.5.0-src.zip
   Dojo 源代码，包含测试，build 工具，开发环境使用，方便调试。另外这个包下面包含了所有的 test case，通过它们能快速掌握各个控件的用法。
3. dojo-release-1.5.0-docs.zip
   Dojo 离线文档，内容与 http://api.dojotoolkit.org 基本相同，但没有在线的使用方便，一般直接看在线文档即可。
4. dojo-release-1.5.0-demos.zip
   Dojo 功能演示，其实这是非常直观的一块，可以看到很多很酷的用法，每个 Demo 都有具体的代码示例。下载解压后放到 dojo 同级目录即可使用。
5. dojo-release-1.5.0-shrinksafe.zip
   Dojo 的 build 工具，通常专用于 Dojo，已经包含在 src 包里，如果要用于其它的 Javascript 程序打包，可单独下载。

在线API 手册

经过改版，最近刚刚推出。相对于旧版本已经方便很多。可以查到所有类的属性，方法，事件的介绍和使用示例。

Dojo Campus

在这里能找到几乎所有的类或方法的使用 guide，相当于 Dojo 的 Wiki，内容不断更新。通常在 google 中搜索 Dojo API，来自 Dojo Campus 的是最有价值的。

Sitepen

这是来自 Dojo 创建者的博客，里面会有 Dojo 相关的技术文章，也会有业界的一些观点文章。

Dojo 中文博客

近期比较活跃的 Dojo 中文博客，包括原创内容以及国外 Dojo 技术文章翻译。翻译部分基本会同步于 Sitepen 的文章。

捷径：从 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.H

DOH 全称是 Dojo Objective Harness，是一个基于 Dojo 的单元测试工具，具有如下特点：

• 既能够测试基于 Dojo 框架的 Ajax 应用，也能够测试基于非 Dojo 框架的 Ajax 应用（老版本只支持 Dojo 框架的）。最新版本现在是 0.9（独立于 Dojo 版本）。而且是 08 年就发布的，可见其还是相当稳定和够用的。
• 能够将多个单元测试用例（多个 javascript，html）文件，在同一个界面上集中展示测试结果。
• 既可以在浏览器中运行测试，也可以用命令行的方式来运行测试，命令行方式仅限于纯 javascript 代码的测试。
• 提供基于浏览器的 Robot 插件，用于模拟鼠标键盘操作，方便界面测试。

大家可以通过 http://yourhost/dojoroot/util/doh/runner.htm 来运行 Dojo 自身的单元测试，体验其强大的功能。下面是其运行结果截图：

（2）Build 工具：Shrinksafe

ShrinkSafe 同样独立于 Dojo，但针对 Dojo 特别优化，用于打包和压缩 Ajax 应用。其主要提供了如下功能：

• 自动处理源文件的依赖关系，打包多个文件到一个文件
• 压缩 javascript 代码，去除注释，无用空白等
• 处理及打包 i18n 文件
• 自动嵌入 dojo.cache 引用的文件（如 dijit 的模板文件）

通常经过 build 过的代码，体积会减少 30％左右，并且因为将多个文件打包成一个，大大加快了浏览器加载速度，让交付的应用程序运行的更快。

这就是 Dojo

看完上文，相信大家对 Dojo 有了一个大概或者更深入的了解。一直以为 Dojo 是一款强大的工具，熟练掌握能让你的开发事半功倍。而 Dojo 的难用让它的用户相对较少，尤其是在国内。本文的目的正是希望通过对 Dojo 的系统性介绍，消除大家对 Dojo 的偏见，或者帮助那些想用 Dojo 的人用好 Dojo。

如果大家有任何问题或建议，或者希望看到哪些具体的 Dojo 功能介绍，欢迎留下评论，会在后面的文章中针对热点问题进行详细介绍。

感谢张凯峰的策划以及审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。