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. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>  

Java代码

1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>  

Java代码

1. <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>  

<script type="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.     var username = dojo.byId('username').value  
3.     alert(username);  
4. });  

Java代码

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

Java代码

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

dojo.addOnLoad(function(){var username = dojo.byId('username').valuealert(username);});

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

Java代码

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

Java代码

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

Java代码

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

<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：

Java代码

1. var name = "Mark"  
2. function sayHello()  
3. {  
4.     alert("Hello " + this.name);  
5. }  
6. var obj = {  
7.     name: "Karl"  
8. }  
9. dojo.addOnLoad(function(){  
10.     var btn = dojo.byId('hello');  
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数  
12. });  

Java代码

1. var name = "Mark"  
2. function sayHello()  
3. {  
4.     alert("Hello " + this.name);  
5. }  
6. var obj = {  
7.     name: "Karl"  
8. }  
9. dojo.addOnLoad(function(){  
10.     var btn = dojo.byId('hello');  
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数  
12. });  

Java代码

1. var name = "Mark"  
2. function sayHello()   
3. {   
4.     alert("Hello " + this.name);   
5. }   
6. var obj = {   
7.     name: "Karl"  
8. }   
9. dojo.addOnLoad(function(){   
10.     var btn = dojo.byId('hello');   
11.     dojo.connect(btn,"onclick",obj,sayHello);//注意这行的第三个和第四个参数   
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
OK，介绍了简单的DOM操作方法，接下来该到Ajax的传统项目-XmlHttp了
在使用xmlhttp时，需要注意到编码的问题，要让dojo默认绑定为utf-8怎么办呢？很简单，只需要修改一下引入dojo.js时的标签：

Java代码

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

Java代码

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

Java代码

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

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

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

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

Java代码

1. function sayHello() {  
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,"onclick",sayHello);  

Java代码

1. function sayHello() {  
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,"onclick",sayHello);  

Java代码

1. function sayHello() {   
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,"onclick",sayHello);  

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 失败时的回调函数


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

Java代码

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

Java代码

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

Java代码

1. var params = {   
2.     username:'Mark',   
3.     id:'105'  
4. }   
5. dojo.xhrGet({   
6.     url: "http://localhost/hello/sayHello.jsp",   
7.     content:params,   
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


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.     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.     handleAs: "json",   
4.     load: function(json)   
5.     {   
6.         alert(json.name)   
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 有一个表格，应该能找到你需要的。


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

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. });  

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

要解决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.xhrGet({    url: "http://localhost/hello/sayHello.jsp",    preventCache: true    //...});

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

Java代码

1. var handler = {  
2.     name:'Mark',  
3.     execute1: function(){  
4.         dojo.xhrGet({  
5.             url: "http://localhost/hello/sayHello.jsp",  
6.             handleAs: "text",  
7.             error: function(text)  
8.             {  
9.                 console.dir(this);  
10.                 alert(this.name);//输出undefined,这里的this表示当前io参数  
11.             }  
12.             //...  
13.         });  
14.     },  
15.     load: function(text){  
16.         alert(this.name);  
17.     },  
18.     execute2: function(){  
19.         dojo.xhrGet({  
20.             url: "http://localhost/hello/sayHello.jsp",  
21.             handleAs: "text",  
22.             error: dojo.hitch(this,"load") //输出Mark   
23.             //error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx  
24.             //...  
25.         });  
26.     }  
27. }  

Java代码

1. var handler = {  
2.     name:'Mark',  
3.     execute1: function(){  
4.         dojo.xhrGet({  
5.             url: "http://localhost/hello/sayHello.jsp",  
6.             handleAs: "text",  
7.             error: function(text)  
8.             {  
9.                 console.dir(this);  
10.                 alert(this.name);//输出undefined,这里的this表示当前io参数  
11.             }  
12.             //...  
13.         });  
14.     },  
15.     load: function(text){  
16.         alert(this.name);  
17.     },  
18.     execute2: function(){  
19.         dojo.xhrGet({  
20.             url: "http://localhost/hello/sayHello.jsp",  
21.             handleAs: "text",  
22.             error: dojo.hitch(this,"load") //输出Mark   
23.             //error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx  
24.             //...  
25.         });  
26.     }  
27. }  

Java代码

1. var handler = {   
2.     name:'Mark',   
3.     execute1: function(){   
4.         dojo.xhrGet({   
5.             url: "http://localhost/hello/sayHello.jsp",   
6.             handleAs: "text",   
7.             error: function(text)   
8.             {   
9.                 console.dir(this);   
10.                 alert(this.name);//输出undefined,这里的this表示当前io参数   
11.             }   
12.             //...   
13.         });   
14.     },   
15.     load: function(text){   
16.         alert(this.name);   
17.     },   
18.     execute2: function(){   
19.         dojo.xhrGet({   
20.             url: "http://localhost/hello/sayHello.jsp",   
21.             handleAs: "text",   
22.             error: dojo.hitch(this,"load") //输出Mark    
23.             //error: dojo.hitch(this,this.load); //与上一句相同,知道为什么要用方法名字而不是引用了吧?省去了长长的一串this.xxx   
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
下一步我们看看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("Discount is 1.0");  
10.     }  
11. });  
12.   
13. var customer1 = new Customer("Mark");  
14. customer1.say();  

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("Discount is 1.0");  
10.     }  
11. });  
12.   
13. var customer1 = new Customer("Mark");  
14. customer1.say();  

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("Discount is 1.0");   
10.     }   
11. });   
12.   
13. var customer1 = new Customer("Mark");   
14. customer1.say();  

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"


