本文介绍了Dojo@H_502_3@的基本相关信息，并通过一些简单示例让大家对Dojo@H_502_3@有一个初步的感性认识。之后介绍了开发环境的准备以及在开发过程中需要具备的概念。@H_502_3@
由于新版本的Dojo@H_502_3@对以前的0.4@H_502_3@版本上做了重大变革，而现有的很多资源还是基于原有版本进行介绍的，这难免会引起初学者的困惑。本文尽量使用深入浅出的方式，通过简短、平实的文字把Dojo@H_502_3@介绍给大家，以便初学者可以很容易的了解Dojo,@H_502_3@能够在最短时间内尽快的学习使用起来。@H_502_3@
1. Dojo介绍@H_502_3@@H_502_3@
1.1. Dojo是什么@H_502_3@@H_502_3@
Dojo@H_502_3@是一个使用Javascript@H_502_3@编写的开源DHTML@H_502_3@工具包。它建立在很多已捐献的代码基础之上,@H_502_3@这就是为什么我们谈到它时，说它是一个"@H_502_3@统一"@H_502_3@的工具。利用Dojo@H_502_3@，可以很容易地建立动态web@H_502_3@页面以及其他支持Javascript@H_502_3@的环境。可以使用Dojo@H_502_3@封装的组件，它使web@H_502_3@站点更具有可用性、更快速的响应、更多的功能。Dojo@H_502_3@的事件系统，I/O API,@H_502_3@和泛型语言增强组成了强大的程序环境的基础。可以使用Dojo@H_502_3@建造工具来为Javascript@H_502_3@代码编写命令行单元测试。可以使用Dojo @H_502_3@包来使得代码更容易去维护和更少的平台依赖。@H_502_3@
1.2. 使用Dojo的好处
l @H_502_3@@H_502_3@@H_502_3@宽度和广度：@H_502_3@Dojo@H_502_3@是一个“@H_502_3@全堆栈”@H_502_3@的应用框架。不是那种把几个不同的源码简单拼凑在一起的组件。Dojo@H_502_3@通过提供集成的底层架构和广泛的可选模块允许每个组件构造成一个高质量积木式的可信赖集合。这些组件给普通用户遇到的问题提供了良好的解决方案，他它们也很容易调整以满足各种需求。从基于面板的设计到客户端图表、到数据绑定、到久经考验的模块系统，Dojo@H_502_3@是一个考虑了众多用户体验的刚性的底层架构。@H_502_3@ @H_502_3@
l @H_502_3@@H_502_3@@H_502_3@质量：@H_502_3@国际化以及易访问的底层架构是通过Dojo“@H_502_3@纤维”@H_502_3@编织而成。每次击键都会有正确提示。所有组件作为一个粘着的整体契合在一起。每件东西都是可以很容易与CSS@H_502_3@一起进行定制。只消稍做调整即可获得一个漂亮整洁的外观变化，以大量的用户体验为基础（这些人不仅有普通用户，还有设计师和开发人员）做了设计和测试，这些都是它的特点。 @H_502_3@@H_502_3@
@H_502_138@l @H_502_3@@H_502_3@@H_502_3@性能：@H_502_3@Dojo@H_502_3@被用于每天都有高访问量和高流量的站点上，采用Dojo@H_502_3@的构造工具是为什么如此做的一个关键原因。Dojo@H_502_3@软件包系统很容易管理大规模的UI@H_502_3@开发项目以及构建顶部的系统层，可以做出令人吃惊的应用。所有这些无需代码修改。Dojo@H_502_3@也把高性能的普通应用实现打包到了它的核心内，并且Dojo 0.9@H_502_3@后的版本在性能上给予了更多的关注，减少了代码。它是个小巧、紧凑的工具包并且速度飞快。这些特点使Dojo@H_502_3@成为扩展和构建的理想平台。 @H_502_3@@H_502_3@ @H_502_138@l @H_502_3@@H_502_3@@H_502_3@社区@H_502_3@：Dojo@H_502_3@是一个开源的社区，个人和公司都能走到一起公平竞争，这使得大家在使用这些工具时彼此获益。所有开发都是在开放的环境中进行，并且有意识的降低学习门槛。@H_502_3@1.3. Dojo的版本历史@H_502_3@@H_502_3@
Dojo@H_502_3@项目历史有0.4.x,0.9,1.0.x@H_502_3@等稳定版本，但0.9@H_502_3@是对之前0.4.x@H_502_3@的重大变革，与0.4.x@H_502_3@是非兼容的，与其后的版本是兼容的。@H_502_3@
由于Dojo@H_502_3@项目的开发者已经把主要精力投入到新版本的开发维护上，所以本文是基于0.9@H_502_3@以及后续版本的代码基础上进行分析。@H_502_3@
截止到本文截稿时，Dojo@H_502_3@最新的版本是1.0.2@H_502_3@。@H_502_3@
1.4. Dojo的安装@H_502_3@@H_502_3@
有三种方式安装Dojo:@H_502_3@@H_502_3@
1. @H_502_3@@H_502_3@@H_502_3@直接连接AOL@H_502_3@的内容分布网络(CDN)@H_502_3@。只要在网页中加入<script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"></script>@H_502_3@即可@H_502_3@
2. @H_502_3@@H_502_3@@H_502_3@下载Dojo@H_502_3@最新版本代码，安装在本机@H_502_3@
3. @H_502_3@@H_502_3@@H_502_3@从配置管理服务器得到每日的build@H_502_3@版本@H_502_3@
第1@H_502_3@种方式无法深入代码内部去了解Dojo@H_502_3@实现机制且需时刻在线，对于第3@H_502_3@种方式的每日最新也无必要，只要有一个最稳定版本即可。第2@H_502_3@种方式基本能弥补其他两种的不足，笔者本人推荐使用第2@H_502_3@种方式。@H_502_3@
1.5. Dojo的包系统分解@H_502_3@@H_502_3@
@H_502_3@
Dojo@H_502_3@主要分成4@H_502_3@个包：dojo@H_502_3@是核心，包括Ajax@H_502_3@基础,@H_502_3@以及事件、JSON@H_502_3@、CSS@H_502_3@查询等基本内容；dijit@H_502_3@包含了各种基于模板的布局、组件类，可以在它们的基础上直接使用或者继承定制；dojox@H_502_3@是上述两个包的扩展包，提供了更加丰富绚丽的组件以及功能；util@H_502_3@是辅助工具包。--from kswaking专栏@H_502_3@
@H_502_3@
1. 简单示例@H_502_3@
我们对任何事物的了解都是从感性认识开始的，所以在这里我们也用一个经典的“Hello world@H_502_3@！”示例来表现Dojo@H_502_3@的使用。@H_502_3@@H_502_3@
1.2. 代码分析@H_502_3@
| <html>@H_502_3@ @H_502_3@<title>Hello World</title>@H_502_3@ @H_502_3@ @H_502_3@@H_502_3@<style type="text/css">@H_502_3@ @H_502_3@ @H_502_3@@import "@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@dijit/themes/tundra/tundra.css";@H_502_3@ @H_502_3@ @H_502_3@@import "@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@dojo/resources/dojo.css"@H_502_3@ @H_502_3@ @H_502_3@</style> <!--(1)-->@H_502_3@@H_502_3@ @H_502_3@<script type="text/javascript" src="@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@" @H_502_3@ @H_502_3@djConfig="parSEOnLoad: true,isDebug: true"></script><!--(2)-->@H_502_3@@H_502_3@ @H_502_3@<script type="text/javascript">@H_502_3@ @H_502_3@dojo.require("dojo.parser"); <!--(3)-->@H_502_3@@H_502_3@ @H_502_3@dojo.require("dijit.form.Button"); <!--(4)-->@H_502_3@@H_502_3@ @H_502_3@<script type="text/javascript"> @H_502_3@@H_502_3@ @H_502_3@dojo.addOnLoad(function(){@H_502_3@ @H_502_3@dojo.connect(dojo.byId('helloBtn'),@H_502_3@ @H_502_3@alert("Hello world!");@H_502_3@ @H_502_3@});<!--(5)-->@H_502_3@ @H_502_3@@H_502_3@ @H_502_3@</script> @H_502_3@@H_502_3@ @H_502_3@<body class="tundra">@H_502_3@ @H_502_3@<button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button><!--(6)-->@H_502_3@@H_502_3@ </html>@H_502_3@ |
(1)@H_502_3@ @H_502_3@<style type="text/css">@H_502_3@
@H_502_3@ @H_502_3@@import "../scripts/dojo-1.0.2/dijit/themes/tundra/tundra.css";@H_502_3@
@H_502_3@ @H_502_3@@import "../scripts/dojo-1.0.2/dojo/resources/dojo.css"@H_502_3@
@H_502_3@ @H_502_3@</style>@H_502_3@
引入css@H_502_3@样式表的定义文件，示例使用的是dojo@H_502_3@自带的css@H_502_3@样式。可替换成我们自定义的样式文件。@H_502_3@@H_502_3@
(2) <script type="text/javascript" src="../scripts/dojo-1.0.2/dojo/dojo.js" @H_502_3@
@H_502_3@djConfig="parSEOnLoad: true,isDebug: true"></script>@H_502_3@
① @H_502_3@@H_502_3@@H_502_3@确定dojo.js@H_502_3@文件的相对路径，由此确定使用dojo@H_502_3@的方式编程，这是必需的。@H_502_3@@H_502_3@
② @H_502_3@@H_502_3@@H_502_3@djConfig="parSEOnLoad: true" @H_502_3@与(3)@H_502_3@中的 dojo.require("dojo.parser");@H_502_3@一起配合来使页面能使用Dojo@H_502_3@的解析架构。@H_502_3@@H_502_3@
③ @H_502_3@@H_502_3@@H_502_3@djConfig@H_502_3@是Dojo@H_502_3@内置的一个全局对象，可以通过它来控制Dojo@H_502_3@的行为。在本示例中，isDebug@H_502_3@是djConfig@H_502_3@的一个属性，设置是否为debug@H_502_3@模式，如果为真，则console.debug@H_502_3@的输出有效，这在开发时很有用，在发布时建议设置为false@H_502_3@。@H_502_3@@H_502_3@
(4) dojo.require("dijit.form.Button");@H_502_3@声明将要使用的dojo@H_502_3@的组件类型。类似Java@H_502_3@中的import@H_502_3@语句@H_502_3@@H_502_3@
(5) <script type="text/javascript"> @H_502_3@@H_502_3@
@H_502_3@dojo.addOnLoad(function(){@H_502_3@
@H_502_3@dojo.connect(dojo.byId('helloBtn'),@H_502_3@
@H_502_3@alert("Hello world!");@H_502_3@
① dojo.addOnLoad@H_502_3@表示在HTML@H_502_3@页面加载后执行脚本程序@H_502_3@@H_502_3@
② dojo.connect@H_502_3@用于连接事件处理器（某一个函数）到一个元素或者一个对象。@H_502_3@@H_502_3@
(6) <button dojoType="dijit.form.Button" id="helloBtn">Say Hello</button>@H_502_3@这是在页面中定义一个要使用的按钮控件，由dojoType@H_502_3@属性指明可复用到的dojo@H_502_3@组件类型是dijit.form.Button@H_502_3@@H_502_3@
1.3. 实现方式@H_502_3@
1.3.1. 标签式实现@H_502_3@
在页面中声明组件的方式可以像上面的示例一样，直接在标签中用dojoType@H_502_3@对应的属性值来表明该组件对应的类型以及可实现的功能。@H_502_3@@H_502_3@
除此之外还有另一种实现方式，编程实现。@H_502_3@
1.3.2. 编程实现
标签式实现需要在页面开发的时候，就要确定组件的类型、传入的参数，编程方式与之相比较就具有了更大的灵活性，参数可以动态生成以及页面与业务逻辑分离等多种好处。@H_502_3@
下面我们用编程方式来举例来实现之前Hello World@H_502_3@页面同样的功能。 @H_502_3@@H_502_3@@H_502_3@
| <html>@H_502_3@ @H_502_3@<hea@H_502_3@d>@H_502_3@ @H_502_3@<title>Hello World</title>@H_502_3@ @H_502_3@<style type="text/css">@H_502_3@ @H_502_3@ @H_502_3@@import "@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@dijit/themes/tundra/tundra.css";@H_502_3@ @H_502_3@ @H_502_3@@import "@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@dojo/resources/dojo.css"@H_502_3@ @H_502_3@ @H_502_3@</style> <!--(1)-->@H_502_3@ @H_502_3@<script type="text/javascript" src="@H_502_3@../dojoroot/dojo1.0.2/@H_502_3@" @H_502_3@ @H_502_3@djConfig="parSEOnLoad: true,isDebug: true"></script><!--(2)-->@H_502_3@@H_502_3@ @H_502_3@<script type="text/javascript">@H_502_3@ @H_502_3@dojo.require("dojo.parser"); <!--(3)-->@H_502_3@@H_502_3@ @H_502_3@dojo.require("dijit.form.Button"); <!--(4)-->@H_502_3@@H_502_3@ @H_502_3@<script type="text/javascript"> @H_502_3@@H_502_3@ @H_502_3@function constructHelloBtn(){@H_502_3@ @H_502_3@var btnOutDiv=dojo.byId("btnOutDiv");@H_502_3@ @H_502_3@helloBtnDiv=document.createElement("div");@H_502_3@ @H_502_3@var helloBtn=new dijit.form.Button({id:"helloBtn",label:"Say Hello"},helloBtnDiv);@H_502_3@ @H_502_3@btnOutDiv.appendChild(helloBtn.domNode);@H_502_3@ @H_502_3@return helloBtn;@H_502_3@ @H_502_3@dojo.addOnLoad(function(){<!--(5)-->@H_502_3@@H_502_3@ @H_502_3@var helloBtn=constructHelloBtn(); @H_502_3@<!--(7)-->@H_502_3@@H_502_3@ @H_502_3@dojo.connect(dojo.byId('helloBtn'),@H_502_3@ @H_502_3@alert("Hello world!");@H_502_3@ @H_502_3@</script> @H_502_3@@H_502_3@ @H_502_3@<body class="tundra">@H_502_3@ @H_502_3@<div id="btnOutDiv"></div><!--(6)-->@H_502_3@@H_502_3@ </html>@H_502_3@ |
标识(1)(2)(3)(4)@H_502_3@的形式、含义与之前完全一致，这里不再赘述。我们把关注点主要集中在(5)(6)(7)@H_502_3@上。@H_502_3@
先看(6)@H_502_3@，标签式实现要确定该组件的dojoType,@H_502_3@以及参数，比如id@H_502_3@。而编程方式实现只是定义一个html div@H_502_3@组件作为将来放置动态生成的dojo@H_502_3@组件的外层容器,@H_502_3@唯一的id@H_502_3@是为了将来查找该div@H_502_3@做准备。@H_502_3@
(5)@H_502_3@处还是dojo.addOnLoad@H_502_3@函数，表示在HTML@H_502_3@页面加载时执行脚本程序，与之前代码不同的是，多了var helloBtn=constructHelloBtn();@H_502_3@语句来构建一个按钮组件的实例。深入到自定义的constructHelloBtn()@H_502_3@函数内部，我们可以看到，首先查找到在(6)@H_502_3@处定义的div@H_502_3@容器，之后新建一个dijit.form.Button@H_502_3@的实例,@H_502_3@其中设置id,label@H_502_3@参数。这里是简单实现，我们可以想见其他诸如参数从某个配置文件动态读取后传入的方式。最后是把生成的该组件实例放入到外层div@H_502_3@容器中用以显示。@H_502_3@
1. 数据@H_502_3@
1.1. 了解dojo.data@H_502_3@
dojo.data@H_502_3@提供了封装的标准的数据存取API@H_502_3@，作为统一的数据访问层而存在。所有的数据都是item@H_502_3@或者item@H_502_3@的属性。Dojo.data@H_502_3@提供了一个基本的@H_502_3@ItemFileReadStore@H_502_3@类来读取JSON@H_502_3@格式数据，而dojox@H_502_3@提供了更多扩展，比如XmlStore, @H_502_3@CsvStore,OpmlStore@H_502_3@等，我们也可以自定义自己的store@H_502_3@类型。@H_502_3@@H_502_3@
在dojo.data@H_502_3@的操作都是异步的，可以不刷新页面而取回数据。@H_502_3@@H_502_3@
1.2. dojo.data的一些术语与传统数据库的对比@H_502_3@@H_502_3@@H_502_3@
| dojo.data@H_502_3@ |
||
| data source@H_502_3@ |
@H_502_3@ |
|
| datastore@H_502_3@ |
@H_502_3@ |
|
| item@H_502_3@ |
@H_502_3@ |
|
| attribute@H_502_3@ |
@H_502_3@ |
|
| reference@H_502_3@ |
@H_502_3@ |
有些类似外键依赖，但外键指向的父记录，而reference@H_502_3@指向子记录的列表@H_502_3@@H_502_3@ |
| identity@H_502_3@ |
@H_502_3@ |
|
| query@H_502_3@ |
从目前看，语法不如Where@H_502_3@条件子句丰富，只支持and@H_502_3@，不支持or@H_502_3@@H_502_3@ |
@H_502_3@
@H_502_3@
1.3. JSON@H_502_3@
@H_502_3@
JSON@H_502_3@(JavaScript Object Notation) @H_502_3@是一种轻量级的数据交换格式。它是基于Javascript@H_502_3@标准的一个子集，@H_502_3@JavaScriptd@H_502_3@的数据结构(@H_502_3@如字符串、数组、对象)@H_502_3@的表示方式恰好与JSON@H_502_3@相同,@H_502_3@所以JSON@H_502_3@@H_502_3@可以被Javascript@H_502_3@无损的识别。@H_502_3@它是一种简单文本格式，与XML@H_502_3@相比，它更加易读、更少的数据冗余。@H_502_3@@H_502_3@
一段典型的JSON@H_502_3@格式数据形如：@H_502_3@@H_502_3@
| { identifier: 'name', |
假设该段数据存放于@H_502_3@pantry_spices.@H_502_3@json@H_502_3@@H_502_3@文件，@H_502_3@@H_502_3@相应的Dojo datastore@H_502_3@的声明和使用如下：@H_502_3@@H_502_3@
@H_502_3@
| <div dojoType="dojo.data.ItemFileReadStore"@H_502_3@ jsId="pantryStore"@H_502_3@ |
@H_502_3@
(1) @H_502_3@@H_502_3@@H_502_3@指明了datastore@H_502_3@的类型是dojo.data.ItemFileReadStore@H_502_3@@H_502_3@；数据的url,@H_502_3@请注意这里除了可以是文件路径，也可以是一段请求得到的流；以及该datastore@H_502_3@的jsId@H_502_3@@H_502_3@
(2) @H_502_3@@H_502_3@@H_502_3@@H_502_3@这里声明了dojoType@H_502_3@为dijit.form.FilteringSelect@H_502_3@的一个组件，该组件在html@H_502_3@页面上展现形式为一个下拉框，需要有数据填充，其中store@H_502_3@属性指向了jsId@H_502_3@为pantryStore@H_502_3@的一个datastore@H_502_3@，由此把刚刚在（1@H_502_3@）处定义的datastore@H_502_3@的数据关联了起来。@H_502_3@@H_502_3@@H_502_3@
1.4. datastore的读取@H_502_3@@H_502_3@@H_502_3@
| var@H_502_3@@H_502_3@ pantryStore = new@H_502_3@ dojo.data@H_502_3@.ItemFileReadStore@H_502_3@({@H_502_3@url: "pantry_items.json"@H_502_3@ }@H_502_3@ )@H_502_3@; //(1)@H_502_3@ var@H_502_3@@H_502_3@ gotList = function@H_502_3@(@H_502_3@items,request){ @H_502_3@//(2)@H_502_3@ |
@H_502_3@
(1) @H_502_3@@H_502_3@@H_502_3@@H_502_3@此处用编程实现方式定义了一个datastore,@H_502_3@在这里是@H_502_3@dojo.data@H_502_3@.ItemFileReadStore@H_502_3@@H_502_3@，其实还可以是其它的datastore@H_502_3@类型，如XmlStore,CsvStore@H_502_3@等，甚至可以是自定义的datastore@H_502_3@类型。@H_502_3@@H_502_3@@H_502_3@
(2) @H_502_3@@H_502_3@@H_502_3@自定义函数，为fetch@H_502_3@函数做准备，用于数据处理。@H_502_3@@H_502_3@
(3) @H_502_3@@H_502_3@@H_502_3@getValue@H_502_3@函数，它是由dojo.data@H_502_3@封装的API@H_502_3@，用于得到某个item@H_502_3@的某个属性名称的值。具体可参考Dojo API@H_502_3@说明。@H_502_3@@H_502_3@
(4) @H_502_3@@H_502_3@@H_502_3@自定义函数，为fetch@H_502_3@函数做准备，用于异常处理。@H_502_3@@H_502_3@
(5) @H_502_3@@H_502_3@@H_502_3@执行数据查询的语句，需要传入一些查询选项，比如在示例中出现的：@H_502_3@@H_502_3@
onComplete:@H_502_3@在得到所有符合条件的数据后的处理函数，参数为item@H_502_3@的列表；@H_502_3@@H_502_3@
onError:@H_502_3@出现异常的处理函数；@H_502_3@@H_502_3@
query: @H_502_3@@H_502_3@查询条件，是一个Object@H_502_3@类型，形如{@H_502_3@@H_502_3@@H_502_3@ name: '?hite*',aisle: 'Condiments' @H_502_3@},”,”@H_502_3@@H_502_3@表示条件的and@H_502_3@关系，通配符”?”,”*”@H_502_3@表示一个或多个字符（包含0@H_502_3@个）；@H_502_3@@H_502_3@@H_502_3@
此外，还有@H_502_3@@H_502_3@
queryOptions: @H_502_3@@H_502_3@查询选项，指明是否忽略大小写或是否深度查找item@H_502_3@的子；@H_502_3@@H_502_3@
onBegin:@H_502_3@@H_502_3@在查询前的处理函数； @H_502_3@@H_502_3@
onItem: @H_502_3@@H_502_3@在遇到符合条件的每一个item@H_502_3@时的处理函数；@H_502_3@@H_502_3@
@H_502_3@等。@H_502_3@@H_502_3@
还有一些其他的选项，@H_502_3@具体可参考Dojo API@H_502_3@说明。@H_502_3@
@H_502_3@@H_502_3@@H_502_3@