实战 Dojo 工具包
一个品质远远超出“原型建造”的 Ajax 库
原文链接：http://ajaxian.com/articles/dojo-in-practice/DojoToolkitInPractice.pdf
源代码下载：http://ajaxian.com/articles/dojo-in-practice/dojo-itinerary.tgz
译文链接：http://ajaxcn.org/upload/DojoInPractice.rar
作者：Dion Almaer（Ajaxian.com）
译者：李锟（ajaxcn.org）
版本号：1.0
版权声明：
本文是有版权的著作，原文的版权属于原作者所有，译文的版权属于译者所有。译者在得到
了原作者的许可后翻译了这篇文章。译文允许在不做任何改动（包括原文/译文链接、作者/
译者信息、版权声明、文章的全部内容）的情况下自由转载。
内容目录
1 简介................................................................................................................................................... 3
2 Dojo 工具包：JavaScript 开发的水槽（Kitchen Sink）................................................................3
3 设置和配置 Dojo.............................................................................................................................. 4
3.1 选择正确的 Dojo 创建..............................................................................................................4
3.2 动态加载 package......................................................................................................................5
3.3 定制的创建............................................................................................................................... 5
4 应用：旅行路线编辑器................................................................................................................... 6
5 DOM 和 HTML 效果........................................................................................................................ 6
5.1 处理 DOM................................................................................................................................. 7
5.2 Dojo 的 HTML 效果..................................................................................................................8
6 使用 dojo.io.bind()的 Ajax 远程调用............................................................................................... 8
6.1.1 淡出和移除........................................................................................................................9
6.1.2 使用 XMLHttpRequest 来告诉服务器发生了什么......................................................... 9
7 拖放操作......................................................................................................................................... 10
7.1.1 连接所有的天..................................................................................................................11
7.1.2 连接单个的天..................................................................................................................11
7.1.3 onLoad............................................................................................................................. 11
8 结论................................................................................................................................................. 12
9 作者简历......................................................................................................................................... 12
1 简介
当你开始建造一个 Ajax 应用时，你很快就会遇到一些情形，让你感觉自己好像是在重新发明轮子。
大量的开发者一想到 Ajax，就会直接扑向 XMLHttpRequest 对象，但这仅仅只是一个开始，而且是 Ajax
开发中很容易的部分。
当你在建造 JavaScript 富客户端应用时，你会遇到大量令人烦恼的事情。浏览器的兼容性、对于降
级（degradation）的支持、混杂在一起的 DOM 处理、还有那些鲜血淋淋的 hack 技巧（例如离线存储），
所有这些事情都会冒出来。
这篇文章将会为你介绍一个远远超出对 XHR 进行简单封装的工具包。它是那种每个人只要开发富客
户端的 Ajax 应用都应该使用的工具包。没有了它，你就是一个残废的开发者，只能依靠自己的力量来蹒
跚前行。
与其列出 Dojo 工具包可以使用的 API，我们不如考察一个简单的应用，看看在实际开发中如何使用
这个库的各个部分。
我们将会讨论：
• Dojo 是什么？
• 如何设置 Dojo
• 实际使用 DOM 和 HTML 效果
• 通过 dojo.io.bind()实现 Ajax 远程调用
• 拖放（Drag and Drop）操作
让我们开始吧！
2 Dojo 工具包：JavaScript 开发的水槽（Kitchen Sink）
Dojo 工具包是什么？它是一个框架还是一个库？这个名字本身究竟意味着什么？Alex
Russell，Dojo 工具包的创建者之一，认为它是一个你可以用来建造 JavaScript 应用的库。
它的内涵比你可能想到的更加丰富，因为它在一个顶级项目的一组 package 中包含了如此众多的功
能。
Dojo 中包含有很多 JavaScript 编写的子 package，负责处理当你在建造一个 JavaScript 应用时通常
必须要自己来编写的基础（infrastructure）工作。它封装了跨浏览器的令人烦恼的代码，这样你就不
必担心它们会来给你捣乱。它可以帮助你更加容易地处理 DOM。它在不同的浏览器中可以将
XMLHttpRequest 对象降级为使用其他的远程调用机制（译者注：例如，那些不支持 XMLHttpRequest 对象
的浏览器），同时为你提供了最简单的和容易使用的 API。
JavaScript 并非仅仅是关于浏览器的，它还可以运行在不同的宿主环境中，Dojo 对此也提供了支持。
如果你想要在服务器端编写 JavaScript，仍然可以使用 Dojo 来使得代码更加简单。
为了使你获得一个关于这个框架的感性认识，我们来列出其中的 package：
• dojo.collections：很有用的集合数据结构（List、Query、Set、Stack、Dictionary...）
• dojo.crypto：实现加密功能的 API（Blowfish、MD5、Rijndael、SHA...）
• dojo.date：无须编写丑陋的代码来解析日期格式。
• dojo.dnd：拖放功能的辅助 API。我们将要建造一个支持拖放功能的应用。
• dojo.event：事件驱动的 API，支持 AOP 开发，以及主题/队列的功能。
• dojo.lfx：HTML 和 SVG 效果库。我们将在例子中使用这些效果。
• dojo.animation：基于 Dan Pupius 在动画方面的工作
（http://pupius.co.uk/js/Toolkit.Drawing.js）的动画 package（不再支持，应首
选 dojo.lfx）
• dojo.fx：不再支持，应首选 dojo.lfx
• dojo.io：不同的 IO 管道。cookie、IFrame、发布/订阅功能等等。所有神奇的 Ajax 工作都
在这里完成。
• dojo.lang：对于整个 JavaScript 环境进行增强的功能。包括你所希望拥有的很多特征，例
如 mixin、基于闭包（closure）的函数，以及大量的其他功能。
• dojo.logging：提供日志功能的框架
• dojo.math：数学函数（曲线、点、矩阵）
• dojo.reflect：提供反射功能的函数库
• dojo.rpc：与后端服务（例如理解 JSON 语法的 Web 服务）进行通信
• dojo.storage：将数据保存在本地存储中（例如，在浏览器中利用 Flash 的本地存储来实现）
• dojo.string：现在你可以对字符串进行如下的处理，修整、转换为大写、编码、esacpe、填
充（pad）等等。
• dojo.undo：用来撤销用户操作的栈管理器
• dojo.uri：处理 URI 的函数库
• dojo.widget：一个 widget 框架，允许你建造可重用的 HTML/JavaScript widget，可以与简
单的 HTML 标记共同使用（例如，<div class=”dojo-MyWidgetType”>）。支持基于标记的
应用开发（例如：XAML、XUL）
• dojo.xml、dojo.dom：帮助你处理 DOM 的辅助函数，以及其他的 XML 辅助函数。我们将在这
个例子中使用 dojo.dom。
• dojo.style：CSS 功能，例如访问 style 的大小、与浏览器的盒模型配合工作，以及更多的功
能。
这确实是一个很长的列表，然而这个列表仍然未能公正地体现这个框架所做的工作。如果你使用
Dojo，在开始编写一些基础的代码之前，最好先在框架中搜索一下这些功能，很可能别的某个人已经为
你完成了这些功能！
你很快会发现，如果你想要建造任何严肃的 Ajax 应用，Dojo 能够为你提供大量的帮助。它可以帮助
你从 hack 少量的 onclick 事件，升级到编写具有专业品质的 JavaScript 应用。
3 设置和配置 Dojo
通常你是如何设置和配置一个 JavaScript 库的呢？你是不是简单地将 JavaScript 文件拷贝过来，放
在 Web 服务器上，然后通过<script src=...来访问呢？我敢肯定八成你会这样说。
简单的 JavaScript 库就是这样来使用的，Dojo 也可以这样来使用。然而，如果能够了解整个大的场
景，将能够更好地使用 Dojo。
3.1 选择正确的 Dojo 创建
因为这个工具包有如此众多的部分，你可以在一组创建中进行选择。为何要添加这种复杂性，而不
是仅仅只提供一个下载版本呢？
在大量的环境中，只提供一个下载版本不会有任何问题，但是对于浏览器中的 JavaScript 而言，传
输给浏览器的每一 K 字节都是很要紧的（译者注：延迟会 kill 掉整个的使用体验）。如果你只想完成单
个的 Ajax 调用，为何要将全套的 package 都发送给浏览器呢？我们可不想无缘无故地发出额外的比特。
当你下载 Dojo 的一个“版本”时（从 http://download.dojotookit.org/下载 zip 文件，或者匿名
访问 Dojo 的 SVN 服务器 http://svn.dojotoolkit.org/dojo/trunk/），你可以在下列选项中进行选择：
• I/O（XHR）版本：如果所有你需要的仅仅是以 Ajax 的风格与服务器通信？那么请选择这个版
本。
• Event+I/O 版本：I/O 版本加上事件系统。
• Ajax 版本：在这个版本中你不仅得到了 I/O 和事件功能，而且还有 killer 级的可视效果。
