第 1 部分: Dojo 入門簡介

伴隨 Web 2.0, Ajax 和 RIA 的熱潮，各類 Ajax 開發工具包如雨後春筍般蓬勃發展，Dojo 正是這些工具包中的佼佼者。Dojo 爲富互聯網應用程序(RIA) 的開發提供了完整的端到端的解決方案，包括核心的 JavaScript 庫，簡單易用的小部件（Widget）系統和一個測試框架，此外，Dojo 的開源開發社區還在不停地爲它提供新的功能。

Ajax 資源中心

請訪問 Ajax 資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括不少文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這裏找到。

Dojo 是一個 JavaScript 實現的開源 DHTML 工具包。它是在幾個項目捐助基礎上創建起來的(nWidgets，f(m)，Burstlib) 。 Dojo 的最初目標是解決開發 DHTML 應用程序遇到的一些長期存在的歷史問題，如今，Dojo 已經成爲了開發 RIA 應用程序的利器：

• Dojo 讓您更容易地爲 Web 頁面添加動態能力，您也能夠在其它支持 JavaScript 的環境中使用 Dojo ；
• 利用 Dojo 提供的組件，您能夠提高 Web 應用程序的可用性和交互能力；
• Dojo 很大程度上屏蔽了瀏覽器之間的差別性，所以，您能夠不用擔憂 Web 頁面是否在某些瀏覽器中可用；
• 經過 Dojo 提供的工具，您還能夠爲代碼編寫命令行式的單元測試代碼。
• Dojo 的打包工具能夠幫助您優化 JavaScript 代碼，而且只生成部署應用程序所需的最小 Dojo 包集合。

接下來，咱們看看 Dojo 是如何組織這些功能組件的。

Dojo 體系架構

Dojo 的體系架構如圖１所示，整體上來看，Dojo 是一個分層的體系架構。最下面的一層是包系統，Dojo API 的結構與 Java 很相似，它把全部的 API 分紅不一樣的包（package），當您要使用某個 API 時，只需導入這個 API 所在的包。包系統上面一層是語言庫，這個語言庫裏包含一些語言工具 API，相似於 Java 的 util 包。再上一層是環境相關包，這個包的功能是處理跨瀏覽器的問題。

圖 1. Dojo 體系架構圖

Dojo 大部分代碼都位於應用程序支持庫，因爲過小限制，圖 1 中沒有列出全部的包。開發人員大部分時候都在調用這個層中的 API，好比，用 IO 包能夠進行 Ajax 調用。

最上面的一層是 Dojo 的 Widget 系統，Widget 指的是用戶界面中的一個元素，好比按鈕、進度條和樹等。 Dojo 的 Widget 基於 MVC 結構。它的視圖做爲一個 Template（模板）來進行存放，在 Template 中放置着 HTML 和 CSS 片斷，而控制器來對該 Template 中的元素進行操做。 Widget 不只支持自定義的樣式表，而且可以對內部元素的事件進行處理。用戶在頁面中只須要加入簡單的標籤就可使用。在這一層中，存在數百個功能強大的 Widget 方便用戶使用，包括表格、樹、菜單等。

經常使用包介紹

Dojo 1.1.1 提供了上百個包，這些包分別放入三個一級命名空間：Dojo，Dijit 和 DojoX 。其中 Dojo 是核心功能包 , Dijit 中存放的是 Dojo 全部的 Widget 組件，而 DojoX 則是一些擴展或試驗功能，DojoX 中的試驗功能在成熟以後有可能在後續版本中移入到 Dojo 或 Dijit 命名空間中。

因爲 Dojo 包種類繁多，下面只列舉了最經常使用的一些包及其功能，以方便讀者有個初步瞭解或供之後查閱。

