高見龍

iOS app/Ruby/Rails Developer & Instructor, 喜愛非主流的新玩具 :)

dojo toolkit入門(一)

image

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

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

步驟一:下載它

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

步驟二:安裝它

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

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

這樣就算完成安裝了..

除了這種方式外,也有不用下載整包回來的方法,就是使用別人家(CDN or Google)準備好的服務:

1. AOL的CDN(Content Delivery Network)

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>

2. Google Ajax Libraries API:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.1.1/dojo/dojo.xd.js"></script>

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

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

步驟三:使用它

在步驟二的地方,當你指定<script>src的時候,其實就已經使用了。先來試一下DOM selector跟onLoad事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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)上」,直接來看上面的例子:

1
2
3
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能做的事情還挺多,有心得再來繼續貼。

Comments