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原生地支持這些。