包名	功能
dojo.io	不一樣的 IO 傳輸方式。 script、IFrame 等等；
dojo.dnd	拖放功能的輔助 API 。
dojo.string	這個包能夠對字符串進行以下的處理：修整、轉換爲大寫、編碼、esacpe、填充（pad）等等；
dojo.date	解析日期格式的有效助手；
dojo.event	事件驅動的 API，支持 AOP 開發，以及主題 / 隊列的功能；
dojo.back	用來撤銷用戶操做的棧管理器；
dojo.rpc	與後端服務（例如理解 JSON 語法的 Web 服務）進行通訊；
dojo.colors	顏色工具包；
dojo.data	Dojo 的統一數據訪問接口，能夠方便地讀取 XML、JSON 等不一樣格式的數據文件；
dojo.fx	基本動畫效果庫；
dojo.regexp	正則表達式處理函數庫；
dijit.forms	表單控件相關的 Widget 庫；
dijit.layout	頁面佈局 Widget 庫；
dijit.popup	這個包用於以彈出窗口方式使用 Widget ；
dojox.charting	用於在頁面上畫各類統計圖表的工具包；
dojox.collections	頗有用的集合數據結構（List、Query、Set、Stack、Dictionary...）；
dojox.encoding	實現加密功能的 API（Blowfish、MD五、Rijndael、SHA...）；
dojox.math	數學函數（曲線、點、矩陣）；
dojo.reflect	提供反射功能的函數庫；
dojox.storage	將數據保存在本地存儲中（例如，在瀏覽器中利用 Flash 的本地存儲來實現）；
dojox.xml	XML 解析工具包；

Dojo 的安裝

Dojo 的安裝不須要特別的環境和配置，只須要將 Dojo 包下載，解壓並將其放在本身喜歡的位置就能夠。

• 第一步，下載 Dojo 包。

  圖 2. Dojo 包的下載

  登錄 Dojo 官方網站的下載頁面（參見 參考資料），點擊其上如圖 2 中所示的「 Download Now 」按鈕。也能夠選擇點擊頁面右邊的「All releases 」，查看當前 Dojo 全部的版本，並嘗試下載使用。

• 第二步，解壓下載下來的軟件包，並將其放在合適的位置。

  在 Windows 環境下，可使用 WinRAR 將下載下來的 Dojo 包解壓。在 Linux 環境下，最好是下載後綴名爲 tar.gz 的包，可使用「tar -zxvf Dojo 壓縮包文件名」命令解壓 Dojo 包。

  若是隻是嘗試使用 Dojo，不須要牽涉到與服務器端的通訊，能夠將 Dojo 放在任何方便的位置。但最好這個位置能方便其測試頁面引用 Dojo 。好比假設測試頁面 test.html 的放置位置爲 D:\test\test.html，則 Dojo 包最好也放置爲 D:\test\dojo，以方便 test.html 引用 Dojo 。若是牽涉到 Dojo 在服務器端的放置，則 Dojo 最好放在對應服務器的 Web 根目錄下。好比假設目前 Appach 服務器的 Web 訪問目錄爲「/home/web/webapp/ 」, 則 Dojo 包最好直接放置於其下，以免出現跨域問題和方便服務器上的多個 Web 項目引用 Dojo 。

• 第三步，測試 Dojo 是否運行正常。

  圖 3. 檢測 Dojo 是否運行正常

  使用瀏覽器打開 dojo_path/dijit/themes/themeTester.html，若是頁面的運行效果如圖 3 所示，則說明 Dojo 運行正常。

須要說明的是 dojo_path 在本系列文章中有兩個不一樣的表明意義。

• 第一表示 Dojo 包在系統中所處的絕對位置。例如若是 Dojo 包中 dojo.js 文件在系統中的位置爲 D:\test\dojo\dojo\dojo.js，則此時 dojo_path 所表明的爲 D:\test\dojo。
• 第二表示頁面與 Dojo 包的相對位置。例如若是頁面的位置爲 D:\, 而 Dojo 包的位置爲 D:\test\ 。要在頁面中使用 Dojo，首先須要引入 Dojo，其實際引入的語句爲 <script type="text/javascript" src="dojo_path/dojo/dojo.js" djConfig="parseOnLoad:true" ></script> 。這裏的 dojo_path 表示的是頁面與 Doj 包的相對位置，所以其所表明的爲 ./test/ 。對於本系列後面章節的實例，將會出現不少使用 dojo_path 的狀況，若是要運行這些實例，請將其中的 dojo_path 替換爲真實狀況的值。

除了經過下載 Dojo 包來使用 Dojo 之外，Dojo 組織還提供了另一種方法來引入 Dojo 進行使用。若是不但願下載 Dojo 包而嘗試對 Dojo 的使用，能夠直接經過引入美國一個在線服務器主機上的 Dojo 來實現。與下載 Dojo 使用的不一樣點只是 dojo_path 應替換爲「http://o.aolcdn.com/dojo/1.0.0」。例如要引入 dojo.js 文件，則其實際引入語句爲：

<script 
    type="text/javascript" 
    src="//o.aolcdn.com/dojo/1.0.0/dojo/dojo.js" 
    djConfig="parseOnLoad: true">
</script>