2006年初，dojo還是0.22的時候就很關注它的發展，可一直沒有在實際項目中使用。一來是由于文檔的缺少，而來是dojo的相關介紹總是讓人望而生畏。

到現在都如此，第一個hello world就搞了一大堆東西，比如widget組件，自定義的script標簽等，加上要引入什么css文件，djConfig、dojo.require等等，讓人很迷惑，這么復雜，到底dojo該怎么使用呢？

我只是想把dojo當作一個普通的js類庫，就像prototype那樣？OK，閑話少說，來看看如何使用dojo。

第一步，引入dojo.js

dojo的發行包里有4個子目錄，要引入的文件是名叫"dojo"的子目錄里的dojo.js。 假設你是這樣的目錄結構:

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

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

開始使用dojo

現在開始使用dojo的第一個函數: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庫一樣，沒有任何玄機？

dojo.addOnLoad

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

dojo.addOnLoad(function(){ var username = dojo.byId('username').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('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：

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事件。

總結

以上是生活随笔為你收集整理的dojo Quick Start/dojo入门手册开始使用dojo.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。