Burn Net--燒網

英文版:http://manual.dojotoolkit.org/WikiHome/DojoDotBook
翻譯: Burnet

譯者序:隨著web2.0的熱潮,google,yahoo等各大web供應商爭先恐后的退出自己的ajax開發包,意圖爭奪ajax標準.究竟鹿死誰手?有人看好Yui,有人喜歡GWT,還有人對這些都嗤之以鼻,認為自己寫javascript才是王道.

好了,誰優誰劣暫放一邊,現在我要給大家的是由IBM研發的dojo開發工具(toolkit)的開發首冊,由我來翻譯.

最后說一句題外話,本人出國已久,雖然平時經常上CSDN之類的論壇,但是對中文術語還不是非常精通,所以有的時候翻譯一些術語的時候不太準確,我 會把那些我拿不準的術語在后面標注上英文,還有本書作者風格比較幽默，有些不能直譯中文，也沒有必要翻譯，我會盡我所能，目的是讓大家能掌握Dojo。

?

做人要厚道，轉載請著名專自Burnet's Blog

---

介紹：

這里將給你對于dojo的啟蒙課程。你可能會跟自己說"這段可以跳過了，因為我已經很了解javascript并且對網站開發很了解了。“不過這里有個機會讓你認識到其實你的知識并不是那么扎實，還有很多基礎的東西需要學習。

當 我們給人們介紹dojo的時候，遇到了兩種難題。有些用戶已經使用DHTML很久，并且對javascript有了很深的理解，他們清楚 javascript能作什么，不能做什么，在腦海里存在定型思維，有些時候，更難讓這些人明白dojo。第二種難題就是對于那些新手，他們太缺乏經驗和 對javascript的了解了。

我鼓勵這兩種朋友都讀一下介紹內容，甚至你可以不全看。

什么是Dojo？

其實總結Dojo到底是什么是非常困難的。我說總結Dojo是很困難的，是因為Dojo是一個可擴展的代碼集合 （expandable collection of code)。擴展不只是來自于眾多開發者，并且你會發現你可以根據你自己的需要擴展自己的一套東西。就是說，你把目光放在Dojo身上的原因是因為 Dojo可以和javascript取長補短。

在開發客戶端（client－side development）總共有3個主要部分：events，重復使用DHTML blocks，客戶端和服務器傳遞信息。Dojo在這三方面都很在行，并且使他們變的很容易。

歷史

譯者注：歷史我是真不想翻譯了，如果有人很感興趣的話，可以給我留言，我有時間會翻譯的。

。。。。。。。。。。。。

什么是工具（Toolkit）?

很多人認為結構（framework），庫（library），工具是同一個意思。但是弄清楚它們之間的區別，對于以后的理解很有幫助。

Framework

在軟件開發中，為了讓其他的項目可以分享和合作，通常定義一個結構（framework）。一個結構通常包含支持程序（support programs），庫和一個腳本程序。你可能認識到Dojo就是framework的一個部分，但并不是framework的本身。

Library

庫文件定義了很多可以引用的方法（function），它們是在任何位置都可以運行的，并不是我們平常自己在程序中定義的方法。看了這些，你可能會說“嘿！dojo就是庫的集合！”。你應該是對的，但是，dojo比一個庫的集合要包含得多很多。

Toolkit

看 過前文，你可能還在琢磨到底dojo是作什么的。很明顯，他不是一個結構（framework），它是一個工具（toolkit）或者是一個庫？最后讓我 來解答一下，通常庫都是之前定義好的，你可以引用到你的程序中并使用它們，但是在dojo中，我們在這個庫外面加了一層封包系統。這樣就使它跟一般的庫有 些不一樣。

在這個系統中，我們把庫分成很多部分。有核心方法（core functions），還有很多其他不常用的子庫（sub library）。這就使你使用dojo的時候感覺它很簡潔。下面會有更具體的分析，會讓你更加明白dojo。

Dojo會給你什么

曾經，Netscape盛行一時，大部分人都在使用，所以當時Netscape給出了一個網站制作的標準。好景不長，后來出現了微軟的IE，IE當時強過Netscape，成為了新的標準。但是這個標準跟W3C有一定的差別，所以在人們制作網站時，開始向IE新標準靠攏。

很多年過去了，IE依舊不敗，而且并沒有更新很多。一樣多的bug，缺少標準化。慢慢的網蟲們開始使用firefox，opera，safari，它們為了跟上W3C的標準，所以更新得很快。

