第 1 部分: Dojo 入门简介

伴随 Web 2.0, Ajax 和 RIA 的热潮,各类 Ajax 开发工具包如雨后春笋般蓬勃发展,Dojo 正是这些工具包中的佼佼者。Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 JavaScript 库,简单易用的小部件(Widget)系统和一个测试框架,此外,Dojo 的开源开发社区还在不停地为它提供新的功能。javascript

Ajax 资源中心

请访问 Ajax 资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括不少文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。html

Dojo 是一个 JavaScript 实现的开源 DHTML 工具包。它是在几个项目捐助基础上创建起来的(nWidgets,f(m),Burstlib) 。 Dojo 的最初目标是解决开发 DHTML 应用程序遇到的一些长期存在的历史问题,如今,Dojo 已经成为了开发 RIA 应用程序的利器:java

  • Dojo 让您更容易地为 Web 页面添加动态能力,您也能够在其它支持 JavaScript 的环境中使用 Dojo ;
  • 利用 Dojo 提供的组件,您能够提高 Web 应用程序的可用性和交互能力;
  • Dojo 很大程度上屏蔽了浏览器之间的差别性,所以,您能够不用担忧 Web 页面是否在某些浏览器中可用;
  • 经过 Dojo 提供的工具,您还能够为代码编写命令行式的单元测试代码。
  • Dojo 的打包工具能够帮助您优化 JavaScript 代码,而且只生成部署应用程序所需的最小 Dojo 包集合。

接下来,咱们看看 Dojo 是如何组织这些功能组件的。web

Dojo 体系架构

Dojo 的体系架构如图1所示,整体上来看,Dojo 是一个分层的体系架构。最下面的一层是包系统,Dojo API 的结构与 Java 很相似,它把全部的 API 分红不一样的包(package),当您要使用某个 API 时,只需导入这个 API 所在的包。包系统上面一层是语言库,这个语言库里包含一些语言工具 API,相似于 Java 的 util 包。再上一层是环境相关包,这个包的功能是处理跨浏览器的问题。ajax

图 1. Dojo 体系架构图

图 1. Dojo 体系架构图

Dojo 大部分代码都位于应用程序支持库,因为过小限制,图 1 中没有列出全部的包。开发人员大部分时候都在调用这个层中的 API,好比,用 IO 包能够进行 Ajax 调用。正则表达式

最上面的一层是 Dojo 的 Widget 系统,Widget 指的是用户界面中的一个元素,好比按钮、进度条和树等。 Dojo 的 Widget 基于 MVC 结构。它的视图做为一个 Template(模板)来进行存放,在 Template 中放置着 HTML 和 CSS 片断,而控制器来对该 Template 中的元素进行操做。 Widget 不只支持自定义的样式表,而且可以对内部元素的事件进行处理。用户在页面中只须要加入简单的标签就可使用。在这一层中,存在数百个功能强大的 Widget 方便用户使用,包括表格、树、菜单等。编程

经常使用包介绍

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

因为 Dojo 包种类繁多,下面只列举了最经常使用的一些包及其功能,以方便读者有个初步了解或供之后查阅。跨域

包名 功能
   
dojo.io 不一样的 IO 传输方式。 script、IFrame 等等;
dojo.dnd 拖放功能的辅助 API 。
dojo.string 这个包能够对字符串进行以下的处理:修整、转换为大写、编码、esacpe、填充(pad)等等;
dojo.date 解析日期格式的有效助手;
dojo.event 事件驱动的 API,支持 AOP 开发,以及主题 / 队列的功能;
dojo.back 用来撤销用户操做的栈管理器;
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 用于在页面上画各类统计图表的工具包;
dojox.collections 颇有用的集合数据结构(List、Query、Set、Stack、Dictionary...);
dojox.encoding 实现加密功能的 API(Blowfish、MD五、Rijndael、SHA...);
dojox.math 数学函数(曲线、点、矩阵);
dojo.reflect 提供反射功能的函数库;
dojox.storage 将数据保存在本地存储中(例如,在浏览器中利用 Flash 的本地存储来实现);
dojox.xml XML 解析工具包;

Dojo 的安装

Dojo 的安装不须要特别的环境和配置,只须要将 Dojo 包下载,解压并将其放在本身喜欢的位置就能够。浏览器

  • 第一步,下载 Dojo 包。

    图 2. Dojo 包的下载
    图 2. Dojo 包的下载

    登录 Dojo 官方网站的下载页面(参见 参考资料),点击其上如图 2 中所示的“ Download Now ”按钮。也能够选择点击页面右边的“All releases ”,查看当前 Dojo 全部的版本,并尝试下载使用。

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

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

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

  • 第三步,测试 Dojo 是否运行正常。

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

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

须要说明的是 dojo_path 在本系列文章中有两个不一样的表明意义。

  • 第一表示 Dojo 包在系统中所处的绝对位置。例如若是 Dojo 包中 dojo.js 文件在系统中的位置为 D:\test\dojo\dojo\dojo.js,则此时 dojo_path 所表明的为 D:\test\dojo。
  • 第二表示页面与 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 替换为真实状况的值。

除了经过下载 Dojo 包来使用 Dojo 之外,Dojo 组织还提供了另一种方法来引入 Dojo 进行使用。若是不但愿下载 Dojo 包而尝试对 Dojo 的使用,能够直接经过引入美国一个在线服务器主机上的 Dojo 来实现。与下载 Dojo 使用的不一样点只是 dojo_path 应替换为“http://o.aolcdn.com/dojo/1.0.0”。例如要引入 dojo.js 文件,则其实际引入语句为:

<script 
    type="text/javascript" 
    src="//o.aolcdn.com/dojo/1.0.0/dojo/dojo.js" 
    djConfig="parseOnLoad: true">
</script>