dojo快速入门资料.docx

页面中的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（