在过去一两年中，JavaScript 经历了复兴。许多 Web 开发者长期以来将 JavaScript 视为二等编程语言，最多用于装饰网页，但它正日益成为 Web 开发者的核心技术。无论您是在网页中添加 Ajax（异步 JavaScript 和 XML）、动态 HTML 还是新的 GUI 小部件，在过去一两年中，您可能已经开始比以往任何时候都更多地使用 JavaScript。

对于所有 Web 开发者来说幸运的是，对 JavaScript 编程的快速而广泛的兴趣促成了 JavaScript 库和工具包的开发，其中许多以开源许可证发布。在我的前几篇专栏文章中，我们研究了 Prototype，它的目标是使通用 JavaScript 编程更容易，以及 Scriptaculous，它提供了视觉效果和界面小部件。Prototype 在开源程序员中非常受欢迎，这在很大程度上是因为它包含在 Ruby on Rails 应用程序框架中。

但是，Prototype 和 Scriptaculous 远非唯一的选择。另一个流行的开源 JavaScript 框架是 Dojo。Dojo 基于 JotSpot 的 Alex Russell 开始的许多便利类和对象，JotSpot 是一家于 2006 年被 Google 收购的初创公司。Russell 继续致力于 Dojo，但代码和资金的贡献现在也来自其他来源，包括 Sun 和 IBM 等公司。此外，Dojo 现在默认包含在流行的 Django Web 应用程序框架中，这使其获得了更多的曝光。

本月，我们将初步了解 Dojo，检查它将代码划分为包的方式，然后介绍它为 JavaScript 程序员提供的几个便利函数，最后，介绍 Dojo 大型小部件库的一个非常小的示例。即使您不打算使用 Dojo，我也希望您觉得这篇文章具有指导意义。我几乎总是发现了解其他语言和工具包如何做事很有用，即使只是为了更好地了解我在做什么。

关于 Dojo，首先要理解的是它很大，至少以 JavaScript 标准来看是这样。（请记住，所有 JavaScript 代码都必须从服务器下载，由浏览器解释，然后在内存中执行，所有这些都要尽可能快地完成。一个大型 JavaScript 库可能提供许多功能，但它会使性能变得无法接受地慢。）因此，虽然我们可能认为 Dojo 是一个单一的大型库，但它实际上是许多较小部分的集合。

即使在您下载 Dojo 之前，这一点也很重要，因为下载站点要求您选择您希望使用的功能组合。考虑到我的服务器位于相对高速的线路之上，我的站点往往相对轻量级，并且我计划以开发人员的身份探索 Dojo，我安装了“全部”版本，在下载站点上标记为 kitchen sink。但是，如果您对 Dojo 的兴趣仅仅在于其富文本编辑器，或者用于 Ajax 或图表，您可能需要下载许多较小版本中的一个，每个版本都由其涵盖的 Dojo 功能子集标识。但是，为了本专栏的目的，我假设您也下载了 kitchen sink 版本。

在撰写本文时，Dojo 的版本为 0.4.1，kitchen sink 版本可从 URL download.dojotoolkit.org/release-0.4.1/dojo-0.4.1-kitchen_sink.tar.gz 获取。

下载文件后，解压缩它

tar -zxvf dojo-0.4.1-kitchen_sink.tar.gz

您打开的目录将包含许多不同的项目，包括 README 文件、Dojo 持久存储引擎中使用的几个 Flash 动画 (*.swf) 文件、主要的 dojo.js JavaScript 文件和几个子目录，包括一个包含演示（名为 demos）、一个包含 Dojo 大部分功能的源代码，以及用于工具包本身开发的 release 和 tests 目录。

要在您的服务器上启动并运行 Dojo，您必须将 dojo.js 和 src 子目录放在您的文档根目录下。我倾向于将我的网站放在 /var/www/SITENAME/www 下，JavaScript 文件放在该路径下的 javascript 目录中。我创建了一个名为 dojo 的进一步子目录，并将 dojo.js 和 src 目录都放在那里。因此，dojo.js 在我的文件系统上的完整路径是 /var/www/SITENAME/www/javascript/dojo/dojo.js，但是我们将用于从网页加载它的 URL 将是 /javascript/dojo/dojo.js。

