dojo快速入门-框架初识.doc

DOJO快速入门-为什么是dojo?dojo Toolkit 是一个开源的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传输,字符串处理,强大的Data API等等。无穷的可能性dojo toolkit 也包括称为Dijit的项目包。它是用于使用和创建封装的和可重用的组件或widgets。它提供可访问，可扩展和基于主题的组件来建造你的web应用和站点。它也提供强大的api来开发你自己的widgets或者配置已有widgets的行为。最新的技术dojo通过帮助开发者创造丰富的交互性的web应用来实现WEB2.0的设想。Internet的静态内容越来越少，更多的是动态数据库和及时响应。这种趋势往往需要优雅的界面和可靠的操作工具。当没有网络连接时，web应用如果没有离线技术就变得不能用了。但是dojo仍然可以保障用户使用一些功能即使没有网络连接。无论用户处于什么状态，离线功能是保证web应用被认为是可靠工具的关键所在。获得代码下载最新发布的Dojo Toolkit版本:/current-stable/你会看到许多可用的文件。标准发布文件dojo-release-#.#.#以tar.gz或zip格式存在。文件包后缀为-src表示这是一个源代码发布版,包含所有构造客户定制Dojo的测试和公用方法。解压文件包到一个目录中(最好放到一个适合做Ajax开发的web Server上)。假定目录名是js/,那么目录结构应该是如下图所示:安装Dojo Toolkit,最重要的事情是知道dojo.js位于什么地方。当dojo.js被页面加载以后，Dojo的package system会处理如何加载所有其他的依赖和相关模块。如果要验证下载和安装的正确性，可以通过浏览器访问http:/localhost/js/dojo-release/dojo/tests/runTests.html 或者访问dijit的测试页面http:/localhost/js/dojo-release/dijit/tests.The Dojo Book是一本免费的指南教程，提供了更深度的描述关于怎样获得Dojo源代码以及可用的不同发布版本。开始步骤先构造一个HTML模版dojo-tutorial.html，假定存放在.js/dojo-tutorial.html 目录下 Dojo Toolkit Test Page /* our JavaScript will go here */ /* our CSS can go here */ Dojo Skeleton Page Some Content To Replace 页面中的DOCTYPE定义为HTML/4.01 Strict,严格的W3C验证。配置DojoDojo可以runtime实时设定各种配置信息。最常用的两个配置参数是parseOnLoad和isDebug。parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。可以直接在装载dojo.js的标签中通过djConfig属性设置这些选项。简单的更改HTML模板来添加这个新属性。如果以上没有通过验证，也可以在dojo.js被加载前构造一个全局的djConfig变量。 var djConfig = isDebug:true, parseOnLoad:true ;两个例子有同样的效果:以debug模式装载dojo.js,同时运行解析器。什么时候可以开始？只要dojo.js在 标签中被正确引用,就可以开始写一些功能代码了。不同的浏览器对于ready有不同的定义。dojo.addOnLoad()是用来被触发执行其他功能代码的dojo函数。任何可能影响DOM的操作都应该通过dojo.addOnLoad()被调用执行。例如，/ a very common method of loading code onLoadvar init = function() alert(testing); console.log(I run after the page is ready. See this in the console); ;dojo.addOnLoad(init);/ and/or pass an anonymous functiondojo.addOnLoad(function() console.log(I also run, but second. ); );dojo.addOnLoad是Dojo的重要方法。需要记住的是:当使用Dojo时候，不要设置onLoad()方法到标签中。dojo.addOnlLoad(someFunc)可以替代 和 window.onload = someFunc。不仅仅是DojoDojo通过dojo.require()装载其他相关代码。这个功能允许我们使用那些不属于Dojo.js的Dojo Toolkit，比如拖放功能，动画，Dijit widgets, DojoX项目或者开发者自己的代码。比如，在模块dijit.TitlePane和dijit.form.Button的页面中，使用TitlePane Widget和dijit按钮。dojo.require(dijit.form.Button);dojo.require(dijit.TitlePane);dojo.addOnLoad(function() dojo.byId(testHeading).innerHTML = Were on our way!; console.log(onLoad fires after require() is done); );每个模块都有自己的dojo.require(),可以不用装载已有的代码。由dojo.addOnLoad执行的代码要等dojo.require()装载完毕才可以运行，这样保证了安全和方便。所有可用的widgets和module都可以在Dijit API中找到或者到dijit/tests/的文件夹中查找。在最后的例子中，添加了经常使用的方法: dojo.byId().它返回一个domNode通过id属性。dojo.byId()是一个方便的方法来访问和操作一个特定节点。在这里通过修改.innnerHtml来改变body的heading文字。如果你看到的是Were on our way，那么就是表明正在做web 开发:dojo.bliss。如果遇到errors就表明工作出了问题。大量的常规错误德及决办法都可以在FAQ中找到。操作DOMDojo提供了一个函数dojo.query().用来处理文档对象模型(DOM)，其全部内容可以足够专门写一本书来介绍。以下的部分简单讲解怎样使用dojo.query()。dojo.require(dojo.NodeList-fx);dojo.addOnLoad(function() / our dom is ready, get the node: dojo.query(#testHeading) / add testClass to its class= attribute .addClass(testClass) / and fade it out after 500 ms .fadeOut( delay:500 ).play(););为页面标题添加CSS的样式.testClass并且设置background-color:red;testClass background-color:red; dojo.query()返回一个dojo.NodeList的实例，这是一个dom的节点数组。为了展示效果，我们需要增加一些内容到页面:Dojo Skeleton Page First linkSecond Link First paragraphSecond paragraphThird paragraph使用dojo.query():dojo.require(dojo.NodeList-fx);dojo.addOnLoad(function() / get each element with class=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() var node = dojo.byId(testHeading); dojo.connect(node,onclick,function() node.innerHTML = Ive been clicked; ); );另一种比较方法是通过使用dojo.query()为标题替换文字:dojo.addOnLoad(function() dojo.query(#testHeading) .style(cursor,pointer) .connect(onclick,function() this.innerHTML = Ive been clicked; ); );以上示例程序增加样式.style()，当鼠标滑过标题时会变成箭头。通过简单的css来简化代码。所以.style()具有动态添加和去除节点样式的特点。通过dojo.connect()可以在同一时间把onclick事件连接到多个节点上。当前例子中NodeList仅有一个节点，当然也可以添加更多的节点进行测试。例如:使用规范化的事件对象dojo.connect()，禁止页面所有链接跳转:var disableLinks = function() dojo.query(a).connect(onclick,function(e) e.preventDefault(); / stop the event console.log(clicked: ,e.target); / the node we clicked on ); ;dojo.addOnLoad(disableLinks);代码e.preventDefault()会阻止需要被执行事件的发生。本例中，这个函数阻止了click事件。在作为参数传递时候，事件经常写成e或evt。更多关于正规化事件对象的介绍可以参考Dojo网站的Event Object Book Page.我们可以把特定对象的方法连接起来，然后在同一范围内执行。比如在Dijit中声明类或者构造动画的时候，会用到这个特点。下面定义一个包含若干方法的简单对象，然后通过dojo.connect()把这些方法连接起来:var mineObj = aMethod: function() console.log(running A); , bMethod: function() console.log(running B); ; var otherObj = cMethod: function() console.log(running C); ; dojo.addOnLoad(function() / run bMethod() whenever aMethod() gets run dojo.connect(mineObj,aMethod,mineObj,bMethod); / run an entirely different objects method via a separate connection dojo.connect(mineObj,bMethod,otherObj,cMethod); / start chain of events mineObj.aMethod(); ); 终端会显示running A; running B; running C。要学习dojo.connect()的强大功能，可以参考dojo.connect()API或者Dojo Book。一些特性: Dojo 动画Dojo拥有一个强大的动画系统，带有几个预先制作好的动画。给项目中添加一些可视化的功能通常不太容易，当然其效果会给用户有趣的体验。所有的动画都使用一个magic object作为唯一的参数。节点:属性对于应用到动画中的DOM节点很重要。一些参数是可选的，一些是用于高级特性。通常的配置如下所示:dojo.addOnLoad(function() var animArgs = node: testHeading, duration: 1000, / ms to run animation delay: 250 / ms to stall before playing ; dojo.fadeOut(animArgs).play(););基本的动画:包含在dojo.js中的动画效果:fadeIn, fadeOut和 animateProperty.dojo.animateProperty是更多高级动画的基础。dojo.addOnLoad(function() dojo.style(testHeading,opacity,0); / hide it var anim1 = dojo.fadeOut( node: testHeading, duration:700 ); var anim2 = dojo.animateProperty( node: testHeading, delay: 1000, properties: / fade back in and make text bigger 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() / slide the node to 75,75 dojo.fx.slideTo( node:testHeading, top:75, left:75 ).play(); / and play it);dojo.fx.chain()和bine都很常用，它们可以并行或者顺序执行动画效果，然后返回一个dojo._Animation对象实例:dojo.require(dojo.fx);dojo.addOnLoad(function() var anim = dojo.fadeOut( node: testHeading ); var anim2 = dojo.fadeIn( node: testHeading ); dojo.fx.chain(anim,anim2).play(););把fadeIn()和fadeOut()通常不放到一起，现在把fadeOut()和slideTo()通过bine()运行在同一个DOM节点:dojo.require(dojo.fx);dojo.addOnLoad(function() var anim = dojo.fadeOut( node: testHeading ); var anim2 = dojo.fx.slideTo( node: testHeading, top:75, left:75 ); var result = bine(anim,anim2); result.play(); );动画事件通过dojo.connect()方法把dojo._Animation()一系列的事件连接起来，产生特别的效果。常用的是onEnd()和beforeBegin()。dojo.addOnLoad(function() var anim = dojo.fadeOut( node: testHeading ); dojo.connect(anim,onEnd,function() console.log( the animation is done ); ); dojo.connect(anim,beforeBegin,function() console.log( the animation is about to start ); ); anim.play(););当你要把一个隐藏的节点渐进显示出来然后改变内容，以上的方法就特别有用了。dojo.addOnLoad(function() var anim = dojo.fadeOut( node: testHeading ); dojo.connect(anim,onEnd,function() dojo.byId(testHeading).innerHTML = replaced after fade!; dojo.fadeIn( node:testHeading ).play(); ); anim.play(););可以把事件函数作为属性传递。使用dojo.connect()构造函数确实功能强大而且对于高级应用也更安全，但是有时dojo.connect()不是必需的，可以把所有的内容包括在同一个函数中:dojo.addOnLoad(function() var anim = dojo.fadeOut( node: testHeading, onEnd: function() dojo.byId(testHeading).innerHTML = replaced . ; dojo.fadeIn( node: testHeading ).play(); ).play(););关于事件的更多解释可以参考dojo._Animation()的API。(/jsdoc/dojo/HEAD/dojo._Animation)animatePropertydojo.animateProperty()允许我们容易的同步使CSS的属性产生动画效果。作为dojo._Animation()的一员,dojo.animateProperty()使用和其他animations相同的参数，除了增加了一个对象properties:我们可以给节点定义样式属性start:和end:,也可以选择使用unit:属性。修改头节点的字体颜色，大小和透明度可以如下进行:dojo.addOnLoad(function() var anim = dojo.animateProperty( node:testHeading, duration:700, properties: / javascript css names are camelCase (not hyphenated) fontSize: start:12, end:22, unit:pt , opacity: start:1, end:0.5 , color: start: #000, end:#FFE , delay:100 / be careful of this trailing comma, it breaks IE. ); anim.play(););dojo.query()动画效果dojo提供了另外一种方便的模块dojo.NodeList-fx(),这个模块给dojo.query()增加了新的方法，可以实现dojo.fx()的动画效果。dojo.require(dojo.NodeList-fx);dojo.addOnLoad(function() dojo.query(#testHeading).fadeOut().play(););上面的代码产生的效果和调用dojo.fadeOut()一样,使用dojo.query()可以实现节点集合中的每个对象都产生动画效果。当要操作一组节点的时候，这个功能非常有用。(在这个例子中,所有的节点应该带有同样的类别 class=fadeNode)dojo.require(dojo.NodeList-fx);var fadeThem = function() dojo.query(.fadeNode).fadeOut().play();dojo.addOnLoad(function() dojo.connect(dojo.byId(testHeading),onclick,fadeThem););和其他dojo.query()链不同的是,NodeList-fx方法返回一个dojo._Animation()的对象实例，这样就可以阻止进一步的链接。Ajax:简单的数据传输Ajax是Asynchronous JavaScript and XML的缩写,这是一种在后台发送和接受数据的技术。它可以通过连接任意数目的远程资源，然后传递数据到服务器，来回的传递响应，更新网站的任何部分，而不需要刷新web页面。前面熟悉了一些重要的Dojo方法，我们在这里介绍Ajax的核心技术:XmlHttpRequest(或者简称XHR)。当使用HTTP的动作，如POST,GET,PUT,和DELETE时，Dojo具备几种XHR方法。作为学习准备，我们需要一个文本文件进行传输试验。在js/文件夹下创建sample.txt例子文件:I am a remote file.We used Ajax to put this textin our page.修改skeleton.html，增加一些基本的标记和样式: #container border:1px dotted #b7b7b7; background:#ededed; width:75px; height:55px; I am some Inner Content. I am going to be replaced XHR方法使用dojo.Deferred()方法在后台处理callbacks()。这部分超出了入门教程的范围，但是在实践中很重要的部分。如果想深入学习callbacks以及若干构造回调的方法，可以阅读Dojo book(/book/ . -between-threads-do)或者参考dojo.Deferred()的API。获取数据第一步是dojo.xhrGet(),这个方法返回通过URL进行GET调用的内容。XHR方法共享许多参数，最重要和常用的是url:（目的地）和handleAs:（我们如何处理返回信息）。当被请求的数据返回时，数据会被传递给我们定义好的函数load:var init = function() var contentNode = dojo.byId(content); dojo.xhrGet( url: sample.txt, handleAs: text, load: function(data,args) / fade out the node were modifying dojo.fadeOut( node: contentNode, onEnd: function() / set the data, fade it back in contentNode.innerHTML = data; dojo.fadeIn(node: contentNode).play(); ).play(); , / if any error occurs, it goes here: error: function(error,args) console.warn(error!,error); ); dojo.addOnLoad(init);你会注意到我们把以上的技术结合起来了。内容会渐变消失，由返回数据所代替，然后渐进显示出来。handle:可以替代load:和error:，处理成功和失败的情景:var init = function() dojo.xhrGet( url: sample.txt, handleAs: text, handle: function(data,args) if(typeof data = error) console.warn(error!); console.log(args); else / the fade can be plugged in here, too dojo.byId(content).innerHTML = data; );dojo.addOnLoad(init);XHR有一些限制。最大的问题是url:不能跨域,你不能请求一个当前主机以外的资源(eg. url:).这是一个已知的限制和常见的问题。Dojo提供了一个被选方案dojo.io.iframe()和dojo.io.script()来实现更多的高级应用。如果不是用web服务器(从本地文件系统)，你可能会经历一些在IE上出现的Ajax问题。原因是XHR和IE之间的安全限制。多数操作文件系统的例子都会工作，这里只是建议使用web服务器来访问dojo的资源。发送数据所有的XHR方法都是双向的。唯一的不同是方法，当用户使用POST方法时，调用dojo.xhrPost()。把数据嵌入到请求中(不同于dojo.xhrGet()的查询字符串)。数据可以被直接设置成传递内容的对象参数:dojo.addOnLoad(function() dojo.xhrPost( url:submit.html, content: key:value, foo:42, bar: baz :value , load: function(data,ioargs) console.log(data); ););或者更简单的通过form:参数进行转化。首先在dojo-tutorial.html构造一个简单的form。 Name: 然后，添加一些JavaScript通过dojo.connect()来提交表单。/ sumbit the form var formSubmit = function(e) / prevent the form from actually submitting e.preventDefault(); / submit the form in the background dojo.xhrPost( ur