dojo入門筆記(免費(fèi))

2006年初，dojo還是0.22的時(shí)候就很關(guān)注它的發(fā)展，可一直沒有在實(shí)際項(xiàng)目中使用。一來是由于文檔的缺少，而來是dojo的相關(guān)介紹總是讓人望而生畏。到現(xiàn)在都如此，第一個(gè)hello world就搞了一大堆東西，比如widget組件，自定義的script標(biāo)簽等，加上要引入什么css文件，djConfig、dojo.require等等，讓人很迷惑，這么復(fù)雜，到底dojo該怎么使用呢？我只是想把dojo當(dāng)作一個(gè)普通的js類庫，就像prototype那樣？OK，閑話少說，來看看如何使用dojo。 第一步，引入dojo.js dojo的發(fā)行包里有4個(gè)子目錄，要引入的文件是名叫"dojo"的子目錄里的dojo.js。 假設(shè)你是這樣的目錄結(jié)構(gòu): project | +-dojo-lib | | | +-dijit | +-dojo | +-dojox | +-util | +-dojo_hello_world.html <script type="text/javascript" src="./dojo-lib/dojo/dojo.js"></script>開始使用dojo 現(xiàn)在開始使用dojo的第一個(gè)函數(shù):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庫一樣，沒有任何玄機(jī)？ dojo.addOnLoad 現(xiàn)在我們想在window.onload里面處理一點(diǎn)東西，就像Ext.onReady，這個(gè)東西在dojo里叫做dojo.addOnLoad。dojo.addOnLoad(function() var username = dojo.byId('username').value alert(username););dojo.connect OK，window.onload搞定了，那么如何監(jiān)聽普通的dom事件呢？沒問題，強(qiáng)大的dojo.connect出場(chǎng)。<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時(shí)最煩的就是那個(gè)長長的bindAsListener了，使用dojo.conncect，可以在第三個(gè)參數(shù)中指定當(dāng)前的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);/注意這行的第三個(gè)和第四個(gè)參數(shù));OK，點(diǎn)擊按鈕，將輸出：Hello Karl。這里dojo.connect的第三個(gè)參數(shù)變成了scope，而handler函數(shù)是第四個(gè)，實(shí)際上dojo.connect(btn,"onclick",sayHello); 與dojo.connect(btn,"onclick",null,sayHello); 相同。 更加復(fù)雜的用法這里不作介紹，寫太多就越搞越復(fù)雜了，后面再寫文章詳細(xì)介紹dojo.connect，這里只簡(jiǎn)單介紹如何綁定DOM事件。xmlhttp dojo.xhrGet OK，介紹了簡(jiǎn)單的DOM操作方法，接下來該到Ajax的傳統(tǒng)項(xiàng)目-XmlHttp了。在使用xmlhttp時(shí)，需要注意到編碼的問題，要讓dojo默認(rèn)綁定為utf-8怎么辦呢？很簡(jiǎn)單，只需要修改一下引入dojo.js時(shí)的標(biāo)簽： <script type="text/javascript" src="./dojo-lib/dojo/dojo.js" djConfig="isDebug:true,bindEncoding:'UTF-8'"></script>多了一個(gè)djConfig屬性，很簡(jiǎn)單，第一個(gè)isDebug是說是否打開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",        load: function(responseText)                  alert(responseText);          dojo.byId("divHello").innerHTML = responseText;        ,        error: function(response)                  alert("Error");            );dojo.connect(btn,"onclick",sayHello);看看，夠不夠一目了然？ url 就是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ù)解析出來，要使用post方法？ 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)        /.);handleAs: "json-comment-filtered" 使用注釋符號(hào)/*/把json數(shù)據(jù)包含起來,推薦使用 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和object的轉(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è)臭名昭著的緩存問題，就這樣,preventCache會(huì)幫你自動(dòng)生成一個(gè)timestamp dojo.xhrGet(    url: "http:/localhost/hello/sayHello.jsp",    preventCache: true    /.);dojo.hitch scope/context 既然用到了xmlhttp，一個(gè)常見的問題就是回調(diào)函數(shù)的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表示當(dāng)前io參數(shù)                        /.        );    ,    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，基本的東西解決了，還有很多常用的函數(shù)沒有介紹，比如：dojo.query，dojo.forEach，dojo.marginBox，dojo.contentBox等等。這個(gè)就沒事翻翻dojo.js.uncompressed.js源代碼，dojo的文檔是沒啥好指望的了。面向?qū)ο?定義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有三個(gè)參數(shù): 第一個(gè) class名字；第二個(gè) 父類的引用 ；第三個(gè) . 構(gòu)造函數(shù)的名字就叫做"construnctor" 再來看看如何繼承dojo.declare("VIP",Customer,    getDiscount:function()        alert("Discount is 0.8");    );var vip = new VIP("Mark");vip.say();vip.getDiscount();使用this.inherited方法調(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;        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();/21將打印出兩條alert語句，先是父類的構(gòu)造函數(shù)，再是子類的。 2將輸出"name: 123" "age: 123" 。個(gè)人認(rèn)為，這個(gè)特性并不好，因?yàn)閖avascript這種弱類型的語言中，根本無法確定構(gòu)造函數(shù)中的參數(shù)是傳遞給誰的，就比如上面的語句執(zhí)行后，name="123",age="123"，那哪個(gè)才是正確的？這個(gè)問題在使用dojo Grid的model里就很麻煩，定義一個(gè)model得這樣:new dojox.grid._data.Table(null,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 說到繼承，多繼承的問題又來了。dojo支持多繼承，準(zhǔn)確地說，是mixin。還記得dojo.declare的第二個(gè)參數(shù)嗎，就是表示父類的那個(gè)參數(shù)，這個(gè)參數(shù)可以是一個(gè)數(shù)組，數(shù)組的第一個(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()        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í)例，一個(gè)是用于擴(kuò)展class，翻文檔和源碼吧。 package機(jī)制說完了dojo里的類繼承機(jī)制，不得不說說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放在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要自己編寫一個(gè)package怎么辦，那就利用dojo.provide。比如要寫在：project/dojo-lib/com/javaeye/fyting/Package1.js 那么在對(duì)應(yīng)的Package1.js中第一行需要這樣寫: dojo.provide("com.javaeye.fyting.Package1"); 類似java里的package聲明，是吧？dojo.registerModulePath 那要是我寫的js文件不想和dojo放在一起怎么辦呢，那就用registerModulePath。假設(shè)要放在： project/js/com/javaeye/fyting/Package2.js Package2.js和上面的Package1.js一樣的寫法，不需要作特殊變化，就這樣就行： dojo.provide("com.javaeye.fyting.Package2"); 在使用時(shí)，需要指名這個(gè)Package2.js所在的位置， dojo.registerModulePath("com","././js/com"); 只需要注意這里的相對(duì)路徑是相對(duì)dojo.js來的。我們假設(shè)所有以com.javaeye開頭的js都放在一起，而com.microsoft的放在另外的地方，為了防止沖突，可以這樣: dojo.registerModulePath("com.javaeye","././js/com/javaeye"); dojo.registerModulePath("com.microsoft","././javascript/com/microsoft"); 總得來說，package機(jī)制是開發(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原生地支持這些。