Dojo Quick Start

以前的文章了，先轉過來湊數，以後將只在這裏更新~~~

原作者: Kenny 轉載請註明出自 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個子目錄
假設你是這樣的目錄結構:

project
|
+–dojo-lib
| |
| +–dijit
| +–dojo
| +–dojox
| +–util
|
+–dojo_hello_world.html

要引入的文件是名叫”dojo”的子目錄裏的dojo.js

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

開始使用dojo

現在開始使用dojo的第一個函數:dojo.byId
dojo.byId就等同於常用的document.getElementById

<input type="text" name="username" id="username" value="Mark" /> 
<script type="text/javascript"> 
var username = dojo.byId(&apos;username&apos;).value 
alert(username); 
</script>

OK，是不是和普通的js庫一樣，沒有任何玄機？

dojo.addOnLoad

現在我們想在window.onload裏面處理一點東西，就像Ext.onReady，這個東西在dojo裏叫做dojo.addOnLoad

dojo.addOnLoad(function(){   
    var username = dojo.byId(&apos;username&apos;).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(&apos;hello&apos;);   
    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(&apos;hello&apos;);   
    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:&apos;UTF-8&apos;">
</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);

看看，夠不夠一目瞭然？

url 就是url……
handleAs 把獲取的內容作爲text/html
load 成功時的回調函數
error 失敗時的回調函數

那如果要傳入參數怎麼辦?

var params = {   
    username:&apos;Mark&apos;,   
    id:&apos;105&apos;  
}   
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)   
    }   
    //...   
});

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

要解決IE下那個臭名昭著的緩存問題，就這樣,preventCache會幫你自動生成一個timestamp

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:&apos;Mark&apos;,   
    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();

declare有三個參數:

第一個 class名字
第二個父類的引用
第三個 …

構造函數的名字就叫做”construnctor”

再來看看如何繼承:

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("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;   
}

多繼承,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.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很相似。

dojo.provide

要自己編寫一個package怎麼辦，那就利用dojo.provide。比如要寫在：
project/dojo-lib/com/javaeye/fyting/Package1.js
那麼在對應的Package1.js中第一行需要這樣寫:
dojo.provide(”com.javaeye.fyting.Package1″);

類似java裏的package聲明，是吧？

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原生地支持這些^^
完整的代碼文件在附件裏，一個是含有dojo-1.0.2的，一個是沒有dojo的