很多同樣的功能，但是對于不同的瀏覽器需要寫不同的代碼，這對我們來說意味著什么？意味著我們要做出一個完美的網站是很苦難的。這時一個程序員會去做什么呢？

知識補充

如果光使用靜態html制作網站，當然不會出現上面的問題，但是這也意味這網站不可能具有交互性，最多的也只是提供一個表單（form）讓用戶提交，然后再返回一個新的頁面顯示數據。

Javascript的出現正是為了解決這些難題。

解決所有問題

Dojo不僅是存在于抽象層，并且也是獨立存在的。不只是提供一些庫，一些方法，一些功能，而且讓的代碼更加簡潔，保證你的代碼只包含所需要的部分。

Dojo會讓你的生活更加簡單，因為他替你鏈接了很多東西，把你的復雜項目分成一些小問題，讓你的代碼更簡潔，更有效率，并且可以更好的重復使用。

---

第一章：開始使用Dojo

Dojo有很多版本，你可以一下子不知道該選擇哪個，這里可以讓你放心，無論你使用的是什么版本，本書中的例子你都可以運行。

下載Dojo

（譯者注：這個是我使用的版本，zip文件，你也可以自己到Dojoa主頁進行下載。）

Dojo模塊（Modules）

Dojo的庫定義使用了模塊，就像JAVA一樣。這樣可以讓你只引用自己需要的部分，而不是全部，保證了瀏覽速度。

例如Dojo的event包定義在模塊dojo.event中。

（譯者注：此部分原著甚是啰嗦，我給精簡了一下，有興趣的朋友可以參見原文。）

引用模塊格式：

dojo.require("dojo.module[.sub module]");

例如我們想引用lite effects systems，

dojo.require("dojo.lfx");

這會引入所有lfx下的子模塊，當然你也可以使用dojo.lfx.*，如果想單獨引用lfx下的toggle模塊：

dojo.require("dojo.lfx.toggle");

Widgets

什么是widget呢？一個按鈕 ，一個圖片，這都是widget，最常見的html widget有鏈接，按鈕，輸入框。

使用Dojo可以改變widget ，例如在日期輸入框旁邊加上一個彩色日歷，讓用戶可以選擇日期，與此同時Dojo并不會破壞你原始的輸入框，因為Dojo是擴展了你的html而不是替換了它。

使用widget的優勢主要三點：

• 跨平臺：使用Dojo widget，無論使用任何瀏覽器，都會準確的得到正確效果。
• 自動退化：一些老瀏覽器可能對javascript支持并不是那么完美，Dojo也可以讓它們顯示出正確的內容，例如前面彩色日歷的例子，如果瀏覽器不支持，那么Dojo會自動將日歷退化到一個簡單的選擇框，或者其他（根據不同widget而定）。
• 擴展性：你可以利用Dojo提供的widget創造出新的widget，在這個過程中你并不需要從庫中復制任何代碼或者修改庫中的代碼。

如何使用Widget

Widget有很多使用方法。Widget會搜索整個網頁框架，然后自動把應該添加的內容加入到當中。

下面是個簡單的例子，我們也可以看出WIdget是怎樣自動退化的，因為我們并沒有給ComboBox定義選擇項，而只是一個value，而且所以最后顯示出來的只象是一個簡單的inputbox，如果用戶禁用了javascript，顯示結果也會一樣。

<input dojoType="ComboBox" value="default" dataUrl="comboBoxData.js">

但是如果我們只想使用W3C標準（譯者注：沒有那些額外的tag，例如dojoType），我們可以用下面的方法。

<input class="dojo-ComboBox?" value="default" dataUrl="comboBoxData.js">

<dojo:ComboBox? value="default" dataUrl="comboBoxData.js">

你可能注意到了dataUrl，他的作用是把comboBoxData.js中的內容加到comboBox中，但是現在comboBoxData.js中沒用任何內容。（譯者注：當然你可以隨意改變dataUrl的內容，名字不是固定的。）

下面是一個select的例子：

<select dojoType="combobox">
<option value="foo">foo</option>
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="thud">thud</option>
</select>

從上面的例子中，你知道了很多事情，但卻好像沒什么用處，這里只是想告訴你其實dojo并沒有那么復雜。

后退和前進

動態網頁程序（dynamic web application）避免了頻繁的刷新頁面，不過通常也帶來后退和前進按鈕會失去作用。更多的，有的時候，用戶可能很難把網頁加入收藏夾。

