Dojo 入门

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

第一步,引入dojo.jsdojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js。假设你是这样的目录结构: 引用 project|+--dojo-lib|||+--dijit|+--dojo|+--dojox|+--util|+--dojo_hello_world.html Java代码 <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script> Java代码 <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script> Java代码 <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script> viewplaincopytoclipboardprint? <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script> <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script>开始使用dojo现在开始使用dojo的第一个函数:dojo.byIddojo.byId就等同于常用的document.getElement<inputtype="text"name="username"id="username"value="Mark"/><scripttype="text/javascript">varusername=dojo.byId(’username’).valuealert(username);</script>OK,是不是和普通的js库一样,没有任何玄机?dojo.addOnLoad现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoadJava代码 dojo.addOnLoad(function(){ varusername=dojo.byId(’username’).value alert(username); }); Java代码 dojo.addOnLoad(function(){ varusername=dojo.byId(’username’).value alert(username); }); Java代码 dojo.addOnLoad(function(){ varusername=dojo.byId(’username’).value alert(username); }); viewplaincopytoclipboardprint? dojo.addOnLoad(function(){ varusername=dojo.byId(’username’).value alert(username); }); dojo.addOnLoad(function(){ varusername=dojo.byId(’username’).value alert(username); });dojo.connectOK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场Java代码 <scripttype="text/javascript"> functionsayHello(event) { alert("Hello"); } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,"onclick",sayHello); }); </script> <inputtype="button"id="hello"value="Hello"/> Java代码 <scripttype="text/javascript"> functionsayHello(event) { alert("Hello"); } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello); }); </script> <inputtype="button"id="hello"value="Hello"/> viewplaincopytoclipboardprint? <scripttype="text/javascript"> functionsayHello(event) { alert("Hello"); } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello); }); </script> <inputtype="button"id="hello"value="Hello"/> <scripttype="text/javascript"> functionsayHello(event) { alert("Hello"); } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello); }); </script> <inputtype="button"id="hello"value="Hello"/> 是不是和prototype的Event.observe($(’btnAdd’),"load",doAdd)差不多?用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:Java代码 varname="Mark" functionsayHello() { alert("Hello"+this.name); } varobj={ name:"Karl" } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,obj,sayHello);//注意这行的第三个和第四个参数 }); Java代码 varname="Mark" functionsayHello() { alert("Hello"+this.name); } varobj={ name:"Karl" } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello);//注意这行的第三个和第四个参数 }); viewplaincopytoclipboardprint? varname="Mark" functionsayHello() { alert("Hello"+this.name); } varobj={ name:"Karl" } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello);//注意这行的第三个和第四个参数 }); varname="Mark" functionsayHello() { alert("Hello"+this.name); } varobj={ name:"Karl" } dojo.addOnLoad(function(){ varbtn=dojo.byId(’hello’); dojo.connect(btn,sayHello);//注意这行的第三个和第四个参数 }); OK,点击按钮,将输出:HelloKarl这里dojo.connect的第三个参数变成了scope,而handler函数是第四个,实际上dojo.connect(btn,sayHello);与dojo.connect(btn,null,sayHello);相同。更加复杂的用法这里不作介绍,写太多就越搞越复杂了,后面再写文章详细介绍dojo.connect,这里只简单介绍如何绑定DOM事件。xmlhttpdojo.xhrGetOK,介绍了简单的DOM操作方法,接下来该到Ajax的传统项目-XmlHttp了在使用xmlhttp时,需要注意到编码的问题,要让dojo默认绑定为utf-8怎么办呢?很简单,只需要修改一下引入dojo.js时的标签:Java代码 <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:’UTF-8’"></script> Java代码 <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:’UTF-8’"></script> viewplaincopytoclipboardprint? <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:’UTF-8’"></script> <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:’UTF-8’"></script>多了一个djConfig属性,很简单,第一个isDebug是说是否打开FireBug的Console,第二个是xmlhttp使用的编码。第二个才是重点,设置了就一劳永逸了。这次我们要点击了hello按钮后发出一个xmlhttp请求:Java代码 functionsayHello(){ 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,sayHello); Java代码 functionsayHello(){ dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",sayHello); viewplaincopytoclipboardprint? functionsayHello(){ dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",sayHello); functionsayHello(){ dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",sayHello);看看,够不够一目了然?url就是url……handleAs把获取的内容作为text/htmlload成功时的回调函数error失败时的回调函数那如果要传入参数怎么办?Java代码 varparams={ username:’Mark’,id:’105’ } dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",content:params,//... }); Java代码 varparams={ username:’Mark’,//... }); viewplaincopytoclipboardprint? varparams={ username:’Mark’,//... }); varparams={ username:’Mark’,//... }); 注意那个content参数,你要传入的参数是个关联数组/object,dojo会自动把参数解析出来,要使用post方法?dojo.xhrGet--->dojo.xhrPost其他的还有dojo.xhrPutdojo.xhrDeletejson那要是我想更换获取到的数据类型,比如json?xml?修改handleAs即可,如:handleAs:"json"Java代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",handleAs:"json",load:function(json) { alert(json.name) } //... }); Java代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",load:function(json) { alert(json.name) } //... }); viewplaincopytoclipboardprint? dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",load:function(json) { alert(json.name) } //... }); dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",load:function(json) { alert(json.name) } //... }); 引用 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代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",form:dojo.byId("form1") //... }); Java代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",form:dojo.byId("form1") //... }); viewplaincopytoclipboardprint? dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",form:dojo.byId("form1") //... }); dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",form:dojo.byId("form1") //... }); 要解决IE下那个臭名昭著的缓存问题,就这样,preventCache会帮你自动生成一个timestampJava代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",preventCache:true //... }); Java代码 dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",preventCache:true //... }); viewplaincopytoclipboardprint? dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",preventCache:true //... }); dojo.xhrGet({ url:"http://localhost/hello/sayHello.jsp",preventCache:true //... }); dojo.hitchscope/context既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitchJava代码 varhandler={ 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")//输出Mark //error:dojo.hitch(this,this.load);//与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx //... }); } } Java代码 varhandler={ name:’Mark’,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx //... }); } } viewplaincopytoclipboardprint? varhandler={ name:’Mark’,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx //... }); } } varhandler={ name:’Mark’,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx //... }); } } OK,基本的东西解决了,还有很多常用的函数没有介绍,比如:dojo.query,dojo.forEach,dojo.marginBox,dojo.contentBox等等这个就没事翻翻dojo.js.uncompressed.js源代码,dojo的文档是没啥好指望的了。面向对象,定义Class下一步我们看看dojo里如何定义Class:Java代码 dojo.declare("Customer",{ constructor:function(name){ this.name=name; },say:function(){ alert("Hello"+this.name); },getDiscount:function(){ alert("Discountis1.0"); } }); varcustomer1=newCustomer("Mark"); customer1.say(); Java代码 dojo.declare("Customer",getDiscount:function(){ alert("Discountis1.0"); } }); varcustomer1=newCustomer("Mark"); customer1.say(); viewplaincopytoclipboardprint? dojo.declare("Customer",getDiscount:function(){ alert("Discountis1.0"); } }); varcustomer1=newCustomer("Mark"); customer1.say(); dojo.declare("Customer",{ constructor:function(name){ &,nbsp;this.name=name; },say:function(){ alert("Hello"+this.name); },getDiscount:function(){ alert("Discountis1.0"); } }); varcustomer1=newCustomer("Mark"); customer1.say(); declare有三个参数:第一个class名字第二个父类的引用第三个...构造函数的名字就叫做"construnctor"再来看看如何继承:Java代码 dojo.declare("VIP",Customer,{ getDiscount:function(){ alert("Discountis0.8"); } }); varvip=newVIP("Mark"); vip.say(); vip.getDiscount(); Java代码 dojo.declare("VIP",{ getDiscount:function(){ alert("Discountis0.8"); } }); varvip=newVIP("Mark"); vip.say(); vip.getDiscount(); viewplaincopytoclipboardprint? dojo.declare("VIP",{ getDiscount:function(){ alert("Discountis0.8"); } }); varvip=newVIP("Mark"); vip.say(); vip.getDiscount(); dojo.declare("VIP",{ getDiscount:function(){ alert("Discountis0.8"); } }); varvip=newVIP("Mark"); vip.say(); vip.getDiscount();那么,如何调用父类的方法呢。使用this.inherited方法Java代码 dojo.declare("VIP",{ getDiscount:function(){ this.inherited(arguments); //this.inherited("getDiscount",arguments); } }); Java代码 dojo.declare("VIP",arguments); } }); viewplaincopytoclipboardprint? dojo.declare("VIP",arguments); } }); dojo.declare("VIP",arguments); } }); 关于构造函数:父类构造函数总是被自动调用的,所以看下面的例子:Java代码 dojo.declare("Customer",{ constructor:function(name){ this.name=name; alert("baseclass"); },say:function(){ alert(this.name); } }); dojo.declare("VIP",{ constructor:function(age){ this.age=age; alert("childclass"); },say:function(){ alert("name:"+this.name); alert("age:"+this.age); } }); varvip=newVIP("123");//1 vip.say();//2 Java代码 dojo.declare("Customer",say:function(){ alert("name:"+this.name); alert("age:"+this.age); } }); varvip=newVIP("123");//1 vip.say();//2 viewplaincopytoclipboardprint? dojo.declare("Customer",say:function(){ alert("name:"+this.name); alert("age:"+this.age); } }); varvip=newVIP("123");//1 vip.say();//2 dojo.declare("Customer",say:function(){ alert("name:"+this.name); alert("age:"+this.age); } }); varvip=newVIP("123");//1 vip.say();//2 1将打印出两条alert语句,先是父类的构造函数,再是子类的。2将输出"name:123""age:123"个人认为,这个特性并不好,因为javascript这种弱类型的语言中,根本无法确定构造函数中的参数是传递给谁的,就比如上面的语句执行后,name="123",age="123",那哪个才是正确的?这个问题在使用dojoGrid的model里就很麻烦,定义一个model得这样:newdojox.grid._data.Table(null,data);我要是想扩展这个Model,更麻烦,所有子类的构造函数都被父类给搞乱了。所以推荐的做法是使用关联数组作为构造函数的参数,就像Python里的关键字参数。Java代码 constructor:function(args){ varargs=args||{}; this.name=args.name; this.age=args.age; } Java代码 constructor:function(args){ varargs=args||{}; this.name=args.name; this.age=args.age; } Java代码 constructor:function(args){ varargs=args||{}; this.name=args.name; this.age=args.age; } viewplaincopytoclipboardprint? constructor:function(args){ varargs=args||{}; this.name=args.name; this.age=args.age; } constructor:function(args){ varargs=args||{}; this.name=args.name; this.age=args.age; } 多继承,mixin说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法Java代码

大佬总结

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

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

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