实际上，我们可以使用标准的 <script> 标签将 Dojo 加载到我们的网页中

<script type="text/javascript"
src="/javascript/dojo.js"></script>

虽然以上代码将 dojo.js 加载到浏览器的内存中，但这并不意味着 Dojo 的所有命令现在都可用。相反，包含 dojo.js 使我们有可能加载 Dojo 的一个或多个单独的包。您可以将 dojo.js 视为引导加载程序，因为它的唯一目的是使 Dojo 在稍后对您可用，而不是自行执行任何任务。

正如我们在过去几个月中看到的那样，Prototype 和 Scriptaculous 具有相当明确的角色，因此，它们仍然是独立的产品。Prototype 为 JavaScript 程序员提供了大量便利函数，而 Scriptaculous 在其之上添加了 GUI 相关的功能。Dojo 的设计理念不同，它提供了各种不同的功能，其中许多功能可能看起来彼此无关。

例如，Dojo 提供了 GUI 元素（例如，富文本编辑器、日期选择器、映射站点和布局容器的界面）。但是，它还提供了一个事件系统，可以使用各种不同的模型将功能分配给特定的事件。它提供了一个比 HTTP Cookie 更复杂的客户端存储系统。它为 JavaScript 程序员提供了许多实用程序，使得创建新类、向调试器发送注释或以其他方式使用该语言成为可能。

这些功能中的每一个都可以在单独的包中使用，这些包都使用分层名称结构加载和标识。因此，所有 Dojo 函数都以 dojo 开头（例如，dojo.declare 和 dojo.debug），并且它们作为类似命名的层次结构的一部分加载。

加载 Dojo 包就像放置

<script type="text/javascript">
dojo.require("dojo.PACKAGE.*");
</script>

在您的 HTML 中一样简单。您可以使用 dojo.require 的多次调用来加载多个包。Dojo 的包加载器足够智能，可以处理可能存在的任何依赖关系。

包含 Dojo 后，您可以开始使用它对 JavaScript 语言的一些改进。Dojo 包含许多便利函数，使 JavaScript 编程更容易，其中一些函数与 Prototype 提供的函数非常相似。例如，几乎每个 JavaScript 程序都需要根据其 id 属性检索节点。（id 属性在 HTML 的特定页面中应该是唯一的，因此允许我们唯一地标识一个节点。）要将变量 myNode 分配给 ID 为 target 的节点，我们通常需要编写

var myNode = document.getElementById("target");

Dojo 允许我们将此缩写为

var myNode = dojo.byId("target");

这不如 Prototype 的 $() 运算符那么短，但它仍然是一个显着的改进，使程序更短更易读。

Dojo 还提供了一些新的机制来处理数组和其他枚举列表。例如，它提供了一个 foreach 循环

dojo.lang.forEach(arrayName, iterationFunctionName);

上面的代码导致为 arrayName 的每个元素调用一次 iterationFunctionName。因此，我们可以说

var names = ["Atara", "Shikma", "Amotz"];
dojo.lang.forEach(names, alert);

在警报框中打印每个名称。Dojo 提供了几个其他方便的函数用于数组，包括 dojo.map（它对数组的每个元素调用一个操作，产生一个新的数组作为结果）和 dojo.filter（它返回一个函数返回 true 的项目的数组）。在风格上，Prototype 的文档似乎鼓励用户编写内联函数，而 Dojo 文档鼓励用户编写命名函数，然后引用它们。但是，您可以采用您认为更具吸引力的任何风格。

Dojo 最容易开始使用的部分之一是其小部件集合。从 HTML 表单首次标准化以来，Web 开发者一直希望有一组更丰富的窗口小部件可供选择，以便提供在样式和功能上都类似于桌面应用程序的并行小部件的应用程序。Dojo 提供了许多这样的小部件，使得在我们的程序中包含富文本编辑器、滑块和组合框成为可能。

