dojo快速入门----【测试有效】

Dojo 前端之家
前端之家收集整理的这篇文章主要介绍了dojo快速入门----【测试有效】，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

转载请注明出处 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>
Java代码
  1. <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"></script>
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. });
Java代码
  1. dojo.addOnLoad(function(){
  2. varusername=dojo.byId('username').value
  3. alert(username);
  4. });
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"/>
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,sayHello);
  9. });
  10. </script>
  11. <inputtype="button"id="hello"value="Hello"/>
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. });
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,sayHello);//注意这行的第三个和第四个参数
  12. });
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,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>
Java代码
  1. <scripttype="text/javascript"src="./dojo-lib/dojo/dojo.js"djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>
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);
Java代码
  1. functionsayHello(){
  2. dojo.xhrGet({
  3. url:"http://localhost/hello/sayHello.jsp",sayHello);
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. });
Java代码
  1. varparams={
  2. username:'Mark',
  3. //...
  4. });
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. });
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. load:function(json)
  4. {
  5. alert(json.name)
  6. }
  7. //...
  8. });
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. });
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. form:dojo.byId("form1")
  4. //...
  5. });
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. });
Java代码
  1. dojo.xhrGet({
  2. url:"http://localhost/hello/sayHello.jsp",
  3. preventCache:true
  4. //...
  5. });
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. }
Java代码
  1. varhandler={
  2. name:'Mark',知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx
  3. //...
  4. });
  5. }
  6. }
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.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. });
  13. varcustomer1=newCustomer("Mark");
  14. customer1.say();
Java代码
  1. dojo.declare("Customer",
  2. getDiscount:function(){
  3. alert("Discountis1.0");
  4. }
  5. });
  7. varcustomer1=newCustomer("Mark");
  8. customer1.say();
Java代码
  1. dojo.declare("Customer",{
  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. });
  13. varcustomer1=newCustomer("Mark");
  14. 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();
Java代码
  1. dojo.declare("VIP",{
  2. getDiscount:function(){
  3. alert("Discountis0.8");
  4. }
  5. });
  6. varvip=newVIP("Mark");
  7. vip.say();
  8. vip.getDiscount();
Java代码
  1. dojo.declare("VIP",{
  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("VIP",arguments);
  2. }
  3. });
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. });
  11. dojo.declare("VIP",{
  12. constructor:function(age){
  13. this.age=age;
  14. alert("childclass");
  15. },
  16. say:function(){
  17. alert("name:"+this.name);
  18. alert("age:"+this.age);
  19. }
  20. });
  22. varvip=newVIP("123");//1
  23. vip.say();//2
Java代码
  1. dojo.declare("Customer",
  2. say:function(){
  3. alert("name:"+this.name);
  4. alert("age:"+this.age);
  5. }
  6. });
  8. varvip=newVIP("123");//1
  9. vip.say();//2
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. });
  11. dojo.declare("VIP",{
  12. constructor:function(age){
  13. this.age=age;
  14. alert("childclass");
  15. },
  16. say:function(){
  17. alert("name:"+this.name);
  18. alert("age:"+this.age);
  19. }
  20. });
  22. varvip=newVIP("123");//1
  23. 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. }
Java代码
  1. constructor:function(args){
  2. varargs=args||{};
  3. this.name=args.name;
  4. this.age=args.age;
  5. }
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. });
  10. dojo.declare("MixinClass",{
  11. say:function(){
  12. alert("Hellomixin");
  13. },
  14. foo:function(){
  15. alert("fooinMixinClass");
  16. }
  17. });
  18. dojo.declare("VIP",[Customer,MixinClass],{
  19. });
  20. varvip=newVIP();
  21. vip.getDiscount();
  22. vip.foo();
  23. vip.say();//输出"HelloMixinClass"
Java代码
  1. dojo.declare("Customer",{
  2. });
  3. varvip=newVIP();
  4. vip.getDiscount();
  5. vip.foo();
  6. vip.say();//输出"HelloMixinClass"
Java代码
  1. dojo.declare("Customer",{
  2. say:function(){
  3. alert("HelloCustomer");
  4. },
  5. getDiscount:function(){
  6. alert("DiscountinCustomer");
  7. }
  8. });
  10. dojo.declare("MixinClass",{
  11. say:function(){
  12. alert("Hellomixin");
  13. },
  14. foo:function(){
  15. alert("fooinMixinClass");
  16. }
  17. });
  18. dojo.declare("VIP",{
  19. });
  20. varvip=newVIP();
  21. vip.getDiscount();
  22. vip.foo();
  23. 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相关文章

dojo/Deferred类和dojo/promise类的使用
参考博客：https://blog.csdn.net/blog_szhao/article/details/50220181 　　　       ...
设置查询以搜索dojo数据网格的所有字段
我有一个包含多个字段的Dojo DataGrid.我目前正在设置查询一次搜索一个字段,如下所示： gr...
dojo – 为JsonRestStore设置HTTP Accept标头
我正在使用JsonRestStore,但想为它添加一个自定义Accept标头.最好的方法是什么？ 这与diji...
dojo.query不适用于包含波形符(〜)字符的属性选择器
我需要选择一个给定其URL的链接节点.使用属性选择器的效果非常好,除了少数几个url有tilda的...
带有JSONREST问题的Dojo增强型网格
我正在尝试使用Dojo JSONREST的增强网格,我遇到了一些问题. 我一直在寻找一些例子,但无法弄...
什么时候会发布Dojo 2.0？
我使用过Dojo 1.0,但我有一些与版本相关的问题： >什么时候会发布Dojo 2.0？ >也是最...
dojo中的setSelected()DataGrid使前一个选择活动,即使对于带有selectionMode =“single”的网格也是如此
我有一个dojox.grid.DataGrid,我想以编程方式选择一行.我正在使用setSelected()这样做,它第...
dojo – 如何从dijit.form.Select中获取选项文本？
我的页面上有一个dijit.form.Select： <c:set var="qualId" value="${prev...
如何检查dojo.datagrid加载完成？
参见英文答案 > How to determine if a dojo grid has finished loading?       ...
dojo – 扩展dijit.Tree中的所有节点
有没有一种很好的方法来扩展/关闭dijit.Tree中的所有可扩展节点？ 对于那些寻找答案的人,请...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作