3、put type="text" name="username" id="username" value="Mark" />
OK，是不是和普通的js庫(kù)一樣，沒(méi)有任何玄機(jī)？
dojo.addOnLoad
現(xiàn)在我們想在window.onload里面處理一點(diǎn)東西，就像Ext.onReady，這個(gè)東西在dojo里叫做dojo.addOnLoad。
dojo.addOnLo
4、ad(function(){
?var username = dojo.byId('username').value
?alert(username);
});
dojo.connect
OK，window.onload搞定了，那么如何監(jiān)聽(tīng)普通的dom事件呢？沒(méi)問(wèn)題，強(qiáng)大的dojo.connect出場(chǎng)。
是不是和prototype的Event.observe($('btnAdd'), "load", doAdd)差不多? 用prototype時(shí)最煩的就是那個(gè)長(zhǎng)長(zhǎng)的bindAsListener了，使用dojo.conncect，可以在第三個(gè)參數(shù)中指定當(dāng)前的scope：
var name = "Mark"
function sayHello()
{
?alert("Hello
6、 " + this.name);
}
var obj = {
?name: "Karl"
}
dojo.addOnLoad(function(){
?var btn = dojo.byId('hello');
?dojo.connect(btn,"onclick",obj,sayHello);//注意這行的第三個(gè)和第四個(gè)參數(shù)
});
OK，點(diǎn)擊按鈕，將輸出：Hello Karl。這里dojo.connect的第三個(gè)參數(shù)變成了scope，而handler函數(shù)是第四個(gè)，實(shí)際上dojo.connect(btn,"onclick",sayHello); 與dojo.connect(b
7、tn,"onclick",null,sayHello); 相同。
更加復(fù)雜的用法這里不作介紹，寫(xiě)太多就越搞越復(fù)雜了，后面再寫(xiě)文章詳細(xì)介紹dojo.connect，這里只簡(jiǎn)單介紹如何綁定DOM事件。
xmlhttp dojo.xhrGet
OK，介紹了簡(jiǎn)單的DOM操作方法，接下來(lái)該到Ajax的傳統(tǒng)項(xiàng)目-XmlHttp了。在使用xmlhttp時(shí)，需要注意到編碼的問(wèn)題，要讓dojo默認(rèn)綁定為utf-8怎么辦呢？很簡(jiǎn)單，只需要修改一下引入dojo.js時(shí)的標(biāo)簽：
多了一個(gè)djConfig屬性，很簡(jiǎn)單，第一個(gè)isDebug是說(shuō)是否打開(kāi)FireBug的Console，第二個(gè)是xmlhttp使用的編碼。第二個(gè)才是重點(diǎn)，設(shè)置了就一勞永逸了。 這次我們要點(diǎn)擊了hello按鈕后發(fā)出一個(gè)xmlhttp請(qǐng)求:
function sayHello() {
??? dojo.xhrGet({
??????? url: "http://localhost/hello/sayHello.jsp",
??????? handleAs: "text",
9、??????? load: function(responseText)
??????? {
????????? alert(responseText);
????????? dojo.byId("divHello").innerHTML = responseText;
??????? },
??????? error: function(response)
??????? {
????????? alert("Error");
??????? }
??? });
}
dojo.connect(btn,"onclick",sayHello);
看看，夠不夠一目了然？ u
10、rl 就是url…… ；handleAs 把獲取的內(nèi)容作為text/html ；load 成功時(shí)的回調(diào)函數(shù)；error 失敗時(shí)的回調(diào)函數(shù)
那如果要傳入?yún)?shù)怎么辦?
var params = {
??? username:'Mark',
??? id:'105'
}
dojo.xhrGet({
??? url: "http://localhost/hello/sayHello.jsp",
??? content:params,
??? //...
});
注意那個(gè)content參數(shù)，你要傳入的參數(shù)是個(gè)關(guān)聯(lián)數(shù)組/object，dojo會(huì)自動(dòng)把參數(shù)解析出來(lái)，要使用post方
11、法？ dojo.xhrGet ---> dojo.xhrPost ，其他的還有，dojo.xhrPut、dojo.xhrDelete。
json
那要是我想更換獲取到的數(shù)據(jù)類型，比如json？xml？修改handleAs即可，如： handleAs: "json"
dojo.xhrGet({
??? url: "http://localhost/hello/sayHello.jsp",
??? handleAs: "json",
??? load: function(json)
??? {
??????? alert(json.name)
??? }
??? //
12、...
});
handleAs: "json-comment-filtered" 使用注釋符號(hào)/**/把json數(shù)據(jù)包含起來(lái),推薦使用
handleAs: "json-comment-optional" 首先嘗試使用json-comment-filtered,如果執(zhí)行錯(cuò)誤,再使用普通的json格式解析
handleAs: "javascript" dojo嘗試把服務(wù)器返回的數(shù)據(jù)當(dāng)作javascript執(zhí)行,并把結(jié)果作為參數(shù)傳遞給load函數(shù)
handleAs: "xml" xml對(duì)象。注意在Mozilla和IE中的xml是不同的，推薦使用sarissa
至于json和ob
13、ject的轉(zhuǎn)換等，在http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/other-miscellaneous-function/converting-json有一個(gè)表格，應(yīng)該能找到你需要的。
想要直接提交一個(gè)表單就這樣:
dojo.xhrGet({
??? url: "http://localhost/hello/sayHello.jsp",
??? form: dojo.byId("form1")
??? //...
});
要解決IE下那個(gè)臭名昭著的緩存問(wèn)題，就這樣,
14、preventCache會(huì)幫你自動(dòng)生成一個(gè)timestamp
dojo.xhrGet({
??? url: "http://localhost/hello/sayHello.jsp",
??? preventCache: true
??? //...
});
dojo.hitch scope/context
既然用到了xmlhttp，一個(gè)常見(jiàn)的問(wèn)題就是回調(diào)函數(shù)的scope/context。在prototype、mootools里我們常用Function.bind，在dojo中，做相同事情的東西叫做dojo.hitch。
var handler = {
??? na
15、me:'Mark',
??? execute1: function(){
??????? dojo.xhrGet({
??????????? url: "http://localhost/hello/sayHello.jsp",
??????????? handleAs: "text",
??????????? error: function(text)
??????????? {
??????????????? console.dir(this);
??????????????? alert(this.name);//輸出undefined,這里的this表示當(dāng)前io參數(shù)
16、??????????? }
??????????? //...
??????? });
??? },
??? load: function(text){
??????? alert(this.name);
??? },
??? execute2: function(){
??????? dojo.xhrGet({
??????????? url: "http://localhost/hello/sayHello.jsp",
??????????? handleAs: "text",
??????????? error: dojo.hitch(this,"load") //
17、輸出Mark
??????????? //error: dojo.hitch(this,this.load); //與上一句相同,知道為什么要用方法名字而不是引用了吧?省去了長(zhǎng)長(zhǎng)的一串this.xxx
??????????? //...
??????? });
??? }
}
OK，基本的東西解決了，還有很多常用的函數(shù)沒(méi)有介紹，比如：dojo.query，dojo.forEach，dojo.marginBox，dojo.contentBox等等。這個(gè)就沒(méi)事翻翻dojo.js.uncompressed.js源代碼，dojo的文檔是沒(méi)啥好指望的了。
面向?qū)ο?定義Class
18、
下一步我們看看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("M
19、ark");
customer1.say();
declare有三個(gè)參數(shù): 第一個(gè) class名字；第二個(gè) 父類的引用 ；第三個(gè) ...
構(gòu)造函數(shù)的名字就叫做"construnctor"
再來(lái)看看如何繼承
dojo.declare("VIP",Customer,{
??? getDiscount:function(){
??????? alert("Discount is 0.8");
??? }
});
var vip = new VIP("Mark");
vip.say();
vip.getDiscount();
使用this.inherited方
20、法調(diào)用父類
dojo.declare("VIP",Customer,{
??? getDiscount:function(){
??????? this.inherited(arguments);
??????? //this.inherited("getDiscount",arguments);
??? }
});
關(guān)于構(gòu)造函數(shù)
父類構(gòu)造函數(shù)總是被自動(dòng)調(diào)用的，所以看下面的例子:
dojo.declare("Customer",null,{
??? constructor:function(name){
??????? this.name = name;
??????
21、? 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:" +
22、this.age);
??? }
});
var vip = new VIP("123");//1
vip.say();//2
1將打印出兩條alert語(yǔ)句，先是父類的構(gòu)造函數(shù)，再是子類的。 2將輸出"name: 123" "age: 123" 。個(gè)人認(rèn)為，這個(gè)特性并不好，因?yàn)閖avascript這種弱類型的語(yǔ)言中，根本無(wú)法確定構(gòu)造函數(shù)中的參數(shù)是傳遞給誰(shuí)的，就比如上面的語(yǔ)句執(zhí)行后，name="123",age="123"，那哪個(gè)才是正確的？這個(gè)問(wèn)題在使用dojo Grid的model里就很麻煩，定義一個(gè)model得這樣:new dojox.grid._data.Table(null,
23、null,data);我要是想擴(kuò)展這個(gè)Model，更麻煩，所有子類的構(gòu)造函數(shù)都被父類給搞亂了。所以推薦的做法是使用關(guān)聯(lián)數(shù)組作為構(gòu)造函數(shù)的參數(shù)，就像Python里的關(guān)鍵字參數(shù)。
constructor:function(args){
??? var args = args || {};
??? this.name = args.name;
??? this.age = args.age;
}
多繼承,mixin
說(shuō)到繼承，多繼承的問(wèn)題又來(lái)了。dojo支持多繼承，準(zhǔn)確地說(shuō)，是mixin。還記得dojo.declare的第二個(gè)參數(shù)嗎，就是表示父類的那個(gè)參數(shù)，這個(gè)參數(shù)可以是一個(gè)數(shù)組，數(shù)
24、組的第一個(gè)元素作為聲明的類的父類，其他的作為mixin。子類自動(dòng)獲得父類和mixin的所有方法，后面的mixin的同名方法覆蓋前面的方法。
dojo.declare("Customer",null,{
??? say:function(){
??????? alert("Hello Customer");
??? },
??? getDiscount:function(){
??????? alert("Discount in Customer");
??? }
});
dojo.declare("MixinClass",null,{
??? say:function(){
25、
??????? 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"
其他的比較有用的函數(shù)就是dojo.mixin和dojo.extend了，顧名思義，一個(gè)是作用于對(duì)象實(shí)例，
26、一個(gè)是用于擴(kuò)展class，翻文檔和源碼吧。
package機(jī)制
說(shuō)完了dojo里的類繼承機(jī)制，不得不說(shuō)說(shuō)package機(jī)制。
主要用到的有
dojo.require
dojo.provide
dojo.registerModulePath
dojo.require
dojo.require就是引入相應(yīng)路徑文件下的js文件，現(xiàn)在已經(jīng)有很多l(xiāng)ibrary這樣做了?，F(xiàn)在我們假設(shè)要用project/dojo-lib/dojo/string.js
dojo中的頂層目錄就是dojo.js所在目錄的上一層,即"project/dojo-lib/"，而dojo.js放
27、在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");
說(shuō)白了，就和ruby之類的require很相似。
dojo.provide
要自己編寫(xiě)一個(gè)package怎么辦，那就利用dojo.p
28、rovide。比如要寫(xiě)在：project/dojo-lib/com/javaeye/fyting/Package1.js 那么在對(duì)應(yīng)的Package1.js中第一行需要這樣寫(xiě):
dojo.provide("com.javaeye.fyting.Package1");
類似java里的package聲明，是吧？
dojo.registerModulePath
那要是我寫(xiě)的js文件不想和dojo放在一起怎么辦呢，那就用registerModulePath。假設(shè)要放在：
project/js/com/javaeye/fyting/Package2.js
Package2.js和
29、上面的Package1.js一樣的寫(xiě)法，不需要作特殊變化，就這樣就行：
dojo.provide("com.javaeye.fyting.Package2");
在使用時(shí)，需要指名這個(gè)Package2.js所在的位置，
dojo.registerModulePath("com","../../js/com");
只需要注意這里的相對(duì)路徑是相對(duì)dojo.js來(lái)的。
我們假設(shè)所有以com.javaeye開(kāi)頭的js都放在一起，而com.microsoft的放在另外的地方，為了防止沖突，可以這樣:
dojo.registerModulePath("com.javaeye","../../js/com/javaeye");
dojo.registerModulePath("com.microsoft","../../javascript/com/microsoft");
總得來(lái)說(shuō)，package機(jī)制是開(kāi)發(fā)大型項(xiàng)目必須的，但是造成了調(diào)試?yán)щy，使用dojo.require引入js出錯(cuò)時(shí)，根本不知道是什么原因，所以調(diào)試時(shí)最好手動(dòng)引入js，dojo的test也是這么搞的。還有js框架中的各種實(shí)現(xiàn)類繼承的手法，也造成調(diào)試?yán)щy，dojo還隨地拋出個(gè)Error，又缺少java那樣的error statck，根本不知道錯(cuò)誤根源在哪兒。所以，期待js原生地支持這些。
dojo入門(mén)筆記(免費(fèi))
