dojo toolkit入門(一)

来源：互联网发布：sql server端口编辑：程序博客网时间：2024/05/01 21:08

Dojo 雖然我個人還是比較喜歡jQuery的簡潔方便，而且一些常用的function也都jQuery化了，不過畢竟Dojo從Zend Framework 1.6版後就被officially的收進去了，為了ZF寫起來的完整性，還是花點時間來研究一下。

廢話不多說，先來試玩一下!

到dojo toolkit的網站即可下載(不過其實也可以不用下載...請見步驟二)

基本上，下載壓縮檔回來後，解壓縮後放在你的網頁的目錄(放哪裡都可，只要你能找得到就好)
假設我放在js/dojo底下，接下來只要一行：

這樣就算完成安裝了..

除了這種方式外，也有不用下載整包回來的方法，就是使用別人家(CDN or Google)準備好的服務：
1. AOL的CDN(Content Delivery Network)：

2. Google Ajax Libraries API：

註：Google上還有host別的Ajax library(如jQuery、MooTools..等)，詳情請洽Google Ajax Libraries API。

使用線上版跟本機版各有優缺點，線上版的好處就是省頻寬，畢竟dojo整包檔案解開壓縮也不小，有十幾MB，若能使用像Google這種又快又穩定的主機頻寬來host，多少也是可以省一些的；當然缺點就是畢竟是別人家免費提供的服務，萬一有什麼"萬一"的話，可能會導致全站的功能都出問題。而本機版的優缺點就剛好跟線上版的相反(個人比較偏好本機版安裝法)。

在步驟二的地方，當你指定<script>的src的時候，其實就已經使用了...

先來試一下DOM selector跟onLoad事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dojo Test</title>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
    dojo.byId("test1").innerHTML = "Hello, Dojo";
    dojo.connect(dojo.byId("btn1"), "onclick", function(evt){
      alert("Hello again, Dojo!");
    })
});
</script>
</head>
<body>
<div id="test1"></div>
<input type="button" value="clickme!" id="btn1" />
</body>
</html>

線上測試

簡單的說明上面用到的幾個功能：

1. dojo.addOnLoad
就是在頁面讀取完成之後會做的事，有點像一般的onLoad功能，不過順序在它之後。

2. dojo.byId("test1")
這將會回傳在頁面裡面叫id叫做"test1"的元素(在上面這裡是一個div)，功能有點像原來的document.getElementById()。再透過設定這個回傳回來的物件的innerHTML的值，就可以直接讓這個Div區塊裡面的值有變化。

3. dojo.connect()
這個比較有趣，這個function可以傳入四個參數
第一個是參數是物件
第二個參數是事件(字串)
第三個參數也是物件(可省略)
第四個參數是要綁的事件(字串)，可以另外在別的地方定義好function再掛上來，也可以像上例一樣直接給它一個anonymous function
簡單的說，dojo.connect()可以翻譯成「把某個事件(或function)，綁到某個物件的某個事件(或function)上」，直接來看上面的例子：

dojo.connect(dojo.byId("btn1"), "onclick", function(evt){
alert("Hello again, Dojo!");
})

以上例來翻譯成白話文就是說
「我把一個anonymous function，綁到id為btn1的那個按鈕的onclick事件上」，所以，當觸發這個按鈕的onclick事件(也就是點擊它)，就會跟著觸動這個function，丟出"Hello again, Dojo!"的字樣出來。

這部份的細節可再參考Dojo的線上手冊

目前國內用dojo的人看起似乎並不多，日前去書局弄了一本Dojo-The Definitive Guide，仍在研究中，看來這個Dojo能做的事情還挺多，有心得再來繼續貼。

步驟三：使用它

步驟二：安裝它

步驟一：下載它