dojo 入门

发布时间:2019-10-11 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了dojo 入门大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
2008-01-01

dojo Quick Start

关键字: dojo webdev
转载请注明出处 http://www.fyting.com,谢谢
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


Java代码
  1. <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script>




开始使用dojo
现在开始使用dojo的第一个函数:dojo.byId
dojo.byId就等同于常用的document.getElement
<input type="text" name="username" id="username" value="Mark" />
<script type="text/javascript">
var username = dojo.byId('username').value
alert(username);
</script>
OK,是不是和普通的js库一样,没有任何玄机?



dojo.addOnLoad
现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad
Java代码
  1. dojo.addOnLoad(function(){
  2. varusername=dojo.byId('username').value
  3. alert(username);
  4. });




dojo.connect
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场
Java代码
  1. <scripttype="text/javascript">
  2. functionsayHello(event)
  3. {
  4. alert("Hello");
  5. }
  6. dojo.addOnLoad(function(){
  7. varbtn=dojo.byId('hello');
  8. dojo.connect(btn,"onclick",sayHello);
  9. });
  10. </script>
  11. <inputtype="button"id="hello"value="Hello"/>


是不是和prototype的Event.observe($('btnAdd'),"load",doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:
Java代码
  1. varname="Mark"
  2. functionsayHello()
  3. {
  4. alert("Hello"+this.name);
  5. }
  6. varobj={
  7. name:"Karl"
  8. }
  9. dojo.addOnLoad(function(){
  10. varbtn=dojo.byId('hello');
  11. dojo.connect(btn,obj,sayHello);//注意这行的第三个和第四个参数
  12. });

OK,点击按钮,将输出:Hello Karl
这里dojo.connect的第三个参数变成了scope,而handler函数是第四个,实际上
dojo.connect(btn,sayHello);

dojo.connect(btn,null,sayHello);
相同。
更加复杂的用法这里不作介绍,写太多就越搞越复杂了,后面再写文章详细介绍dojo.connect,这里只简单介绍如何绑定DOM事件。



xmlhttp dojo.xhrGet
OK,介绍了简单的DOM操作方法,接下来该到Ajax的传统项目-XmlHttp了
在使用xmlhttp时,需要注意到编码的问题,要让dojo默认绑定为utf-8怎么办呢?很简单,只需要修改一下引入dojo.js时的标签:

Java代码
  1. <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>

多了一个djConfig属性,很简单,第一个isDebug是说是否打开FireBug的Console,第二个是xmlhttp使用的编码。第二个才是重点,设置了就一劳永逸了。

这次我们要点击了hello按钮后发出一个xmlhttp请求:
Java代码
  1. functionsayHello(){
  2. dojo.xhrGet({
  3. url:"http://localhost/hello/sayHello.jsp",
  4. handleAs:"text",
  5. load:function(responseText)
  6. {
  7. alert(responseText);
  8. dojo.byId("divHello").innerHTML=responseText;
  9. },
  10. error:function(response)
  11. {
  12. alert("Error");
  13. }
  14. });
  15. }
  16. dojo.connect(btn,sayHello);


看看,够不够一目了然?

url 就是url……
handleAs 把获取的内容作为text/html
load 成功时的回调函数
error 失败时的回调函数


那如果要传入参数怎么办?
Java代码
  1. varparams={
  2. username:'Mark',
  3. id:'105'
  4. }
  5. dojo.xhrGet({
  6. url:"http://localhost/hello/sayHello.jsp",
  7. content:params,
  8. //...
  9. });

注意那个content参数,你要传入的参数是个关联数组/object,dojo会自动把参数解析出来,要使用post方法?
dojo.xhrGet ---> dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrDelete


json
那要是我想更换获取到的数据类型,比如json?xml?
修改handleAs即可,如:
handleAs: "json"
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. handleAs:"json",
  4. load:function(json)
  5. {
  6. alert(json.name)
  7. }
  8. //...
  9. });

引用

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的转换等,在http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json有一个表格,应该能找到你需要的。


