dojo入门 dojo入门

1.引入dojo.js

dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构: 

1
2
3
4
5
6
7
8
9
10
11
12
project
|
+--dojo-lib
| |
| +--dijit
| +--dojo
| +--dojox
| +--util
|
+--dojo_hello_world.html
 
<script type= "text/javascript"  src= "./dojo-lib/dojo/dojo.js" ></script>

2.开始使用dojo

dom

(1)dojo.byId

dojo.byId就等同于常用的document.getElement 。

1
2
3
4
5
6
<input type= "text"  name= "username"  id= "username"  value= "Mark"  />
 
<script type= "text/javascript" >
var  username = dojo.byId( 'username' ).value
alert(username);
</script>

(2)dojo.addOnLoad

现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad。

1
2
3
4
dojo.addOnLoad( function (){
  var  username = dojo.byId( 'username' ).value
  alert(username);
});

(3)dojo.connect

OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场。

1
2
3
4
5
6
7
8
9
10
11
<script type= "text/javascript" >
function  sayHello(event)
{
  alert( "Hello" );
}
dojo.addOnLoad( function (){
  var  btn = dojo.byId( 'hello' );
  dojo.connect(btn, "onclick" ,sayHello);
});
</script>
<input type= "button"  id= "hello"  value= "Hello"  />

不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:

1
2
3
4
5
6
7
8
9
10
11
12
var  name =  "Mark"
function  sayHello()
{
  alert( "Hello "  this .name);
}
var  obj = {
  name:  "Karl"
}
dojo.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

(1)默认绑定为utf-8

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

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

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

(2)发出一个xmlhttp请求

 这次我们要点击了hello按钮后发出一个xmlhttp请求: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 失败时的回调函数

(3)传入参数

那如果要传入参数怎么办? 

1
2
3
4
5
6
7
8
9
var  params = {
     username: 'Mark' ,
     id: '105'
}
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     content:params,
     //...
});

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

(4)json

那要是我想更换获取到的数据类型,比如json?xml?修改handleAs即可,如: handleAs: "json" 

1
2
3
4
5
6
7
8
9
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     handleAs:  "json" ,
     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有一个表格应该能找到你需要的。

(5)直接提交一个表单

想要直接提交一个表单就这样: 

1
2
3
4
5
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     form: dojo.byId( "form1" )
     //...
});

(6)preventCache  

要解决IE下那个臭名昭著的缓存问题,就这样,preventCache会帮你自动生成一个timestamp 

1
2
3
4
5
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     preventCache:  true
     //...
});

dojo.hitch scope/context

(1)dojo.hitch  

