《dojo入門筆記(免費)》由會員分享，可在線閱讀，更多相關《dojo入門筆記(免費)（10頁珍藏版）》請在裝配圖網上搜索。
1、2006年初，dojo還是0.22的時候就很關注它的發(fā)展，可一直沒有在實際項目中使用。一來是由于文檔的缺少，而來是dojo的相關介紹總是讓人望而生畏。到現(xiàn)在都如此，第一個hello world就搞了一大堆東西，比如widget組件，自定義的script標簽等，加上要引入什么css文件，djConfig、dojo.require等等，讓人很迷惑，這么復雜，到底dojo該怎么使用呢？我只是想把dojo當作一個普通的js類庫，就像prototype那樣？OK，閑話少說，來看看如何使用dojo。 第一步，引入dojo.js dojo的發(fā)行包里有4個子目錄，要引入的文件是名叫dojo的子目錄里的dojo
2、.js。 假設你是這樣的目錄結構: project | +-dojo-lib | | | +-dijit | +-dojo | +-dojox | +-util | +-dojo_hello_world.html 開始使用dojo 現(xiàn)在開始使用dojo的第一個函數:dojo.byId ，dojo.byId就等同于常用的document.getElement 。 var username = dojo.byId(username).value alert(username); OK，是不是和普通的js庫一樣，沒有任何玄機？ dojo.addOnLoad 現(xiàn)在我們想在window.onload里面
3、處理一點東西，就像Ext.onReady，這個東西在dojo里叫做dojo.addOnLoad。dojo.addOnLoad(function()var username = dojo.byId(username).valuealert(username););dojo.connect OK，window.onload搞定了，那么如何監(jiān)聽普通的dom事件呢？沒問題，強大的dojo.connect出場。function sayHello(event)alert(Hello);dojo.addOnLoad(function()var btn = dojo.byId(hello);dojo.conn
4、ect(btn,onclick,sayHello););是不是和prototype的Event.observe($(btnAdd), load, doAdd)差不多? 用prototype時最煩的就是那個長長的bindAsListener了，使用dojo.conncect，可以在第三個參數中指定當前的scope：var name = Markfunction sayHello()alert(Hello + this.name);var obj = name: Karldojo.addOnLoad(function()var btn = dojo.byId(hello);dojo.connect
5、(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操作方法，接下
6、來該到Ajax的傳統(tǒng)項目-XmlHttp了。在使用xmlhttp時，需要注意到編碼的問題，要讓dojo默認綁定為utf-8怎么辦呢？很簡單，只需要修改一下引入dojo.js時的標簽： 多了一個djConfig屬性，很簡單，第一個isDebug是說是否打開FireBug的Console，第二個是xmlhttp使用的編碼。第二個才是重點，設置了就一勞永逸了。 這次我們要點擊了hello按鈕后發(fā)出一個xmlhttp請求: function sayHello() dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, handleAs: text,
7、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:1
8、05dojo.xhrGet( url: http:/localhost/hello/sayHello.jsp, content:params, /.);注意那個content參數，你要傳入的參數是個關聯(lián)數組/object，dojo會自動把參數解析出來，要使用post方法？ dojo.xhrGet - dojo.xhrPost ，其他的還有，dojo.xhrPut、dojo.xhrDelete。json那要是我想更換獲取到的數據類型，比如json？xml？修改handleAs即可，如： handleAs: json dojo.xhrGet( url: http:/localhost/hello/
9、sayHello.jsp, handleAs: json, load: function(json) alert(json.name) /.);handleAs: json-comment-filtered 使用注釋符號/*/把json數據包含起來,推薦使用 handleAs: json-comment-optional 首先嘗試使用json-comment-filtered,如果執(zhí)行錯誤,再使用普通的json格式解析 handleAs: javascript dojo嘗試把服務器返回的數據當作javascript執(zhí)行,并把結果作為參數傳遞給load函數 handleAs: xml xml對象
10、。注意在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下那個臭名昭著的
11、緩存問題，就這樣,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:Mark, execute1: function() dojo.
12、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: d
13、ojo.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(
14、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,Cust
15、omer, 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
16、,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()
17、;/21將打印出兩條alert語句，先是父類的構造函數，再是子類的。 2將輸出name: 123 age: 123 。個人認為，這個特性并不好，因為javascript這種弱類型的語言中，根本無法確定構造函數中的參數是傳遞給誰的，就比如上面的語句執(zhí)行后，name=123,age=123，那哪個才是正確的？這個問題在使用dojo Grid的model里就很麻煩，定義一個model得這樣:new dojox.grid._data.Table(null,null,data);我要是想擴展這個Model，更麻煩，所有子類的構造函數都被父類給搞亂了。所以推薦的做法是使用關聯(lián)數組作為構造函數的參數，就像P
18、ython里的關鍵字參數。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:f
19、unction() 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();/輸出H
20、ello MixinClass其他的比較有用的函數就是dojo.mixin和dojo.extend了，顧名思義，一個是作用于對象實例，一個是用于擴展class，翻文檔和源碼吧。 package機制說完了dojo里的類繼承機制，不得不說說package機制。 主要用到的有 dojo.require dojo.provide dojo.registerModulePath dojo.require dojo.require就是引入相應路徑文件下的js文件，現(xiàn)在已經有很多l(xiāng)ibrary這樣做了?，F(xiàn)在我們假設要用project/dojo-lib/dojo/string.js dojo中的頂層目錄就是d
21、ojo.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要自己
22、編寫一個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 P
23、ackage2.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機制是開發(fā)大型項目必須的，但是造成了調試困難，使用dojo.require引入js出錯時，根本不知道是什么原因，所以調試時最好手動引入js，dojo的test也是這么搞的。還有js框架中的各種實現(xiàn)類繼承的手法，也造成調試困難，dojo還隨地拋出個Error，又缺少java那樣的error statck，根本不知道錯誤根源在哪兒。所以，期待js原生地支持這些。
dojo入門筆記(免費)
