dojo入门笔记(免费).doc

2006年初，dojo还是0.22的时候就很关注它的发展，可一直没有在实际项目中使用。一来是由于文档的缺少，而来是dojo的相关介绍总是让人望而生畏。到现在都如此，第一个hello world就搞了一大堆东西，比如widget组件，自定义的script标签等，加上要引入什么css文件，djConfig、dojo.require等等，让人很迷惑，这么复杂，到底dojo该怎么使用呢？我只是想把dojo当作一个普通的js类库，就像prototype那样？OK，闲话少说，来看看如何使用dojo。 第一步，引入dojo.js dojo的发行包里有4个子目录，要引入的文件是名叫dojo的子目录里的dojo.js。 假设你是这样的目录结构: project | +-dojo-lib | | | +-dijit | +-dojo | +-dojox | +-util | +-dojo_hello_world.html 开始使用dojo 现在开始使用dojo的第一个函数:dojo.byId ，dojo.byId就等同于常用的document.getElement 。 var username = dojo.byId(username).value alert(username); OK，是不是和普通的js库一样，没有任何玄机？ dojo.addOnLoad 现在我们想在window.onload里面处理一点东西，就像Ext.onReady，这个东西在dojo里叫做dojo.addOnLoad。dojo.addOnLoad(function()var username = dojo.byId(username).valuealert(username););dojo.connect OK，window.onload搞定了，那么如何监听普通的dom事件呢？没问题，强大的dojo.connect出场。function sayHello(event)alert(Hello);dojo.addOnLoad(function()var btn = dojo.byId(hello);dojo.connect(btn,onclick,sayHello););是不是和prototype的Event.observe($(btnAdd), load, doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了，使用dojo.conncect，可以在第三个参数中指定当前的scope：var name = Markfunction sayHello()alert(Hello + );var obj = name: Karldojo.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) alert(responseText); dojo.byId(divHello).innerHTML = responseText; , error: function(response) alert(Error); );dojo.connect(btn,onclick,sayHello);看看，够不够一目了然？ url 就是url ；handleAs 把获取的内容作为text/html ；load 成功时的回调函数；error 失败时的回调函数 那如果要传入参数怎么办? var params = username:Mark, id:105dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, content:params, /.);注意那个content参数，你要传入的参数是个关联数组/object，dojo会自动把参数解析出来，要使用post方法？ dojo.xhrGet - dojo.xhrPost ，其他的还有，dojo.xhrPut、dojo.xhrDelete。json那要是我想更换获取到的数据类型，比如json？xml？修改handleAs即可，如： handleAs: json dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, handleAs: json, load: function(json) alert() /.);handleAs: json-comment-filtered 使用注释符号/*/把json数据包含起来,推荐使用 handleAs: json-comment-optional 首先尝试使用json-comment-filtered,如果执行错误,再使用普通的json格式解析 handleAs: javascript dojo尝试把服务器返回的数据当作javascript执行,并把结果作为参数传递给load函数 handleAs: xml xml对象。注意在Mozilla和IE中的xml是不同的，推荐使用sarissa 至于json和object的转换等，在/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json有一个表格，应该能找到你需要的。想要直接提交一个表单就这样: dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, form: dojo.byId(form1) /.);要解决IE下那个臭名昭著的缓存问题，就这样,preventCache会帮你自动生成一个timestamp dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, preventCache: true /.);dojo.hitch scope/context 既然用到了xmlhttp，一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind，在dojo中，做相同事情的东西叫做dojo.hitch。var handler = name:Mark, execute1: function() dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, handleAs: text, error: function(text) console.dir(this); alert();/输出undefined,这里的this表示当前io参数 /. ); , load: function(text) alert(); , execute2: function() dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, handleAs: text, error: dojo.hitch(this,load) /输出Mark /error: dojo.hitch(this,this.load); /与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx /. ); OK，基本的东西解决了，还有很多常用的函数没有介绍，比如：dojo.query，dojo.forEach，dojo.marginBox，dojo.contentBox等等。这个就没事翻翻dojo.js.uncompressed.js源代码，dojo的文档是没啥好指望的了。面向对象,定义Class 下一步我们看看dojo里如何定义Class： dojo.declare(Customer,null, constructor:function(name) = name; , say:function() alert(Hello + ); , getDiscount:function() alert(Discount is 1.0); );var customer1 = new Customer(Mark);customer1.say();declare有三个参数: 第一个 class名字；第二个 父类的引用 ；第三个 . 构造函数的名字就叫做construnctor 再来看看如何继承dojo.declare(VIP,Customer, getDiscount:function() alert(Discount is 0.8); );var vip = new VIP(Mark);vip.say();vip.getDiscount();使用this.inherited方法调用父类dojo.declare(VIP,Customer, getDiscount:function() this.inherited(arguments); /this.inherited(getDiscount,arguments); );关于构造函数父类构造函数总是被自动调用的，所以看下面的例子: dojo.declare(Customer,null, constructor:function(name) = name; alert(base class); , say:function() alert(); );dojo.declare(VIP,Customer, constructor:function(age) this.age = age; alert(child class); , say:function() alert(name: + ); alert(age: + this.age); );var vip = new VIP(123);/1vip.say();/21将打印出两条alert语句，先是父类的构造函数，再是子类的。 2将输出name: 123 age: 123 。个人认为，这个特性并不好，因为javascript这种弱类型的语言中，根本无法确定构造函数中的参数是传递给谁的，就比如上面的语句执行后，name=123,age=123，那哪个才是正确的？这个问题在使用dojo Grid的model里就很麻烦，定义一个model得这样:new dojox.grid._data.Table(null,null,data);我要是想扩展这个Model，更麻烦，所有子类的构造函数都被父类给搞乱了。所以推荐的做法是使用关联数组作为构造函数的参数，就像Python里的关键字参数。constructor:function(args) var args = args | ; = ; this.age = args.age;多继承,mixin 说到继承，多继承的问题又来了。dojo支持多继承，准确地说，是mixin。还记得dojo.declare的第二个参数吗，就是表示父类的那个参数，这个参数可以是一个数组，数组的第一个元素作为声明的类的父类，其他的作为mixin。子类自动获得父类和mixin的所有方法，后面的mixin的同名方法覆盖前面的方法。dojo.declare(Customer,null, say:function() alert(Hello Customer); , getDiscount:function() alert(Discount in Customer); );dojo.declare(MixinClass,null, say:function() alert(Hello mixin); , foo:function() alert(foo in MixinClass); );dojo.declare(VIP,Customer,MixinClass,);var vip = new VIP();vip.getDiscount();vip.foo();vip.say();/输出Hello MixinClass其他的比较有用的函数就是dojo.mixin和dojo.extend了，顾名思义，一个是作用于对象实例，一个是用于扩展class，翻文档和源码吧。 package机制说完了dojo里的类继承机制，不得不说说package机制。 主要用到的有 dojo.require vide dojo.registerModulePath dojo.require dojo.require就是引入相应路径文件下的js文件，现在已经有很多library这样做了。现在我们假设要用project/dojo-lib/dojo/string.js dojo中的顶层目录就是dojo.js所在目录的上一层,即project/dojo-lib/，而dojo.js放在project/dojo-lib/dojo/dojo.js 所以我们就这样: dojo.require(dojo.string); 比如要引用其他目录下的: project/dojo-lib/dojox/dtl/_base.js，则这样：dojo.require(dojox.dtl._base); project/dojo-lib/dojox/grid/Grid.js dojo.require(dojox.grid.Grid); 说白了，就和ruby之类的require很相似。vide要自己编写一个package怎么办，那就利用vide。比如要写在：project/dojo-lib/com/javaeye/fyting/Package1.js 那么在对应的Package1.js中第一行需要这样写: vide(com.javaeye.fyting.Packag