分类导航

Dojo 发布时间：2022-04-21 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了掌握Dojo工具包，第1部分:Dojo入门简介(2)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

常用包介绍@H_944_1@

Dojo 1.1.1 提供了上百个包，这些包分别放入三个一级命名空间：Dojo，Dijit 和 DojoX 。其中 Dojo 是核心功能包,Dijit 中存放的是 Dojo 所有的 Widget 组件，而 DojoX 则是一些扩展或试验功能，DojoX 中的试验功能在成熟之后有可能在后续版本中移入到 Dojo 或 Dijit 命名空间中。@H_944_1@

由于 Dojo 包种类繁多，下面只列举了最常用的一些包及其功能，以方便读者有个初步了解或供以后查阅。@H_944_1@

包名功能

dojo.io 不同的 IO 传输方式。 script、IFrame 等等；
dojo.dnd 拖放功能的辅助 API 。
dojo.String 这个包可以对字符串进行如下的处理：修整、转换为大写、编码、esacpe、填充（pad）等等；
dojo.date 解析日期格式的有效助手；
dojo.event 事件驱动的 API，支持 AOP 开发，以及主题 / 队列的功能；
dojo.BACk 用来撤销@L_616_9@操作的栈管理器；
dojo.rpc 与后端服务（例如理解 JSON 语法的 Web 服务）进行通信；
dojo.colors 颜色工具包；
dojo.data Dojo 的统一数据访问接口，可以方便地读取 XML、JSON 等不同格式的数据文件；
dojo.fx 基本动画效果库；
dojo.regexp 正则表达式处理函数库；
dijit.forms 表单控件相关的 Widget 库；
dijit.layout 页面布局 Widget 库；
dijit.popup 这个包用于以弹出窗口方式使用 Widget ；
dojox.charTing 用于在页面上画各种@L_675_15@图表的工具包；
dojox.collections 很有用的集合数据结构（List、Query、Set、Stack、Dictionary...）；
dojox.encoding 实现加密功能的 API（Blowfish、MD5、Rijndael、SHA...）；
dojox.math 数学函数（曲线、点、矩阵）；
dojo.reflect 提供反射功能的函数库；
dojox.storage 将数据保存在本地存储中（例如，在浏览器中利用 Flash 的本地存储来实现）；
dojox.xml XML 解析工具包； @H_944_1@

Dojo 的安装@H_944_1@

Dojo 的安装不需要特别的环境和配置，只需要将 Dojo 包下载，解压并将其放在自己喜欢的位置就可以。@H_944_1@

第一步，下载 Dojo 包。@H_944_1@

图 2. Dojo 包的下载@H_944_1@

登陆 Dojo 官方网站的下载页面（参见参考资料），点击其上如图 2 中所示的“ Download Now ”按钮。也可以选择点击页面右边的“All releases ”，查看当前 Dojo 所有的版本，并尝试下载使用。@H_944_1@

第二步，解压下载下来的软件包，并将其放在合适的位置。@H_944_1@

在 Windows 环境下，可以使用 WinRAR 将下载下来的 Dojo 包解压。在 Linux 环境下，最好是下载后缀名为 tar.gz 的包，可以使用“tar -zxvf Dojo 压缩包文件名”命令解压 Dojo 包。@H_944_1@

如果只是尝试使用 Dojo，不需要牵涉到与服务器端的通信，可以将 Dojo 放在任何方便的位置。但最好这个位置能方便其测试页面引用 Dojo 。比如假设测试页面 test.html 的放置位置为 D:testtest.html，则 Dojo 包最好也放置为 D:testdojo，以方便 test.html 引用 Dojo 。如果牵涉到 Dojo 在服务器端的放置，则 Dojo 最好放在对应服务器的 Web 根目录下。比如假设目前 Appach 服务器的 Web 访问目录为“/home/web/webapp/ ”,则 Dojo 包最好直接放置于其下，以避免出现跨域问题和方便服务器上的多个 Web 项目引用 Dojo 。@H_944_1@

第三步，测试 Dojo 是否运行正常。@H_944_1@

图 3. 检测 Dojo 是否运行正常@H_944_1@

使用浏览器打开 dojo_path/dijit/themes/themeTester.html，如果页面的运行效果如图 3 所示，则说明 Dojo 运行正常。@H_944_1@

需要说明的是 dojo_path 在本系列文章中有两个不同的代表意义。@H_944_1@

第一表示 Dojo 包在系统中所处的绝对位置。例如如果 Dojo 包中 dojo.js 文件在系统中的位置为 D:testdojodojodojo.js，则此时 dojo_path 所代表的为 D:testdojo。@H_944_1@

第二表示页面与 Dojo 包的相对位置。例如如果页面的位置为 D:,而 Dojo 包的位置为 D:test 。要在页面中使用 Dojo，首先需要引入 Dojo，其实际引入的语句为 <script type="text/javascript" src="dojo_path/dojo/dojo.js" djConfig="parSEOnLoad:true" ></script> 。这里的 dojo_path 表示的是页面与 Doj 包的相对位置，因此其所代表的为 ./test/ 。对于本系列后面章节的实例，将会出现很多使用 dojo_path 的情况，如果要运行这些实例，请将其中的 dojo_path 替换为真实情况的值。@H_944_1@