既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var  handler = {
     name: 'Mark' ,
     execute1:  function (){
         dojo.xhrGet({
             url:  "http://localhost/hello/sayHello.jsp" ,
             handleAs:  "text" ,
             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" ,
             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  

(1)定义Class

1
2
3
4
5
6
7
8
9
10
11
12
13
dojo.declare( "Customer" , null ,{
     constructor: function (name){
         this .name = name;
     },
     say: function (){
         alert( "Hello "  this .name);
     },
     getDiscount: function (){
         alert( "Discount is 1.0" );
     }
});
var  customer1 =  new  Customer( "Mark" );
customer1.say();

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

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

(2)继承  

1
2
3
4
5
6
7
8
dojo.declare( "VIP" ,Customer,{
     getDiscount: function (){
         alert( "Discount is 0.8" );
     }
});
var  vip =  new  VIP( "Mark" );
vip.say();
vip.getDiscount();

(3)this.inherited方法调用父类

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

(4)关于构造函数  

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
dojo.declare( "Customer" , null ,{
     constructor: function (name){
         this .name = name;
         alert( "base class" );
     },
     say: function (){
         alert( this .name);
     }
});
dojo.declare( "VIP" ,Customer,{
     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

1将打印出两条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里的关键字参数。

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

(5)多继承,mixin  

说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 
dojo.provide 
dojo.registerModulePath 

(1)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很相似。

(2)dojo.provide

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

dojo.provide("com.javaeye.fyting.Package1");

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

(3)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原生地支持这些。

1.引入dojo.js

dojo的发行包里有4个子目录,要引入的文件是名叫"dojo"的子目录里的dojo.js。 假设你是这样的目录结构: 

1
2
3
4
5
6
7
8
9
10
11
12
project
|
+--dojo-lib
| |
| +--dijit
| +--dojo
| +--dojox
| +--util
|
+--dojo_hello_world.html
 
<script type= "text/javascript"  src= "./dojo-lib/dojo/dojo.js" ></script>

2.开始使用dojo

dom

(1)dojo.byId

dojo.byId就等同于常用的document.getElement 。

1
2
3
4
5
6
<input type= "text"  name= "username"  id= "username"  value= "Mark"  />
 
<script type= "text/javascript" >
var  username = dojo.byId( 'username' ).value
alert(username);
</script>

(2)dojo.addOnLoad

现在我们想在window.onload里面处理一点东西,就像Ext.onReady,这个东西在dojo里叫做dojo.addOnLoad。

1
2
3
4
dojo.addOnLoad( function (){
  var  username = dojo.byId( 'username' ).value
  alert(username);
});

(3)dojo.connect

OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场。

1
2
3
4
5
6
7
8
9
10
11
<script type= "text/javascript" >
function  sayHello(event)
{
  alert( "Hello" );
}
dojo.addOnLoad( function (){
  var  btn = dojo.byId( 'hello' );
  dojo.connect(btn, "onclick" ,sayHello);
});
</script>
<input type= "button"  id= "hello"  value= "Hello"  />

不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:

1
2
3
4
5
6
7
8
9
10
11
12
var  name =  "Mark"
function  sayHello()
{
  alert( "Hello "  this .name);
}
var  obj = {
  name:  "Karl"
}
dojo.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

(1)默认绑定为utf-8

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

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

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

(2)发出一个xmlhttp请求

 这次我们要点击了hello按钮后发出一个xmlhttp请求: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 失败时的回调函数

(3)传入参数

那如果要传入参数怎么办? 

1
2
3
4
5
6
7
8
9
var  params = {
     username: 'Mark' ,
     id: '105'
}
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     content:params,
     //...
});

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

(4)json

那要是我想更换获取到的数据类型,比如json?xml?修改handleAs即可,如: handleAs: "json" 

1
2
3
4
5
6
7
8
9
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     handleAs:  "json" ,
     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有一个表格应该能找到你需要的。

(5)直接提交一个表单

想要直接提交一个表单就这样: 

1
2
3
4
5
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     form: dojo.byId( "form1" )
     //...
});

(6)preventCache  

要解决IE下那个臭名昭著的缓存问题,就这样,preventCache会帮你自动生成一个timestamp 

1
2
3
4
5
dojo.xhrGet({
     url:  "http://localhost/hello/sayHello.jsp" ,
     preventCache:  true
     //...
});

dojo.hitch scope/context

(1)dojo.hitch  

既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var  handler = {
     name: 'Mark' ,
     execute1:  function (){
         dojo.xhrGet({
             url:  "http://localhost/hello/sayHello.jsp" ,
             handleAs:  "text" ,
             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" ,
             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  

(1)定义Class

1
2
3
4
5
6
7
8
9
10
11
12
13
dojo.declare( "Customer" , null ,{
     constructor: function (name){
         this .name = name;
     },
     say: function (){
         alert( "Hello "  this .name);
     },
     getDiscount: function (){
         alert( "Discount is 1.0" );
     }
});
var  customer1 =  new  Customer( "Mark" );
customer1.say();

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

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

(2)继承  

1
2
3
4
5
6
7
8
dojo.declare( "VIP" ,Customer,{
     getDiscount: function (){
         alert( "Discount is 0.8" );
     }
});
var  vip =  new  VIP( "Mark" );
vip.say();
vip.getDiscount();

(3)this.inherited方法调用父类

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

(4)关于构造函数  

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
dojo.declare( "Customer" , null ,{
     constructor: function (name){
         this .name = name;
         alert( "base class" );
     },
     say: function (){
         alert( this .name);
     }
});
dojo.declare( "VIP" ,Customer,{
     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

1将打印出两条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里的关键字参数。

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

(5)多继承,mixin  

说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的mixin的同名方法覆盖前面的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 
dojo.provide 
dojo.registerModulePath 

(1)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很相似。

(2)dojo.provide

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

dojo.provide("com.javaeye.fyting.Package1");

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

(3)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原生地支持这些。

猜你喜欢

转载自www.cnblogs.com/Jeely/p/11438233.html