首先,下載 Dojo 庫:http://www.dojotoolkit.org/downloads
放了方便測試,我將檔案將解壓到 Web Server 的 "js/dojotoolkit" 檔案夾中,如果你願意,也可以綴上版本號碼。最後的目錄結構應該像這樣:
明確 dojo.js 檔案的路徑非常重要。只要 dojo.js 能被正確裝入頁面,package system 會自動處理對相關模組的引用和依賴。
The Dojo Book,提供了大量的指南和教程,更深入的介紹了獲得各種 dojo 不同版本的方式。
也可以從 Google 的公用庫引入指令碼,如下:http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js
基本架構
下面是一個 dojo 程式的基本架構:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit Test Page</title>
<!-- 裝入Dojo 基本庫 -->
<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true">
</script>
<script type="text/javascript">
/* 其他的指令碼程式 */
</script>
<style type="text/css">
/* 樣式表在這 */
</style>
</head>
<body><!-- 頁面內容 -->
<h1 id="testHeading">Dojo 基本架構</h1>
<div id="contentNode">
<p>一些內容</p>
</div>
</body>
</html>
配置 Dojo 啟動參數
dojo在裝入時應該進行參數配置,兩個最重要的參數是 parseOnLoad 和 isDebug 。第一個參數確定是否在頁面裝入時解析 dojo 組件和內建標籤;第二參數開啟或關閉調試資訊。有兩種配置方式:
第一種方式在 <script> 標籤中配置,如下:
<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true">
</script>
第二種方式在 dojo.js 裝入之前,建立一個全域變數 djConfig,如下:
<script type="text/javascript">
var djConfig = {
isDebug:true,
parseOnLoad:true
};
</script>
<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"></script>
兩種方式有同樣的效果。
如何開始?
由於各種版本的瀏覽器對頁面裝入 "ready" 狀態有不同的定義,所以 Dojo 提供了一個 dojo.addOnLoad 函數,程式從這裡面開始,如下代碼:
// 某個函數
var init = function(){
console.log("I run after the page is ready.");
};
//ready 後運行上面的函數
dojo.addOnLoad(init);
// 這是另一種形式,用匿名函數
dojo.addOnLoad(function(){
console.log("I also run, but second. ");
});
重要提示:不要用 <body onLoad="someFunc"> 和 window.onload=someFunc 開始你的函數,而應該使用 dojo.addOnLoad(someFunc)
更多
通過 dojo.require() 函數,package system 會自動裝入所有你需要的代碼。下面的例子將裝入一個 Button 和一個 TitlePane,系統會自動找到他們的代碼,如下:
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.addOnLoad(function(){
dojo.byId("testHeading").innerHTML = "We're on our way!";
console.log("onLoad fires after require() is done");
});
每個模組都有自己的 dojo.require() 參數,你可以從 Dijit API pages 找到他們
繼續
在上面的dojo.byId() 函數,通過 id 來選擇元素,並改變了元素的 innerHTML 值。後面我們將瞭解選取器。
將上面的代碼放到架構中的“其他指令碼程式”位置處,然後運行,如果你看到了: "We're on our way",恭喜!
如果出現了錯誤,可以從 FAQ 尋找常見的錯誤資訊。