Dojo提供了一個解決辦法，讓網頁程序處理瀏覽器的后退和前進，并且提供給瀏覽器一個唯一的地址。這個解決辦法就是使用dojo.undo.browser。

使用dojo.undo.browser

在dojo 0.2.2版本中，并沒有dojo.undo.browser，這是在0.3以后的版本中才加入的。

首先，需要使用dojo.undo.browser.setInitialStae(state)設定當瀏覽器第一次載入網頁的狀態。

理論

動 態網頁程序會調用XMLHTTPRequest和DOM來更新網頁內容而避免了刷新，更新瀏覽歷史，并且也不會改變瀏覽器的地址欄。這就意味著當用戶點擊 了后退按鈕，整個網頁程序丟失了當前運行的狀態（state）。而且即使用戶想把當前的網頁內容加入收藏夾，也是不可能的，因為收藏夾不會記錄網頁程序運 行的狀態，而只會簡單的記錄下網頁程序的地址（URL）。

開發者可以使用dojo.undo.browser包得到用戶點擊后退和前進的事件（event），然后根據這些事件來更新頁面內容。 dojo.undo.browser通過使用一個隱藏的表單（hidden IFRAME）或者一個唯一的標簽（fragment identifier）傳遞瀏覽的歷史記錄。（譯者注：可以想像成一個cookie或者一個session，但是這個session信息是存儲在hidden IFRAME或者標簽中） 例如：

http://some.domain.com/my/path/to/page.html#fragmentIdentifier

（譯者注：#fragmentIdentifier就是標簽記錄）

因為當改變標簽的時候并不會使網頁刷新，所以非常適合記錄當前網頁程序的狀態。當然開發者可以自定義一個更容易讀懂的標簽，并且使用戶可以把它加入收藏夾。

dojo.undo.browser允許開發者創建一個相對于運行狀態的對象（state object），這個對象會得到回叫（callback）當用戶點擊后退或者前進按鈕。

開發

下面是使用dojo.undo.browser之前必須作的一些事情：

1：在djConfig中設置preventBackButtonFix: false。這樣保證了隱藏的表單（hidden IFRAME）將會添加到頁面當中，如果不加入這段，dojo.undo.browser不會正常工作。

譯者注：設置方法就是在header中加入如下代碼：

<script language="JavaScript" type="text/javascript">
djConfig = { isDebug: true, preventBackButtonFix: false };
</script>

2: 加入dojo.require("dojo.undo.browser");

設定網頁程序的初始狀態：

dojo.undo.browser.setInitialState(state);

當用戶每次點擊前進或者后退，state對象都會被調用。

然后我們需要給state對象創建幾個方法（function）

