大佬教程收集整理的这篇文章主要介绍了Dojo Quick Start,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
2006年初,dojo还是0.22的时候就很关注它的发展,可一直没有在实际项目中使用。一来是由于文档的缺少,而来是dojo的相关介绍总是让人望而生畏。到现在都如此,第一个Hello world就搞了一大堆东西,比如widget组件,自定义的script标签等,加上要引入什么css文件,djConfig、dojo.require等等,让人很迷惑,这么复杂,到底dojo该怎么使用呢?我只是想把dojo当作一个普通的js类库,就像prototype那样?OK,@R_227_10588@,来看看如何使用dojo。
dojo的发行包里有4个子目录
假设你是这样的目录结构:
要引入的文件是名叫”dojo”的子目录里的dojo.js
<script type="text/javascript" src="./dojo-lib/dojo/dojo.js"> </script>
现在开始使用dojo的第一个函数:dojo.byId
dojo.byId就等同于常用的document.getElementById
OK,是不是和普通的js库一样,没有任何玄机?
现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad
dojo.addOnLoad(function(){ var username = dojo.byId('username').value alert(username); });
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场
是不是和prototype的Event.observe($(’btnAdd’),“load”,doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:
OK,点击按钮,将输出:Hello Karl
这里dojo.connect的第三个参数变成了scope,而Handler函数是第四个,实际上
dojo.connect(btn,”onclick”,sayHello);
与
dojo.connect(btn,null,sayHello);
相同。
更加复杂的用法这里不作介绍,写太多就越搞越复杂了,后面再写文章详细介绍dojo.connect,这里只简单介绍如何绑定DOM事件。
OK,介绍了简单的DOM操作方法,接下来该到Ajax的传统项目-Xmlhttp了
在使用Xmlhttp时,需要注意到编码的问题,要让dojo默认绑定为utf-8怎么办呢?很简单,只需要修改一下引入dojo.js时的标签:
<script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"> </script>
多了一个djConfig属性,很简单,第一个isDebug是说是否打开FireBug的Console,第二个是xmlhttp使用的编码。第二个才是重点,设置了就一劳永逸了。
这次我们要点击了Hello按钮后发出一个xmlhttp请求:
看看,够不够一目了然?
那如果要传入参数怎么办?@H_590_301@
注意那个content参数,你要传入的参数是个关联数组/object,dojo会自动把参数解析出来,要使用post方法? 那要是我想更换获取到的数据类型,比如json?xml? 至于json和object的转换等,在http://dojotoolkit.org/book/dojo-book-0-9/part-3-progrAMMatic-dijit-and-dojo/other-miscellaneous-function/converTing-json有一个表格,应该能找到你需要的。 ,就这样: 要解决IE下那个臭名昭著的缓存问题,就这样,preventCache会帮你自动生成一个timestamp 既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch OK,基本的东西解决了,还有很多常用的函数没有介绍,比如:dojo.query,dojo.forEach,dojo.marginBox,dojo.contentBox等等 下一步我们看看dojo里 : declare有三个参数: 构造函数的名字就叫做”construnctor”@H_590_301@
那么,如何
个人认为,这个特性并不好,因为Javascript这种弱类型的语言中,根本无法确定构造函数中的参数是传递给谁的,就比如上面的语句执行后,name=”123″,age=”123″,那哪个才是正确的?这个问题在使用dojo Grid的model里就很麻烦,定义@L_270_2@model得这样:new dojox.grid._data.Table(null,data);我要是想扩展这个Model,更麻烦,所有子类的构造函数都被父类给搞乱了。所以推荐的做法是使用关联数组作为构造函数的参数,就像Python里的关键字参数。 说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法 其他的比较有用的函数就是dojo.mixin和dojo.extend了,顾名思义,一个是作用于对象实例,一个是用于扩展class,翻文档和源码吧。 说完了dojo里的类继承机制,不得不说说package机制。 dojo.require就是引入相应路径文件下的js文件,现在已经有很多library这样做了。现在我们假设要用 dojo中的顶层目录就是dojo.js所在目录的上一层,即”project/dojo-lib/”,而dojo.js放在 project/dojo-lib/dojox/grid/Grid.js dojo.require(”dojox.grid.Grid”); 说白了,就和ruby之类的require很相似。 要自己编写一个package怎么办,那就利用dojo.provide。比如要写在: 类似java里的package声明,是吧? 那要是我写的js文件不想和dojo放在一起怎么办呢,那就用registerModulePath。假设要放在: Package2.js和上面的Package1.js一样的写法,不需要作特殊变化,就这样就行: 在使用时,需要指名这个Package2.js所在的位置, 我们假设所有以com.javaeye开头的js都放在一起,而com.microsoft的放在另外的地方,为了防止冲突,可以这样: 总得来说,package机制是开发大型项目必须的,但是造成了调试困难,使用dojo.require引入js出错时,根本不知道是什么原因,所以调试时最好手动引入js,dojo的test也是这么搞的。还有js框架中的各种实现类继承的手法,也造成调试困难,dojo还随地抛出个Error,又缺少java那样的error statck,根本不知道错误根源在哪儿。所以,期待js原生地支持这些^^完整的代码文件在附件里,一个是含有dojo-1.0.2的,一个是没有dojo的
dojo.xhrGet —> dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrdeletejson
修改handleAs即可,如:
handleAs: “json”想要直接提交一个表单
dojo.hitch scope/context
var handler = {
name:'Mark',execute1: function(){
dojo.xhrGet({
url: "http://localhost/Hello/sayHello.jsp",error: function(text)
{
console.dir(this);
alert(this.name);//输出undefined,这里的this表示当前io参数
}
//...
});
},load: function(text){
alert(this.name);
},execute2: function(){
dojo.xhrGet({
url: "http://localhost/Hello/sayHello.jsp",error: dojo.hitch(this,"load") //@L_301_12@mark
//error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx
//...
});
}
}
这个就没事翻翻dojo.jS.Uncompressed.js源代码,dojo的文档是没啥好指望的了。面向对象,定义Class
如何定义Class
再来看看如何继承:
关于构造函数:
dojo.declare("Customer",{
constructor:function(name){
this.name = name;
alert("base class");
},say:function(){
alert(this.name);
}
});
dojo.declare("VIP",{
constructor:function(age){
this.age = age;
alert("child class");
},say:function(){
alert("name:" + this.name);
alert("age:" + this.age);
}
});
var vip = new VIP("123");//1
vip.say();//2
多继承,mixin
dojo.declare("Customer",{
say:function(){
alert("Hello Customer");
},getDiscount:function(){
alert("Discount in Customer");
}
});
dojo.declare("mixinClass",{
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"
package机制
主要用到的有
dojo.require
dojo.provide
dojo.registerModulePath dojo.require
project/dojo-lib/dojo/String.js
project/dojo-lib/dojo/dojo.js
所以我们就这样:
dojo.require(”dojo.String”);
比如要引用其他目录下的:
project/dojo-lib/dojox/dtl/_base.js,则这样:dojo.require(”dojox.dtl._base”); dojo.provide
project/dojo-lib/com/javaeye/fyTing/Package1.js
那么在对应的Package1.js中第一行需要这样写:
dojo.provide(”com.javaeye.fyTing.Package1″); dojo.registerModulePath
project/js/com/javaeye/fyTing/Package2.js
dojo.provide(”com.javaeye.fyTing.Package2″);
dojo.registerModulePath(”com”,”../../js/com”);
只需要注意这里的相对路径是相对dojo.js来的。
dojo.registerModulePath(”com.javaeye”,”../../js/com/javaeye”);
dojo.registerModulePath(”com.microsoft”,”../../javascript/com/microsoft”);
以上是大佬教程为你收集整理的Dojo Quick Start全部内容,希望文章能够帮你解决Dojo Quick Start所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。