再来看看如何继承:

Java代码

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

Java代码

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

Java代码

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

dojo.declare("VIP",Customer,{    getDiscount:function(){        alert("Discount is 0.8");    }});var vip = new VIP("Mark");vip.say();vip.getDiscount();

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

Java代码

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

Java代码

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

Java代码

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

dojo.declare("VIP",Customer,{    getDiscount:function(){        this.inherited(arguments);        //this.inherited("getDiscount",arguments);    }});

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

Java代码

1. dojo.declare("Customer",null,{  
2.     constructor:function(name){  
3.         this.name = name;  
4.         alert("base class");  
5.     },  
6.     say:function(){  
7.         alert(this.name);  
8.     }  
9. });  
10.   
11. dojo.declare("VIP",Customer,{  
12.     constructor:function(age){  
13.         this.age = age;  
14.         alert("child class");  
15.     },  
16.     say:function(){  
17.         alert("name:" + this.name);  
18.         alert("age:" + this.age);  
19.     }  
20. });  
21.   
22. var vip = new VIP("123");//1  
23. vip.say();//2  

Java代码

1. dojo.declare("Customer",null,{  
2.     constructor:function(name){  
3.         this.name = name;  
4.         alert("base class");  
5.     },  
6.     say:function(){  
7.         alert(this.name);  
8.     }  
9. });  
10.   
11. dojo.declare("VIP",Customer,{  
12.     constructor:function(age){  
13.         this.age = age;  
14.         alert("child class");  
15.     },  
16.     say:function(){  
17.         alert("name:" + this.name);  
18.         alert("age:" + this.age);  
19.     }  
20. });  
21.   
22. var vip = new VIP("123");//1  
23. vip.say();//2  

Java代码

1. dojo.declare("Customer",null,{   
2.     constructor:function(name){   
3.         this.name = name;   
4.         alert("base class");   
5.     },   
6.     say:function(){   
7.         alert(this.name);   
8.     }   
9. });   
10.   
11. dojo.declare("VIP",Customer,{   
12.     constructor:function(age){   
13.         this.age = age;   
14.         alert("child class");   
15.     },   
16.     say:function(){   
17.         alert("name:" + this.name);   
18.         alert("age:" + this.age);   
19.     }   
20. });   
21.   
22. var vip = new VIP("123");//1   
23. vip.say();//2  

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");//1vip.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里的关键字参数。

Java代码

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

Java代码

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

Java代码

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

constructor:function(args){    var args = args || {};    this.name = args.name;    this.age = args.age;}

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

Java代码

1. dojo.declare("Customer",null,{  
2.     say:function(){  
3.         alert("Hello Customer");  
4.     },  
5.     getDiscount:function(){  
6.         alert("Discount in Customer");  
7.     }  
8. });  
9.   
10. dojo.declare("MixinClass",null,{  
11.     say:function(){  
12.         alert("Hello mixin");  
13.     },  
14.     foo:function(){  
15.         alert("foo in MixinClass");  
16.     }  
17. });  
18. dojo.declare("VIP",[Customer,MixinClass],{  
19. });  
20. var vip = new VIP();  
21. vip.getDiscount();  
22. vip.foo();  
23. vip.say();//输出"Hello MixinClass"  

Java代码

1. dojo.declare("Customer",null,{  
2.     say:function(){  
3.         alert("Hello Customer");  
4.     },  
5.     getDiscount:function(){  
6.         alert("Discount in Customer");  
7.     }  
8. });  
9.   
10. dojo.declare("MixinClass",null,{  
11.     say:function(){  
12.         alert("Hello mixin");  
13.     },  
14.     foo:function(){  
15.         alert("foo in MixinClass");  
16.     }  
17. });  
18. dojo.declare("VIP",[Customer,MixinClass],{  
19. });  
20. var vip = new VIP();  
21. vip.getDiscount();  
22. vip.foo();  
23. vip.say();//输出"Hello MixinClass"  

Java代码

1. dojo.declare("Customer",null,{   
2.     say:function(){   
3.         alert("Hello Customer");   
4.     },   
5.     getDiscount:function(){   
6.         alert("Discount in Customer");   
7.     }   
8. });   
9.   
10. dojo.declare("MixinClass",null,{   
11.     say:function(){   
12.         alert("Hello mixin");   
13.     },   
14.     foo:function(){   
15.         alert("foo in MixinClass");   
16.     }   
17. });   
18. dojo.declare("VIP",[Customer,MixinClass],{   
19. });   
20. var vip = new VIP();   
21. vip.getDiscount();   
22. vip.foo();   
23. vip.say();//输出"Hello MixinClass"  

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


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