Hello Dojo
作者：Sam Foster
譯者：ZhuXiaoWen
原文：
http://dojotoolkit.org/documentation/tutorials/1.6/hello_dojo/
歡迎使用Dojo!
在本教程中，我們將從最基礎的部分——一個簡單的
HTML
頁面開始。當本教程結束的時候，我們就已將
Dojo
載入到頁面中，並且開始使用一些核心函數了。為了給您提供更為豐富的學習體驗，我們還將簡單介紹
Dojo
的模組化架構，並討論如何載入相依模組。
難度：初學者
Dojo版本：
1.6
讓我們開始吧～
我們的起點是一個如下所示的簡單HTML
頁面。我們希望在這個頁面裡添加一些代碼來證明
Dojo
已經成功載入。
<!DOCTYPE html><br /><html><br /><head><br /> <meta charset="utf-8"><br /> <title>Tutorial: Hello Dojo!</title><br /> <!-- load Dojo --><br /> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script><br /></head><br /><body><br /> <h1 id="greeting">Hello</h1><br /></body><br /></html>
這很簡潔，不是嗎？我們在<head>
裡放了一個載入
Dojo
的
<script>
標籤（當然它也可以放在
<body>
的最後），其中的
src
屬性包含了
dojo.js
檔案所在的
URL
。
本教程中我們通過GoogleCDN
載入
Dojo
。如果你已經下載了一個
Dojo
的發布版，你就可以把這裡的
URL
改為
dojo.js
檔案在你自己伺服器上的位置。如果
URL
是正確的，那麼
Dojo
現在已經在後台安靜地載入好了。接下來我們需要找個地方放一些代碼，在一切都準備好的時候運行，這樣我們就能做些更有趣的事情了。
dojo.ready
由於牽涉到HTML
頁面和瀏覽器，要確定“萬事俱備”的時機可不容易。在我們自己的
JavaScript
代碼開始運行之前，首先
DOM
樹需要準備好以供操作，而且
Dojo
庫（以及聲明的任何相依模組）也需要全部載入完畢。因為“萬事俱備”這個概念在不同的瀏覽器裡是不同的，所以
Dojo
乾脆為此提供了一個非常可靠的、跨瀏覽器的函數——
dojo.ready
。我們給它傳一個函數作為參數，這個函數就會在“萬事俱備”的時候執行。
<!DOCTYPE html><br /><html><br /><head><br /> <meta charset="utf-8"><br /> <title>Tutorial: Hello Dojo!</title><br /> <!-- load Dojo --><br /> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script><br /> <script><br /> dojo.ready(function(){<br /> alert("Dojo version " + dojo.version + " is loaded");<br /> });<br /> </script><br /></head><br /><body><br /> <h1 id="greeting">Hello</h1><br /></body><br /></html>
我們傳給dojo.ready
的這個函數應該會在頁面載入好以後彈出一個
alert
對話方塊。必須承認，
Dojo
的
version
屬性（包含版本資訊）對於此類樣本程式非常有用。當我們以後更為深入地學習
Dojo
時，這樣的
alert
對話方塊就會變得越來越討厭了。於是我們就會想要學習往瀏覽器控制台列印日誌的方法。不過目前我們暫時略過。
能載入Dojo
的確不錯，但您一定更希望操作這個剛剛載入了
Dojo
的頁面。我們將會在其他教程中深入講解這方面的內容。而現在，我們只是簡單地擷取我們的
<h1>
元素的引用然後更新其內容。
<!DOCTYPE html><br /><html><br /><head><br /> <meta charset="utf-8"><br /> <title>Tutorial: Hello Dojo!</title><br /> <!-- load Dojo --><br /> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script><br /> <script><br /> dojo.ready(function(){<br /> dojo.byId("greeting").innerHTML += ", from " + dojo.version;<br /> });<br /> </script><br /></head><br /><body><br /> <h1 id="greeting">Hello</h1><br /></body><br /></html>
這次，在我們的“萬事俱備”函數裡使用了dojo.byId
來擷取
DOM
樹中含有給定
ID
的元素，然後給它的
innerHTML
屬性添加
Dojo
的版本資訊字串。
需要特別注意的是，您可以對dojo.ready
做任意次調用。您每一次傳入的這些函數會按照傳入順序依次執行。實際上，如果您有比較多的代碼，常見的做法是定義一個具名函數（非匿名函數）然後把函數名傳給
dojo.ready
：
function init() {<br /> alert("Dojo ready, version:" + dojo.version);<br /> // More initialization here<br />}<br />dojo.ready(init);
請注意，當我們傳入函數的時候，我們只是在傳函數名，而不包括其後的任何參數。
如果您是衝著Dojo
的
Hello World
來的，那麼本教程早已結束了。但之前我們曾提到過“聲明相依模組”——讓我們來聊聊這個吧。
模組
可見的東西往往只是冰山一角。Dojo.js
到底給您帶來了什嗎？
Dojo
是一個模組化的工具箱，它有一個“包系統”，能讓您只載入您在頁面中需要的代碼，並使得代碼之間的依賴管理變得非常簡單。缺乏語言層級的用於載入代碼的包系統（類似於
Java,PHP,Python
等語言中的
import
或
require
），是一個長久以來困擾
JavaScript
開發人員的問題。
Dojo
利用一種非常符合直覺的方法組織代碼，並提供了一個簡單的
API
（
dojo.require
）用於聲明對某個特定模組的依賴。
這一點對於目前的意義，就是當我們載入dojo.js
時，並沒有去載入整個
dojo
工具箱，而僅僅是一些基礎（
base
）模組。我們載入
Dojo
的
<script>
標籤實際載入的是一組核心功能，例如包系統、事件、
Ajax
、
DOM
工具函數、以及其他十分常用的功能。
試試一個酷模組
要是給<h1>
元素的
innerHTML
屬性賦值對您來說太不給力了，那就加點酷的吧！
Dojo的“
base
”部分已經包含了一個動畫架構，可用於實現各種絢麗的視覺效果。而且裡面也整合了幾個常見的特效（例如
dojo.fadeOut
（淡出）和
dojo.fadeIn
（淡入））。這很好，但不夠，我們希望那個問候元素能夠“滑”入頁面。為此，我們使用
dojo.fx.slideTo
。這個
dojo.fx
模組並沒有被包含在
dojo.js
中，因此我們需要載入它：
// 新代碼: 載入“dojo.fx”模組<br />dojo.require("dojo.fx");</p><p>// 記住，dojo.ready會等到DOM樹和所有依賴都可用時才被調用<br />Remember, dojo.ready waits for both the DOM and all dependencies<br />dojo.ready(function(){<br /> // 我們原有的代碼——改變innerHTML<br /> dojo.byId("greeting").innerHTML += ", from " + dojo.version;</p><p> // 現在，“滑入”問候語<br /> dojo.fx.slideTo({<br /> top: 100,<br /> left: 200,<br /> node: dojo.byId("greeting")<br /> }).play();<br />});
我們所需的“滑行”特效是dojo.fx
模組的一部分。
dojo.require
這行聲明了這個依賴關係，請求載入器在該模組不可用時載入它。這裡無需任何新的
<script>
標籤，而且更關鍵的是，我們其餘部分的初始化代碼完全無需更改——我們仍舊使用
dojo.ready
並且我們的代碼只有在
DOM
可用並且所有相依模組都載入完成時才會被執行。
剩下的部分就是使用我們載入的功能。與Dojo
中所有的屬性動畫一樣，我們傳入一個對象，它包含一個
DOM
結點引用，以及其他用於配置動畫的參數。我們將會在今後的教程中對
Dojo
動畫做更詳細的介紹。
結語
開始使用Dojo
工具箱就跟添加一個
<script>
標籤一樣簡單，但箱子裡有更為寬廣的天地，在您需要的時候，任由您的指尖來發掘。在本教程裡，我們已經在將
Dojo
用於您的網站或
Web
應用的道路上邁出了第一步。在本系列將來的教程中，我們將逐步探索Dojo的每一個主要功能群——從
DOM
工具函數到
Ajax
，動畫特效，事件，以及更多。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
