转载请注明出处
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
开始使用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
dojo.connect
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场
是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多?
用prototype时最烦的就是那个长长的bindAsListener了,使用dojo.conncect,可以在第三个参数中指定当前的scope:
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时的标签:
多了一个djConfig属性,很简单,第一个isDebug是说是否打开FireBug的Console,第二个是xmlhttp使用的编码。第二个才是重点,设置了就一劳永逸了。
这次我们要点击了hello按钮后发出一个xmlhttp请求:
看看,够不够一目了然?
url 就是url……
handleAs 把获取的内容作为text/html
load 成功时的回调函数
error 失败时的回调函数
那如果要传入参数怎么办?
注意那个content参数,你要传入的参数是个关联数组/object,dojo会自动把参数解析出来,要使用post方法?
dojo.xhrGet ---> dojo.xhrPost
其他的还有
dojo.xhrPut
dojo.xhrDelete
json
那要是我想更换获取到的数据类型,比如json?xml?
修改handleAs即可,如:
handleAs: "json"
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 有一个表格,应该能找到你需要的。
想要直接提交一个表单,就这样:
要解决IE下那个臭名昭著的 缓存问题,就这样,preventCache会帮你自动生成一个timestamp
dojo.hitch scope/context
既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch
OK,基本的东西解决了,还有很多常用的函数没有介绍,比如:dojo.query,dojo.forEach,dojo.marginBox,dojo.contentBox等等
这个就没事翻翻dojo.js.uncompressed.js源代码,dojo的文档是没啥好指望的了。
面向对象,定义Class
下一步我们看看dojo里如何定义Class:
declare有三个参数:
第一个 class名字
第二个 父类的引用
第三个 ...
构造函数的名字就叫做"construnctor"
再来看看如何继承:
那么,如何 调用父类的方法呢。使用this.inherited方法
关于构造函数:
父类构造函数总是被自动调用的,所以看下面的例子:
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里的关键字参数。
多继承,mixin
说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的 mixin的同名方法覆盖前面的方法
其他的比较有用的函数就是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
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
- <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>
- <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>
- <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
- dojo.addOnLoad(function(){
- var username = dojo.byId('username').value
- alert(username);
- });
- dojo.addOnLoad(function(){
- var username = dojo.byId('username').value
- alert(username);
- });
- dojo.addOnLoad(function(){
- var username = dojo.byId('username').value
- alert(username);
- });
dojo.addOnLoad(function(){
var username = dojo.byId('username').value
alert(username);
});
dojo.connect
OK,window.onload搞定了,那么如何监听普通的dom事件呢?没问题,强大的dojo.connect出场
- <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" />
- <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" />
- <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" />
<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:
- 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);//注意这行的第三个和第四个参数
- });
- 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);//注意这行的第三个和第四个参数
- });
- 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);//注意这行的第三个和第四个参数
- });
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时的标签:
- <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>
- <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请求:
- 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);
- 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);
- 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);
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 失败时的回调函数
那如果要传入参数怎么办?
- var params = {
- username:'Mark',
- id:'105'
- }
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- content:params,
- //...
- });
- var params = {
- username:'Mark',
- id:'105'
- }
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- content:params,
- //...
- });
- var params = {
- username:'Mark',
- id:'105'
- }
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- content:params,
- //...
- });
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"
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- handleAs: "json",
- load: function(json)
- {
- alert(json.name)
- }
- //...
- });
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- handleAs: "json",
- load: function(json)
- {
- alert(json.name)
- }
- //...
- });
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- handleAs: "json",
- load: function(json)
- {
- alert(json.name)
- }
- //...
- });
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 有一个表格,应该能找到你需要的。
想要直接提交一个表单,就这样:
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- form: dojo.byId("form1")
- //...
- });
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- form: dojo.byId("form1")
- //...
- });
- 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会帮你自动生成一个timestamp
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- preventCache: true
- //...
- });
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- preventCache: true
- //...
- });
- dojo.xhrGet({
- url: "http://localhost/hello/sayHello.jsp",
- preventCache: true
- //...
- });
dojo.xhrGet({
url: "http://localhost/hello/sayHello.jsp",
preventCache: true
//...
});
dojo.hitch scope/context
既然用到了xmlhttp,一个常见的问题就是回调函数的scope/context。在prototype、mootools里我们常用Function.bind,在dojo中,做相同事情的东西叫做dojo.hitch
- 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
- //...
- });
- }
- }
- 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
- //...
- });
- }
- }
- 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
- //...
- });
- }
- }
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:
- 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();
- 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();
- 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();
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"
再来看看如何继承:
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- alert("Discount is 0.8");
- }
- });
- var vip = new VIP("Mark");
- vip.say();
- vip.getDiscount();
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- alert("Discount is 0.8");
- }
- });
- var vip = new VIP("Mark");
- vip.say();
- vip.getDiscount();
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- alert("Discount is 0.8");
- }
- });
- var vip = new VIP("Mark");
- vip.say();
- vip.getDiscount();
dojo.declare("VIP",Customer,{
getDiscount:function(){
alert("Discount is 0.8");
}
});
var vip = new VIP("Mark");
vip.say();
vip.getDiscount();
那么,如何 调用父类的方法呢。使用this.inherited方法
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- this.inherited(arguments);
- //this.inherited("getDiscount",arguments);
- }
- });
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- this.inherited(arguments);
- //this.inherited("getDiscount",arguments);
- }
- });
- dojo.declare("VIP",Customer,{
- getDiscount:function(){
- this.inherited(arguments);
- //this.inherited("getDiscount",arguments);
- }
- });
dojo.declare("VIP",Customer,{
getDiscount:function(){
this.inherited(arguments);
//this.inherited("getDiscount",arguments);
}
});
关于构造函数:
父类构造函数总是被自动调用的,所以看下面的例子:
- 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
- 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
- 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
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里的关键字参数。
- constructor:function(args){
- var args = args || {};
- this.name = args.name;
- this.age = args.age;
- }
- constructor:function(args){
- var args = args || {};
- this.name = args.name;
- this.age = args.age;
- }
- constructor:function(args){
- var args = args || {};
- this.name = args.name;
- this.age = args.age;
- }
constructor:function(args){
var args = args || {};
this.name = args.name;
this.age = args.age;
}
多继承,mixin
说到继承,多继承的问题又来了。dojo支持多继承,准确地说,是mixin。还记得dojo.declare的第二个参数吗,就是表示父类的那个参数,这个参数可以是一个数组,数组的第一个元素作为声明的类的父类,其他的作为mixin。子类自动获得父类和mixin的所有方法,后面的 mixin的同名方法覆盖前面的方法
- 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.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.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.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