dojo快速入门

1 DOJO快速入门 出处 http://www.fyting.com 2006年初，dojo还是0.22的时候就很关注它的发展，可一直没有在实际项目中使用。一来是由于文档的缺少，而来是dojo的相关介绍总是让人望而生畏。到现在都如此，第一个hello world就搞了一大堆东西，比如widget组件，自定义的script标签等，加上要引入什么css文件，djConfig、 dojo.require等等，让人很迷惑，这么复杂，到底dojo该怎么使用呢？我只是想把dojo当作一个普通的js类库，就像prototype那样？OK，闲话少说，来看看如何使用dojo。 ----------------------------------------------------------------------------------------------------- 2 什么是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版本: http://download.dojotoolkit.org/current-stable/ 你会看到许多可用的文件。标准发布文件dojo-release-#.#.#以tar.gz或zip格式存在。文件包后缀为-src表示这是一个"源代码发布版",包含所有构造客户定制Dojo的测试和公用方法。 解压文件包到一个目录中(最好放到一个适合做Ajax开发的web Server上)。假定目录名是"js/",那么目录结构应该是如下图所示:

3 安装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源代码以及可用的不同发布版本。 4 开始 先构造一个HTML模版dojo-tutorial.html，假定存放在..js/dojo-tutorial.html 目录下 Dojo Toolkit Test Page Dojo Skeleton Page Some Content To Replace 页面中的DOCTYPE定义为"HTML/4.01 Strict",严格的W3C验证。 配置Dojo Dojo可以runtime实时设定各种配置信息。最常用的两个配置参数是parseOnLoad和isDebug。parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。 可以直接在装载dojo.js的标签中通过djConfig属性设置这些选项。简单的更改HTML模板来添加这个新属性。 5 如果以上没有通过验证，也可以在dojo.js被加载前构造一个全局的djConfig变量。 两个例子有同样的效果:以debug模式装载dojo.js,同时运行解析器。 什么时候可以开始？ 只要dojo.js在 标签中被正确引用,就可以开始写一些功能代码了。 不同的浏览器对于"ready"有不同的定义。dojo.addOnLoad()是用来被触发执行其他功能代码的dojo函数。任何可能影响DOM的操作都应该通过dojo.addOnLoad()被调用执行。例如， dojo.addOnLoad是Dojo的重要方法。 需要记住的是:当使用Dojo时候，不要设置onLoad()方法到标签中。dojo.addOnlLoad(someFunc)可以替代 和 window.onload = someFunc。 方法汇总： 以下内容来自CSDN博客，转载请标明出处：http://blog.csdn.net/liruoxiu/archive/2009/05/14/4182781.aspx 6 dojo.addOnLoad 现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad dojo.addOnLoad(function(){ var username = dojo.byId('username').value alert(username); }); dojo.connect OK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场 是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope： var name = "Mark" function sayHello() { alert("Hello " + this.name); } 7 var obj = { name: "Karl" } dojo.addOnLoad(function(){ var btn = dojo.byId('hello'); dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数 }); OK，点击按钮，将输出：Hello Karl 这里dojo.connect的第三个参数变成了scope，而handler函数是第四个，实际上 dojo.connect(btn,"onclick",sayHello); 与 dojo.connect(btn,"onclick",null,sayHello); 相同。 更加复杂的用法这里不作介绍，写太多就越搞越复杂了，后面再写文章详细介绍dojo.connect，这里只简单介绍如何绑定DOM事件。 xmlhttp dojo.xhrGet OK，介绍了简单的DOM操作方法，接下来该到Ajax的传统项目-XmlHttp了 在使用xmlhttp时，需要注意到编码的问题，要让dojo默认绑定为utf-8怎么办呢？很简单，只需要修改一下引入dojo.js时的标签： 多了一个djConfig属性，很简单，第一个isDebug是说是否打开FireBug的Console，第二个是xmlhttp使用的编码。第二个才是重点，设置了就一劳永逸了。 这次我们要点击了hello按钮后发出一个xmlhttp请求: function sayHello() { dojo.xhrGet({ url: "http://localhost/hello/sayHello.jsp", handleAs: "text", load: function(responseText) {

Some Content To Replace