想要直接提交一个表单,就这样:
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. form:dojo.byId("form1")
  4. //...
  5. });

要解决IE下那个臭名昭著的 缓存问题,就这样,preventCache会帮你自动生成一个timestamp
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. preventCache:true
  4. //...
  5. });




dojo.hitch scope/context
既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch
Java代码
  1. varhandler={
  2. name:'Mark',
  3. execute1:function(){
  4. dojo.xhrGet({
  5. url:"http://localhost/hello/sayHello.jsp",
  6. error:function(text)
  7. {
  8. console.dir(this);
  9. alert(this.name);//输出undefined,这里的this表示当前io参数
  10. }
  11. //...
  12. });
  13. },
  14. load:function(text){
  15. alert(this.name);
  16. },
  17. execute2:function(){
  18. dojo.xhrGet({
  19. url:"http://localhost/hello/sayHello.jsp",
  20. error:dojo.hitch(this,"load")//输出Mark
  21. //error:dojo.hitch(this,this.load);//与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx
  22. //...
  23. });
  24. }
  25. }


OK,基本的东西解决了,还有很多常用的函数没有介绍,比如:dojo.query,dojo.forEach,dojo.marginBox,dojo.contentBox等等
这个就没事翻翻dojo.js.uncompressed.js源代码,dojo的文档是没啥好指望的了。



面向对象,定义Class
下一步我们看看dojo里如何定义Class:
Java代码
  1. dojo.declare("Customer",null,{
  2. constructor:function(name){
  3. this.name=name;
  4. },
  5. say:function(){
  6. alert("Hello"+this.name);
  7. },
  8. getDiscount:function(){
  9. alert("Discountis1.0");
  10. }
  11. });
  12. varcustomer1=newCustomer("Mark");
  13. customer1.say();

declare有三个参数:
第一个 class名字
第二个 父类的引用
第三个 ...

构造函数的名字就叫做"construnctor"


再来看看如何继承:

Java代码
  1. dojo.declare("VIP",Customer,{
  2. getDiscount:function(){
  3. alert("Discountis0.8");
  4. }
  5. });
  6. varvip=newVIP("Mark");
  7. vip.say();
  8. vip.getDiscount();



那么,如何 调用父类的方法呢。使用this.inherited方法

Java代码
  1. dojo.declare("VIP",{
  2. getDiscount:function(){
  3. this.inherited(arguments);
  4. //this.inherited("getDiscount",arguments);
  5. }
  6. });



关于构造函数:
父类构造函数总是被自动调用的,所以看下面的例子:

Java代码
  1. dojo.declare("Customer",{
  2. constructor:function(name){
  3. this.name=name;
  4. alert("baseclass");
  5. },
  6. say:function(){
  7. alert(this.name);
  8. }
  9. });
  10. dojo.declare("VIP",{
  11. constructor:function(age){
  12. this.age=age;
  13. alert("childclass");
  14. },
  15. say:function(){
  16. alert("name:"+this.name);
  17. alert("age:"+this.age);
  18. }
  19. });
  20. varvip=newVIP("123");//1
  21. vip.say();//2

1将打印出两条alert语句,先是父类的构造函数,再是子类的。
2将输出"name: 123" "age: 123"
个人认为,这个特性并不好,因为javascript这种弱类型的语言中,根本无法确定构造函数中的参数是传递给谁的,就比如上面的语句执行后,name="123",age="123",那哪个才是正确的?这个问题在使用dojo Grid的model里就很麻烦,定义一个model得这样:new dojox.grid._data.Table(null,data);我要是想扩展这个Model,更麻烦,所有子类的构造函数都被父类给搞乱了。所以推荐的做法是使用关联数组作为构造函数的参数,就像Python里的关键字参数。

Java代码
  1. constructor:function(args){
  2. varargs=args||{};
  3. this.name=args.name;
  4. this.age=args.age;
  5. }