除了通过下载 Dojo 包来使用 Dojo 以外，Dojo 组织还提供了另外一种方法来引入 Dojo 进行使用。如果不希望下载 Dojo 包而尝试对 Dojo 的使用，可以直接通过引入美国一个在线服务器主机上的 Dojo 来实现。与下载 Dojo 使用的不同点只是 dojo_path 应替换为“http://o.aolcdn.com/dojo/1.0.0”。例如要引入 dojo.js 文件，则其实际引入语句为：@H_944_1@

<mce:script 　　type="text/javascript" 　　src="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://o.aolcdn.com/dojo/1.0.0/dojo/dojo.js" 　　djCon<a href="http://code.js-code.com/tag/fig/" target="_blank" class="keywords">fig</a>="par<a href="http://code.js-code.com/tag/SEO/" title="SEO">SEO</a>nLoad: true"></mce:script> @H_944_1@

Dojo 版的 Hello World@H_944_1@

前面，我们对 Dojo 的下载和安装进行了介绍。接下来，我们将通过一个 Dojo 版的 Hello World 示例来了解如何初步使用 Dojo 工具包。本节中，将通过一个客户端登陆验证的例子来进行讲述。@H_944_1@

清单 1. 客户端登陆验证示例<html> <head> 　<<a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e>test</<a href="http://code.js-code.com/tag/titl/" target="_blank" class="keywords">titl</a>e> 　<mce:script type="text/javascript" 　　src="dojo_path/dojo/dojo.js"　　　djCon<a href="http://code.js-code.com/tag/fig/" target="_blank" class="keywords">fig</a>="par<a href="http://code.js-code.com/tag/SEO/" title="SEO">SEO</a>nLoad: true"></mce:script> 　<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">　　@import "dojo_path/dijit/themes/tundra/tundra.css"; 　</style> 　<mce:script type="text/javascript"></mce:script> </head> <body class="tundra"> 　UserName: 　<input type="text" length="20" id="myname"　dojoType="dijit.for<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">m.</a>Text<a href="http://code.js-code.com/tag/Box/" target="_blank" class="keywords">Box</a>"> 　<br> 　<a href="http://code.js-code.com/tag/passwor/" target="_blank" class="keywords">passwor</a>d: 　<input type="<a href="http://code.js-code.com/tag/passwor/" target="_blank" class="keywords">passwor</a>d" length="20" id="my<a href="http://code.js-code.com/tag/passwor/" target="_blank" class="keywords">passwor</a>d"　dojoType="dijit.for<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">m.</a>Text<a href="http://code.js-code.com/tag/Box/" target="_blank" class="keywords">Box</a>"> 　<br> 　<div id="mybutton" dojotype="dijit.form<a href="http://code.js-code.com/tag/b/" target="_blank" class="keywords">.b</a>utton">Submit</div> </body> </html> @H_944_1@

首先建立一个 test.html 的文件，在将清单 1 中的 dojo_path 根据自己的实际情况进行修改后，把清单 1 中的代码拷贝到 test.html 中，并双击运行。在输入框中分别输入“ goodguy ”和“ goodgoodstudy ”，点击 Submit 按钮则会得到一个“ Dojo World Welcome you ！”的一个弹出窗口。如果在两个输入框中输入的是其它内容，则点击 Submit 按钮就会得到“ Dojo does not like you! ”的一个弹出窗口。@H_944_1@

下面是对关键代码的解释：@H_944_1@

djConfig="parSEOnLoad: true" 表示在页面加载完成以后，启用 Dojo 的解析模块对页面中的 Dojo 标签属性（Dojo 标签属性是指由 Dojo 定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。djConfig 是使用 Dojo 页面的一个全局配置参数。通过对这个参数不同的赋值，可以控制页面中 Dojo 的解析模块是否运行， Dojo 的调试模块是否工作等。@H_944_1@

@import "dojo_path/dijit/themes/tundra/tundra.css" 表示引入 Dojo tundra 风格的层叠样式表。@H_944_1@

dojo.require("dojo.parser") 表示引入 Dijit 的解析功能模块。该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。需要与 djConfig="parSEOnLoad:true" 相区别的是，djConfig="parSEOnLoad:true" 表示确定在页面加载完成以后执行解析功能，但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。@H_944_1@

dojo.require("dijit.form.TextBox") 和 dojo.require("dijit.form.button") 表示引入 Dojo 风格的文本输入框和按钮的功能模块。@H_944_1@

dojo.connect(dijit.byId("mybutton").domNode,"login") 表示将按钮的点击事件和 login 函数联系起来，当点击 id 为 mybutton 的按钮时，执行 login 函数。@H_944_1@

dijit.byId("myname").@R_616_6938@ue("") 表示调用 id 为 myname 的 Dojo 文本框的 @R_616_6938@ue 函数，将文本框里面的内容清为空。@H_944_1@

<input type="text" length="20" id="myname" dojoType="dijit.form.TextBox"> 中的 dojoType="dijit.form.TextBox" 表示在页面中文本输入框是 Dojo 风格的。需要注意的是，通过声明 dojoType="dijit.form.TextBox" 这种方式来实现某些 Dojo 功能的使用，其表现形式上如同声明一个 HTML 标签的属性（如同 width="10px"），因此在本文中称其为 Dojo 标签属性。在页面加载完成以后，Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。@H_944_1@