资源描述
dojo快速入门资料.docx
《dojo快速入门资料.docx》由会员分享，可在线阅读，更多相关《dojo快速入门资料.docx（20页珍藏版）》请在冰豆网上搜索。
dojo快速入门资料
DOJO快速入门
-----------------------------------------------------------------------------------------------------
为什么是dojo?
dojoToolkit是一个开源的JavaScript工具包用于构造web应用。
它通过提供设计良好的api和工具包缩短了实现设计的时间。
它是轻量极其健壮的，提供工具来实现DOM操作,动画,ajax,event和键盘标准化,国际化I18N,可访问性（a11y）.Dojo基本上是单独一个轻量级的实体（26kb）.Dojo是完全免费的，又一组活跃于社区的developer开发。
无论项目的大小，Dojo都是一个弹性的解决方案。
内建的package系统不再使查找依赖成为问题,build系统合并优化各层的代码,D.O.H使单元和回归测试很容易。
Add-ons
除了dojo.js提供的大量工具，通过调用dojo.require（）,使用强大的package系统可以为系统增加很多功能。
Dojo核心包括drag&drop,高级ajax传输,字符串处理,强大的DataAPI等等。
无穷的可能性
dojotoolkit也包括称为Dijit的项目包。
它是用于使用和创建封装的和可重用的组件或widgets。
它提供可访问，可扩展和基于主题的组件来建造你的web应用和站点。
它也提供强大的api来开发你自己的widgets或者配置已有widgets的行为。
最新的技术
dojo通过帮助开发者创造丰富的交互性的web应用来实现WEB2.0的设想。
Internet的静态内容越来越少，更多的是动态数据库和及时响应。
这种趋势往往需要优雅的界面和可靠的操作工具。
当没有网络连接时，web应用如果没有离线技术就变得不能用了。
但是dojo仍然可以保障用户使用一些功能即使没有网络连接。
无论用户处于什么状态，离线功能是保证web应用被认为是可靠工具的关键所在。
获得代码
下载最新发布的DojoToolkit版本:
http:
//download.dojotoolkit.org/current-stable/
你会看到许多可用的文件。
标准发布文件dojo-release-#.#.#以tar.gz或zip格式存在。
文件包后缀为-src表示这是一个"源代码发布版",包含所有构造客户定制Dojo的测试和公用方法。
解压文件包到一个目录中（最好放到一个适合做Ajax开发的webServer上）。
假定目录名是"js/",那么目录结构应该是如下图所示:
安装DojoToolkit,最重要的事情是知道dojo.js位于什么地方。
当dojo.js被页面加载以后，Dojo的packagesystem会处理如何加载所有其他的依赖和相关模块。
如果要验证下载和安装的正确性，可以通过浏览器访问http:
//localhost/js/dojo-release/dojo/tests/runTests.html或者访问dijit的测试页面http:
//localhost/js/dojo-release/dijit/tests.
"TheDojoBook"是一本免费的指南教程，提供了更深度的描述关于怎样获得Dojo源代码以及可用的不同发布版本。
开始步骤
先构造一个HTML模版dojo-tutorial.html，假定存放在..js/dojo-tutorial.html目录下
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN"
"http:
//www.w3.org/TR/html4/strict.dtd">
DojoToolkitTestPage
--loadthedojotoolkitbase-->
djConfig="parseOnLoad:
true,isDebug:
true">
/*ourJavaScriptwillgohere*/
/*ourCSScangohere*/
--thisisaTypicalWebPagestartingpoint...-->
DojoSkeletonPage
SomeContentToReplace
页面中的DOCTYPE定义为"HTML/4.01Strict",严格的W3C验证。
配置Dojo
Dojo可以runtime实时设定各种配置信息。
最常用的两个配置参数是parseOnLoad和isDebug。
parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。
可以直接在装载dojo.js的标签中通过djConfig属性设置这些选项。
简单的更改HTML模板来添加这个新属性。
djConfig="parseOnLoad:
true,isDebug:
true">
如果以上没有通过验证，也可以在dojo.js被加载前构造一个全局的djConfig变量。
vardjConfig={
isDebug:
true,parseOnLoad:
true
};
两个例子有同样的效果:
以debug模式装载dojo.js,同时运行解析器。
什么时候可以开始？
只要dojo.js在标签中被正确引用,就可以开始写一些功能代码了。
不同的浏览器对于"ready"有不同的定义。
dojo.addOnLoad（）是用来被触发执行其他功能代码的dojo函数。
任何可能影响DOM的操作都应该通过dojo.addOnLoad（）被调用执行。
例如，
//averycommonmethodofloadingcodeonLoad
varinit=function（）{
alert（"testing"）;
console.log（"Irunafterthepageisready.Seethisintheconsole"）;
};
dojo.addOnLoad（init）;
//and/orpassananonymousfunction
dojo.addOnLoad（function（）{
console.log（"Ialsorun,butsecond."）;
}）;
dojo.addOnLoad是Dojo的重要方法。
需要记住的是:
当使用Dojo时候，不要设置onLoad（）方法到
标签中。
dojo.addOnlLoad（someFunc）可以替代
和window.onload=someFunc。
不仅仅是Dojo
Dojo通过dojo.require（）装载其他相关代码。
这个功能允许我们使用那些不属于Dojo.js的DojoToolkit，比如拖放功能，动画，Dijitwidgets,DojoX项目或者开发者自己的代码。
比如，在模块dijit.TitlePane和dijit.form.Button的页面中，使用TitlePaneWidget和dijit按钮。
dojo.require（"dijit.form.Button"）;
dojo.require（"dijit.TitlePane"）;
dojo.addOnLoad（function（）{
dojo.byId（"testHeading"）.innerHTML="We'reonourway!
";
console.log（"onLoadfiresafterrequire（）isdone"）;
}）;
每个模块都有自己的dojo.require（）,可以不用装载已有的代码。
由dojo.addOnLoad执行的代码要等dojo.require（）装载完毕才可以运行，这样保证了安全和方便。
所有可用的widgets和module都可以在DijitAPI中找到或者到dijit/tests/的文件夹中查找。
在最后的例子中，添加了经常使用的方法:
dojo.byId（）.它返回一个domNode通过id属性。
dojo.byId（）是一个方便的方法来访问和操作一个特定节点。
在这里通过修改.innnerHtml来改变body的heading文字。
如果你看到的是"We'reonourway"，那么就是表明正在做web开发:
dojo.bliss。
如果遇到errors就表明工作出了问题。
大量的常规错误德及决办法都可以在FAQ中找到。
操作DOM
Dojo提供了一个函数dojo.query（）.用来处理文档对象模型（DOM），其全部内容可以足够专门写一本书来介绍。
以下的部分简单讲解怎样使用dojo.query（）。
dojo.require（"dojo.NodeList-fx"）;
dojo.addOnLoad（function（）{
//ourdomisready,getthenode:
dojo.query（"#testHeading"）
//add"testClass"toitsclass=""attribute
.addClass（"testClass"）
//andfadeitoutafter500ms
.fadeOut（{delay:
500}）.play（）;
}）;
为页面标题添加CSS的样式".testClass"并且设置background-color:
red;
testClass{
background-color:
red;
}
dojo.query（）返回一个dojo.NodeList的实例，这是一个dom的节点数组。
为了展示效果，我们需要增加一些内容到页面:
DojoSkeletonPage
Firstlink
SecondLink
Firstparagraph
Secondparagraph
Thirdparagraph
使用dojo.query（）:
dojo.require（"dojo.NodeList-fx"）;
dojo.addOnLoad（function（）{
//geteachelementwithclass="para"
dojo.query（".para"）
.addClass（"testClass"）
.fadeOut（{delay:
1000}）.play（）;
}）;
经过一秒钟的延迟，所有
标签将会变红然后褪色。
使用dojo.NodeList的效果看起来很明显，在以后的章节会介绍更多的相关内容。
多数dojo.query（）函数链都可以用独立的函数来替代得到相同的结果。
比如:
dojo.query（"#testHeading"）.addClass（"testClass"）;和dojo.addClass（"testHeading","testClass"）的效果就一样。
事件传递
我们要接触的下一个重要概念是如何进行页面交互。
现在可以为标题替换文字，那么是否可以做一些更有趣的事情呢？
比如，当用户点击标题时候，就替换标题文字。
dojo.connect（）是一个一站式解决方案:
dojo.addOnLoad（function（）{
varnode=dojo.byId（"testHeading"）;
dojo.connect（node,"onclick",function（）{
node.innerHTML="I'vebeenclicked";
}）;
}）;
另一种比较方法是通过使用dojo.query（）为标题替换文字:
dojo.addOnLoad（function（）{
dojo.query（"#testHeading"）
.style（"cursor","pointer"）
.connect（"onclick",function（）{
this.innerHTML="I'vebeenclicked";
}）;
}）;
以上示例程序增加样式.style（），当鼠标滑过标题时会变成箭头。
通过简单的css来简化代码。
所以.style（）具有动态添加和去除节点样式的特点。
通过dojo.connect（）可以在同一时间把onclick事件连接到多个节点上。
当前例子中NodeList仅有一个节点，当然也可以添加更多的节点进行测试。
例如:
使用规范化的事件对象dojo.connect（），禁止页面所有链接跳转:
vardisableLinks=function（）{
dojo.query（"a"）.connect（"onclick",function（e）{
e.preventDefault（）;//stoptheevent
console.log（'clicked:
',e.target）;//thenodeweclickedon
}）;
};
dojo.addOnLoad（disableLinks）;
代码e.preventDefault（）会阻止需要被执行事件的发生。
本例中，这个函数阻止了click事件。
在作为参数传递时候，事件经常写成"e"或"evt"。
更多关于正规化事件对象的介绍可以参考Dojo网站的"EventObjectBookPage".
我们可以把特定对象的方法连接起来，然后在同一范围内执行。
比如在Dijit中声明类或者构造动画的时候，会用到这个特点。
下面定义一个包含若干方法的简单对象，然后通过dojo.connect（）把这些方法连接起来:
varmineObj={
aMethod:
function（）{
console.log（'runningA'）;
},
bMethod:
function（）{
console.log（'runningB'）;
}
};
varotherObj={
cMethod:
function（）{
console.log（'runningC'）;
}
};
dojo.addOnLoad（function（）{
//runbMethod（）wheneveraMethod（）getsrun
dojo.connect（mineObj,"aMethod",mineObj,"bMethod"）;
//runanentirelydifferentobject'smethodviaaseparateconnection
dojo.connect（mineObj,"bMethod",otherObj,"cMethod"）;
//startchainofevents
mineObj.aMethod（）;
}）;
终端会显示"runningA;runningB;runningC"。
要学习dojo.connect（）的强大功能，可以参考dojo.connect（）API或者DojoBook。
一些特性:
Dojo动画
Dojo拥有一个强大的动画系统，带有几个预先制作好的动画。
给项目中添加一些可视化的功能通常不太容易，当然其效果会给用户有趣的体验。
所有的动画都使用一个"magicobject"作为唯一的参数。
节点:
属性对于应用到动画中的DOM节点很重要。
一些参数是可选的，一些是用于高级特性。
通常的配置如下所示:
dojo.addOnLoad（function（）{
varanimArgs={
node:
"testHeading",
duration:
1000,//mstorunanimation
delay:
250//mstostallbeforeplaying
};
dojo.fadeOut（animArgs）.play（）;
}）;
基本的动画:
包含在dojo.js中的动画效果:
fadeIn,fadeOut和animateProperty.
dojo.animateProperty是更多高级动画的基础。
dojo.addOnLoad（function（）{
dojo.style（"testHeading","opacity","0"）;//hideit
varanim1=dojo.fadeOut（{node:
"testHeading",duration:
700}）;
varanim2=dojo.animateProperty（{
node:
"testHeading",delay:
1000,
properties:
{
//fadebackinandmaketextbigger
opacity:
{end:
1},fontSize:
{end:
19,unit:
"pt"}
}
}）;
anim1.play（）;
anim2.play（）;
}）;
可以看到，dojo.animateProperty（）可以通过opacity属性使标题产生淡出效果，然后同时使文字变大。
可以通过类似方法使大多数css属性产生动画效果。
在JavaScript中，某些属性名子类似于font-size和border-top，要使用大小写组合来替代'-'，变成fontSize和borderTop。
关于FX
通过基本的animateProperty可以做很多可视化的工作。
为了减小dojo.js的大小，所有其他的动画和工具都打包放在了一个单独的模块:
dojo.fx,通过dojo.require（）单独调用。
把dojo.fx模块加入代码可以增加一些动画相关的方法:
bine（）,dojo.fx.chain（）,dojo.fx.wipeIn（）,dojo.fx.wipeOut（）和dojo.fx.slideTo（）。
dojo.require（"dojo.fx"）;
dojo.addOnLoad（function（）{
//slidethenodeto75,75
dojo.fx.slideTo（{
node:
"testHeading",
top:
75,left:
75
}）.play（）;//andplayit
}）;
dojo.fx.chain（）和bine都很常用，它们可以并行或者顺序执行动画效果，然后返回一个dojo._Animation对象实例:
dojo.require（"dojo.fx"）;
dojo.addOnLoad（function（）{
varanim=dojo.fadeOut（{node:
"testHeading"}）;
varanim2=dojo.fadeIn（{node:
"testHeading"}）;
dojo.fx.chain（[anim,anim2]）.play（）;
}）;
把fadeIn（）和fadeOut（）通常不放到一起，现在把fadeOut（）和slideTo（）通过bine（）运行在同一个DOM节点:
dojo.require（"dojo.fx"）;
dojo.addOnLoad（function（）{
varanim=dojo.fadeOut（{node:
"testHeading"}）;
varanim2=dojo.fx.slideTo（{node:
"testHeading",top:
75,left:
75}）;
varresult=bine（[anim,anim2]）;
result.play（）;
}）;
动画事件
通过dojo.connect（）方法把dojo._Animation（）一系列的事件连接起来，产生特别的效果。
常用的是onEnd（）和beforeBegin（）。
dojo.addOnLoad（function（
升级会员 