多继承,mixin
说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法
Java代码
  1. dojo.declare("Customer",{
  2. say:function(){
  3. alert("HelloCustomer");
  4. },
  5. getDiscount:function(){
  6. alert("DiscountinCustomer");
  7. }
  8. });
  9. dojo.declare("MixinClass",{
  10. say:function(){
  11. alert("Hellomixin");
  12. },
  13. foo:function(){
  14. alert("fooinMixinClass");
  15. }
  16. });
  17. dojo.declare("VIP",[Customer,MixinClass],{
  18. });
  19. varvip=newVIP();
  20. vip.getDiscount();
  21. vip.foo();
  22. vip.say();//输出"HelloMixinClass"


其他的比较有用的函数就是dojo.mixin和dojo.extend了,顾名思义,一个是作用于对象实例,一个是用于扩展class,翻文档和源码吧。



package机制
说完了dojo里的类继承机制,不得不说说package机制。
主要用到的有
dojo.require
dojo.provide
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很相似。

dojo.provide
要自己编写一个package怎么办,那就利用dojo.provide。比如要写在:
project/dojo-lib/com/javaeye/fyting/Package1.js
那么在对应的Package1.js中第一行需要这样写:
dojo.provide("com.javaeye.fyting.Package1");

类似java里的package声明,是吧?

dojo.registerModulePath
那要是我写的js文件不想和dojo放在一起怎么办呢,那就用registerModulePath。假设要放在:
project/js/com/javaeye/fyting/Package2.js

Package2.js和上面的Package1.js一样的写法,不需要作特殊变化,就这样就行:
dojo.provide("com.javaeye.fyting.Package2");

在使用时,需要指名这个Package2.js所在的位置,
dojo.registerModulePath("com","../../js/com");
只需要注意这里的相对路径是相对dojo.js来的。

我们假设所有以com.javaeye开头的js都放在一起,而com.microsoft的放在另外的地方,为了防止冲突,可以这样:
dojo.registerModulePath("com.javaeye","../../js/com/javaeye");
dojo.registerModulePath("com.microsoft","../../javascript/com/microsoft");

总得来说,package机制是开发大型项目必须的,但是造成了调试困难,使用dojo.require引入js出错时,根本不知道是什么原因,所以调试时最好手动引入js,dojo的test也是这么搞的。还有js框架中的各种实现类继承的手法,也造成调试困难,dojo还随地抛出个Error,又缺少java那样的error statck,根本不知道错误根源在哪儿。所以,期待js原生地支持这些^^
完整的代码文件在附件里,一个是含有dojo-1.0.2的,一个是没有dojo的
评论
careprad 2008-06-30
建议不要沉迷于他
用多了非常非常慢的
fyting 2008-04-19
fyting.yang{{在}}gmail.com,在我的个人资料里有的呵呵。
commond 2008-04-18
fyting 写道
commond 写道

function foo() { console.debug("A click upon your houses!"); }
function globalGuy() { console.debug("Global Guy fired!"); }
var someObject = {
bar: function() { console.debug("Bar fired!"); return 7; },
baz: function() { console.debug("Baz fired!"); return 14; }
}
var anotherObject = {
afterBaz: function () { console.debug("afterBaz fired!"); }
}
firstLinkConnections = [];
firstLinkNode = dojo.byId("firstLink");
firstLinkConnections[0] = dojo.connect(firstLinkNode,'onclick',foo);
firstLinkConnections[1] = dojo.connect(firstLinkNode,someObject,"bar");
firstLinkConnections[2] = dojo.connect(foo,globalGuy);firstLinkConnections[3] = dojo.connect(someObject,"bar",globalGuy);

我想请问一下楼主,加粗的一行为什么不起作用呢?

这个问题是因为“引用”。dojo.connect是用javascript在运行时的行为,所以在实现过程中,它会把原来的函数替换掉。可以先这样来看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html代码
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  4. <scriptsrc="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"type="text/javascript"djConfig="parseOnLoad:true,isDebug:true"></script>
  5. <scripttype="text/javascript">
  6. functionfoo()
  7. {
  8. console.debug("foo.");
  9. }
  10. functionbar()
  11. {
  12. console.debug("bar.");
  13. }
  14. varold_foo=window['foo'];
  15. dojo.connect("foo",bar);
  16. console.debug("old_foo==new_foo==>"+(old_foo==foo));
  17. </script>
  18. </head>
  19. </html>

