搜索
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版本:你会看到许多可用的文件。标准发布文件dojo-release-#.#.#以tar.gz或zip格式存在。文件包后缀为-src表示这是一个源代码发布版,包含所有构造客户定制Dojo的测试和公用方法。解压文件包到一个目录中(最好放到一个适合做Ajax开发的webServer上)。假定目录名是js/,那么目录结构应该是如下图所示:安装DojoToolkit,最重要的事情是知道dojo.js位于什么地方。当dojo.js被页面加载以后，Dojo的packagesystem会处理如何加载所有其他的依赖和相关模块。如果要验证下载和安装的正确性，可以通过浏览器访问或者访问dijit的测试页面是一本免费的指南教程，提供了更深度的描述关于怎样获得Dojo源代码以及可用的不同发布版本。开始步骤先构造一个HTML模版dojo-tutorial.html，假定存放在..js/dojo-tutorial.html目录下!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01//EN!--loadthedojotoolkitbase--scripttype=text/javascriptsrc=dojo-release/dojo/dojo.jsdjConfig=parseOnLoad:true,isDebug:true/scriptscripttype=text/javascript/*ourJavaScriptwillgohere*//scriptstyletype=text/css/*ourCSScangohere*//style/headbody!--thisisaTypicalWebPagestartingpoint...--h1id=testHeadingDojoSkeletonPage/h1divid=contentNodepSomeContentToReplace/p/div/body/html页面中的DOCTYPE定义为HTML/4.01Strict,严格的W3C验证。配置DojoDojo可以runtime实时设定各种配置信息。最常用的两个配置参数是parseOnLoad和isDebug。parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。可以直接在装载dojo.js的script/script标签中通过djConfig属性设置这些选项。简单的更改HTML模板来添加这个新属性。scripttype=text/javascriptsrc=dojo-release/dojo/dojo.jsdjConfig=parseOnLoad:true,isDebug:true/script如果以上没有通过验证，也可以在dojo.js被加载前构造一个全局的djConfig变量。scripttype=text/javascriptvardjConfig={isDebug:true,parseOnLoad:true};/scriptscripttype=text/javascriptsrc=dojo-release/dojo/dojo.js/script两个例子有同样的效果:以debug模式装载dojo.js,同时运行解析器。什么时候可以开始？只要dojo.js在scripttype=text/javascriptsrc=dojo-release/dojo/dojo.js/script标签中被正确引用,就可以开始写一些功能代码了。不同的浏览器对于ready有不同的定义。dojo.addOnLoad()是用来被触发执行其他功能代码的dojo函数。任何可能影响DOM的操作都应该通过dojo.addOnLoad()被调用执行。例如，scripttype=text/javascript//averycommonmethodofloadingcodeonLoadvarinit=function(){alert(testing);console.log(Irunafterthepageisready.Seethisintheconsole);};dojo.addOnLoad(init);//and/orpassananonymousfunctiondojo.addOnLoad(function(){console.log(Ialsorun,butsecond.);});/scriptdojo.addOnLoad是Dojo的重要方法。需要记住的是:当使用Dojo时候，不要设置onLoad()方法到body标签中。dojo.addOnlLoad(someFunc)可以替代bodyonLoad=someFunc和window.onload=someFunc。不仅仅是DojoDojo通过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中找到。操作DOMDojo提供了一个函数dojo.query().用来处理文档对象模型(DOM)，其全部内容可以足够专门写一本书来介绍。以下的部分简单讲解怎样使用dojo.query()。dojo.require(dojo.NodeList-fx);dojo.addOnLoad(function(){//ourdomisready,getthenode:dojo.query(#testHeading)//addtestClasstoitsclass=attribute.addClass(testClass)//andfadeitoutafter500ms.fadeOut({delay:500}).play();});为页面标题添加CSS的样式.testClass并且设置background-color:red;testClass{background-color:red;}dojo.query()返回一个dojo.NodeList的实例，这是一个dom的节点数组。为了展示效果，我们需要增加一些内容到页面:h1id=testHeadingDojoSkeletonPage/h1aclass=linkhref=#Firstlink/aaclass=linkhref=#SecondLink/apclass=paraFirstparagraph/ppclass=paraSecondparagraph/ppclass=paraThirdparagraph/p使用dojo.query():dojo.require(dojo.NodeList-fx);dojo.addOnLoad(function(){//geteachelementwithclass=paradojo.query(.para).addClass(testClass).fadeOut({delay:1000}).play();});经过一秒钟的延迟，所有p标签将会变红然后褪色。使用dojo.NodeList的效果看起来很明显，在以后的章节会介绍更多的相关内容。多数dojo.query()函数链都可以用独立的函数来替代得到相同的结果。比如:dojo.query(#testHeading).addClass(testClass);和dojo.addClass(testHeading,testClass)的效果就一样。事件传递我们要接触的下一个重要概念是如何进行页面交互。现在可以为标题替换文字，那么是否可以做一些更有趣的事情呢？比如，当用户点击标题时候，就替换标题文字。dojo.connect()是一个一站式解决方案:dojo