• 得到后退提示：back（），backButtion（）或者handle（type），type可以是“back”或者是“forward”。
• 得到前進提示：forward（），forwardButton（）或者handle(type），type如上。

下面是個簡單的例子：

var state = {
back: function() { alert("Back was clicked!"); },
forward: function() { alert("Forward was clicked!"); }
};

注冊一個state對象使用下面的方法：

dojo.undo.browser.addToHistory(state);

如 果向改變瀏覽器的地址（URL），引用state對象的changeUrl屬性。如果changeUrl是true，dojo.undo.browser 就將產生一個唯一的標簽，如果changeUrl被定義為任何其他的值（不包括undefined，null，0和空string），那么這個值就會被使 用為標簽。這樣用戶就可以把當前頁加入收藏夾了。

提示

• 如果你要使用changeUrl，即使你不設定自己的標簽，也至少定義為true。
• 如果你要在本機測試，不要使用IE。因為當IE訪問本地文件時不會創建歷史列表ifram_history.html。請把網頁上傳到服務器上測試。
• Safari2.0.3+：只有后退按鈕可以正常工作，并且只有當changeUrl沒用使用的時候。
• Opera 8.5.3：不會正常運行。

這里有一個網上的例子：

http://archive.dojotoolkit.org/nightly/tests/undo/test_browser.html

發布Dojo

譯者注：此部分的英文版還沒有完成，所以暫不翻譯了，以后一定會補上。

6月27日更新：

I/O

dojo.io.blind介紹

在我們制作dojo的時候，目的是讓用戶和開發者都能享受到DHTML程序。在很多朋友的支持下，特別是Aaron Boodman和Mark Anderson，我們已經找到了解決可用性的方法。我們提供了一個單獨的易用的API和一個包裝類，這個類只需要兩個文件。dojo.io包提供了對XMLHTTP和一些其他更復雜的傳輸結構的支持。

在dojo.io 包中我們一般最常使用的是dojo.io.bind()方法。dojo.io.blind()是一個標準的異步的請求API，它包含了各種傳輸層 （transport layers），包括queues of iFrames,XMLHTTP,mod_pubsub,LivePage等等。Dojo會試圖為當前的請求選擇最合適的傳輸方法，因為在做網站時一般不 會使用到其他傳輸，所以我們只用到XMLHTTP。dojo接受一個匿名的類，但是在知道這個類的屬性的情況下，把它作為方法參數（function argument）。下面的代碼是創建一個請求（request），這個請求會從URL返回原始的字符串。

這就是全部，你提供了一個數據地址，還有一個當你得到返回值時要執行的function。但是如果在請求過程中出錯了怎么辦呢？我們再來創建一個register來解決：


同樣也可以只創建一個單獨的handler來解決：

下面的代碼提交一段javascript程序段，然后讓服務器運行它，一般我們這么做是為了加速程序運行，注意mimetype：

如果你想確保程序使用XMLHTTP，可以這樣寫：
Being a jack-of-all-trades, bind() also supports the submission of forms via a request (with the single caveat that it won't do file upload over XMLHTTP):
作為一個jack-of-all-trades（萬事通），bind()同樣支持來自于表單提交的數據。
以上只是一些最基本的，其實這些可以不用全部由開發者自定義。

RPC
你可以看到，Dojo通過dojo.io.bind提供了簡單，強大的方法使用多種多樣的I/O functions。但是在開發過程中，程序員會調用很多很多I/O，這同時會給服務器和客戶端加重負擔。Dojo的RPC服務就是為了減少負擔，易用，精簡代碼而生的。

RPC 的全名是Remote Procedre Calls,或者Remote Method Invocation,（譯者：遠程method調用）。最基本的，RPC允許開發者調用在遠程服務器上的方法（method）。Dojo不僅提供了基本 的RPC client包，而且還擴展了它，使它支持JSON-RPC服務和YAHOO服務。同時你也可以自己寫出相對于其他服務的類。

我們假定有一個需要調用服務器端程序的小程序，假設要調用add(x,y)和subtract(x,y)。在沒有特殊情況的條件下，我們的客戶端會這樣寫：


你 看，這不是很難。但是無論是我們讓服務器運行add和subtract還是讓客戶端自己計算，這只是一個非常簡單的程序。如果我們要調用在服務器上30個 不同method會怎么樣呢？我猜我們可能要重復的寫幾乎一樣的代碼一遍又一遍，每次都要創建一個請求類（request object),設定URL，設定變量等等。這不僅容易出錯，而且還很枯燥。
Dojo的RPC客戶端簡化了這個過程：
以上就是對于服務器的定義。一旦定義創建完畢，其他的事情就簡單了，我們還可以創建一個類：
要使用服務器的方法：

我 敢打賭你會在想“我不是只調用方法就夠了，我還有得到計算的結果。”你是對的，但這也是非常容易的。服務器端的myObject.add()會返回一個延 緩類（deferred object）。Twisted Python用戶可能對延緩類（deferred object）很熟悉，延緩類（deferred object）允許開發者根據返回數據的類型附加一個或更多的回叫（callbacks）和錯誤處理（errbacks）。這里有一個簡單的例子：

我 們把mycallbackmethod作為回叫添加到我們的延緩類mydeferred。這時，8會被傳遞進mycallbackmethod。另一方 面，我們也可以添加一個errback method來處理服務器返回的出錯信息。我們隨意添加回叫方法（callback），多少都可以，它們會按照我們定義的順序被調用。

以上的例子都是圍繞dojo.rpc.JsonService展開的。我們還可以使用dojo.rpc.YahooService，規范和結構都是一樣的。這兩個類都是繼承了dojo.rpc.RpcService。要創建自己的類會在第二章中詳細介紹。

---

暫時翻譯到第一章，這章只給我們了一個基本的概念，其實英文版的dojo book也不是很完善，還缺少很多內容，最近幾天我會把剩下的2章翻譯出來，在翻譯中我將會加入一些自己的思想，希望能給大家更明確的表達。

這是我第一翻譯，有什么錯別字，表達不明確還希望理解。

如果有什么意見或者建議，請留言，謝謝！

做人要厚道，轉載請著名專自Burnet's Blog。