可以看到,connect后的foo函数已经不是之前的foo了,你可以看作spring里用cglib 实现的AOP。

Javascript代码
  1. firstLinkConnections[2]=dojo.connect(foo,globalGuy);

这句代码在
Javascript代码
  1. irstLinkConnections[0]=dojo.connect(firstLinkNode,'onclick',foo);
之后,因此传递给onclick的foo是未被connect->globalGuy处理的,一个原生态的foo引用。除非你在此之后把foo设置到onclick里面,否则修改是不会起任何作用的。你可以把firstLinkConnections[2]放到firstLinkConnections[0]前面试试:
Java代码
  1. firstLinkConnections=[];
  2. firstLinkNode=dojo.byId("firstLink");
  3. [color=red]firstLinkConnections[2]=dojo.connect("foo",globalGuy);[/color]
  4. firstLinkConnections[0]=dojo.connect(firstLinkNode,foo);

另外,有两个小错误,一个是dojo.connect接受的参数形式是这样的:
dojo.connect(obj,"method_name",scope,"method")
dojo.connect(obj,method)
dojo.connect(null,"method")
dojo.connect("method_name",method)
也就是说,被connect的函数必须是字符串的形式,它所在的object要么指定,如果是window,可以写成null或者干脆不写,可以看看dojo源码的connect.js
还有就是不要直接在<script>标签里初始化,用dojo.addOnLoad吧

非常感谢楼主的回复,我才开始接触dojo,有很多问题不太明白,希望可以邮件向您请教!
fyting 2008-04-12
commond 写道

function foo() { console.debug("A click upon your houses!"); }
function globalGuy() { console.debug("Global Guy fired!"); }
var someObject = {
bar: function() { console.debug("Bar fired!"); return 7; },
baz: function() { console.debug("Baz fired!"); return 14; }
}
var anotherObject = {
afterBaz: function () { console.debug("afterBaz fired!"); }
}
firstLinkConnections = [];
firstLinkNode = dojo.byId("firstLink");
firstLinkConnections[0] = dojo.connect(firstLinkNode,foo);
firstLinkConnections[1] = dojo.connect(firstLinkNode,"bar");
firstLinkConnections[2] = dojo.connect(foo,globalGuy);

我想请问一下楼主,加粗的一行为什么不起作用呢?

这个问题是因为“引用”。dojo.connect是用javascript在运行时的行为,所以在实现过程中,它会把原来的函数替换掉。可以先这样来看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html代码
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  4. <scriptsrc="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"type="text/javascript"djConfig="parseOnLoad:true,isDebug:true"></script>
  5. <scripttype="text/javascript">
  6. functionfoo()
  7. {
  8. console.debug("foo.");
  9. }
  10. functionbar()
  11. {
  12. console.debug("bar.");
  13. }
  14. varold_foo=window['foo'];
  15. dojo.connect("foo",bar);
  16. console.debug("old_foo==new_foo==>"+(old_foo==foo));
  17. </script>
  18. </head>
  19. </html>

可以看到,connect后的foo函数已经不是之前的foo了,你可以看作spring里用cglib 实现的AOP。

Javascript代码
  1. firstLinkConnections[2]=dojo.connect(foo,globalGuy);

这句代码在
Javascript代码
  1. irstLinkConnections[0]=dojo.connect(firstLinkNode,foo);
之后,因此传递给onclick的foo是未被connect->globalGuy处理的,一个原生态的foo引用。除非你在此之后把foo设置到onclick里面,否则修改是不会起任何作用的。你可以把firstLinkConnections[2]放到firstLinkConnections[0]前面试试:
Java代码
  1. firstLinkConnections=[];
  2. firstLinkNode=dojo.byId("firstLink");
  3. [color=red]firstLinkConnections[2]=dojo.connect("foo",globalGuy);[/color]
  4. firstLinkConnections[0]=dojo.connect(firstLinkNode,foo);

