dojo Quick Start/dojo入門手冊--開始使用dojo.js

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");

}

 var btn = dojo.byId('hello');

 dojo.connect(btn,"onclick",sayHello);

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

本文轉自左正部落格園部落格，原文連結：http://www.cnblogs.com/soundcode/archive/2011/07/26/2117547.html，如需轉載請自行聯系原作者