例如，我们可能想使用 Dojo 富文本编辑器，允许人们使用比 <textarea> 标签提供的纯文本更多的内容进行书写。我们可以通过简单地创建一个 <div> 并为其指定 dojo-Editor 类来实现

<div class="dojo-Editor">
    Hello from the Dojo editor!
</div>

如果您启动以上代码，您将得到……什么都没有，除了一个 <div>，里面有一些文本，正如您在没有安装 Dojo 的情况下可能期望的那样。这是因为 Dojo 的模块化加载方案；加载 dojo.js 只是使用 Dojo 任何功能的第一步，引导加载系统。加载实际的编辑器代码需要我们调用 dojo.require JavaScript 函数

<script type="text/javascript">
dojo.require("dojo.widget.Editor");
</script>

一旦我们完成了此操作（生成了清单 1 中显示的文件），我们突然就可以使用富文本编辑器了。这太棒了，但有一件事除外——我们如何将 HTML 格式的文件提交到我们服务器上的应用程序？一种方法是使用 Ajax 定期保存 div 的内容，将其内容提交到服务器，而无需显式保存。实际上，这正是许多基于 Web 的应用程序（包括文字处理器和电子表格）所做的事情。您不再需要保存文档；您只需使用它们，您就可以期望计算机可靠地保存您所做的事情。

<html>
    <head>

    <title>Dojo page title</title>
        <script type="text/javascript"
        src="/javascript/dojo.js"></script>

        <script type="text/javascript">
            dojo.require("dojo.widget.Editor");
        </script>
    </head>

    <body>
          <div class="dojo-Editor">
              editor goes here
          </div>
    </body>
</html>

本月，我们采取一种更简单的方法，将我们的富文本编辑器包含在 HTML 表单提交中。不幸的是，我们仍然不清楚如何实现这一点，因为 HTML 表单由 <input> 和 <textarea> 标签组成。幸运的是，Dojo 团队已经考虑到了这一点。请注意，我们通过其类而不是通过其标签类型来定义 Dojo 小部件。这意味着我们可以将 dojo-Editor 类附加到任何东西，而不仅仅是空的 <div> 标签。如果我们将它附加到 <textarea>（它是一个块元素，就像 <div> 一样），我们的文本编辑器将附加到 textarea，textarea 将被提交到服务器。换句话说，我们将 <div> 替换为

<textarea name="text" class="dojo-Editor">
    Hello from the Dojo editor!
</textarea>

清单 2 显示了如何将其合并到简单 HTML 表单中的示例。当表单的内容发送到服务器时，所有格式都使用 HTML 标签保留。您的应用程序将需要解析此 HTML 以了解文本中可能出现的任何格式。

<html>
    <head>

    <title>Dojo page title</title>
        <script type="text/javascript"
        src="/javascript/dojo.js"></script>

        <script type="text/javascript">
            dojo.require("dojo.widget.Editor");
        </script>
    </head>

    <body>
       <form method="POST" action="/parse.php">
           <textarea name="text" class="dojo-Editor">
               write something!
           </textarea>
         <input type="submit" />
       </form>
    </body>
</html>

当然，如果您的计划是获取输入文本并简单地在 Web 浏览器中显示它，那么您无需做太多（如果有的话）工作。您可以将输入内容放入数据库，然后在需要时检索它。（我没有检查此小部件的安全性，以确保它免受跨站点脚本攻击，因此您可能需要进一步调查它，然后再简单地接受、存储和显示用户数据。）

正如您已经看到的那样，Dojo 提供了各种各样的功能，并且不需要花费太多精力就可以开始使用。但是，使用 Dojo 包含的许多其他小部件，例如有吸引力的 DatePicker，需要我们使用 Dojo 复杂的事件处理程序，我们在此处没有对此进行检查。下个月，我们将研究 Dojo 中的事件，以及该包如何让我们将特效、Ajax 和更多小部件整合到我们的 Web 应用程序中。