另外,有两个小错误,一个是dojo.connect接受的参数形式是这样的:
dojo.connect(obj,"method")
dojo.connect(obj,method)
dojo.connect(null,"method")
dojo.connect("method_name",method)
也就是说,被connect的函数必须是字符串的形式,它所在的object要么指定,如果是window,可以写成null或者干脆不写,可以看看dojo源码的connect.js
还有就是不要直接在<script>标签里初始化,用dojo.addOnLoad吧
commond 2008-04-09
<head>
<title>Dojo Events are Great</title>
<script src="js/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad: true,isDebug: true"></script>
<script type="text/javascript">
function foo() { console.debug("A click upon your houses!"); }
function globalGuy() { console.debug("Global Guy fired!"); }
var someObject = {
bar: function() { console.debug("Bar fired!"); return 7; },
baz: function() { console.debug("Baz fired!"); return 14; }
}
var anotherObject = {
afterBaz: function () { console.debug("afterBaz fired!"); }
}
firstLinkConnections = [];
firstLinkNode = dojo.byId("firstLink");
firstLinkConnections[0] = dojo.connect(firstLinkNode,foo);
firstLinkConnections[1] = dojo.connect(firstLinkNode,"bar");
firstLinkConnections[2] = dojo.connect(foo,globalGuy);



</script>
<body>
<a id="firstLink" href="http://dojotoolkit.org/">Dojo</a> is an excellent tool kit.
</body>

我想请问一下楼主,加粗的一行为什么不起作用呢?
sinapaper 2008-01-24
xhrget不错
fyting 2008-01-10
advancegongyu 写道
楼主,请教下Dojo Grid的问题 我用的版本是1.0.2
如何添加单元行的单击事件啊?
如何隐藏一个列啊?
如何动态改变行数啊?
有没有分页器啊?
谢谢

要给单元行添加事件,你可以监听onRowClick事件,比如:
Java代码
  1. dojo.connect(this.grid,"onRowClick",ContextObj,"_onRowClick");
  2. varContextObj={
  3. _onCellClick:function(event){
  4. varrowIndex=event.rowIndex;
  5. alert("当前点击的是"+rowIndex+"行");
  6. }
  7. }

具体的可以参考
http://www.dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid/events
要注意的就是这里的event对象含有Grid的一些属性,文档里有说明

隐藏一个列可以改变Grid的Structure,在你去掉structure里面某一个列的配置信息后,重新
grid.setStructure(layout);
这样应该就可以实现你的隐藏一个列了,不知道这样是否清楚?

动态改变行数,有个方法的:grid.scrollToRow(55)

分页的,dojo还没有实现,在邮件列表上有人问这个,Alex Russell回答说dojo-grid有了virtual scrolling就不需要分页,我只想抽他丫的……在1.1里面不知道是否会加入分页条,在Grid的主要贡献者dylan的开发者blog上也没啥人提……
分页我倒是加了,不过感觉不爽。个人认为Grid的model部分设计得比较烂,不太好扩展,这里是一个典型的组合优先于继承的设计,所以Ext的Grid感觉易用性好些……下面有一张图,等空了我会把这部分的代码整理后贴出来(用了dojo,你就别想闲下来……这篇都是元旦时才写的……)


jindw 写道

关于调试问题,同类动态装载脚本的实现都有类似问题。

这个问题在JSI中有一些解决办法,先给大家截个图。

JSI很不错,一直没来得及看……
jindw 2008-01-10

关于调试问题,同类动态装载脚本的实现都有类似问题。

这个问题在JSI中有一些解决办法,先给大家截个图。

这时JSI2.1在firebug上做脚本调试时的截图,我们可以轻松定位到没个源文件,可以在其中设置断点,一旦有错误,可以准确定位到准确行数。

PS:JSI2.1 以基本开发完成,将择日发布

advancegongyu 2008-01-10

大佬总结

以上是大佬教程为你收集整理的dojo 入门全部内容,希望文章能够帮你解决dojo 入门所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。
标签:dojo入门