介紹：
這里將給你對(duì)于dojo的啟蒙課程。你可能會(huì)跟自己說"這段可以跳過了，因?yàn)槲乙呀?jīng)很了解javascript并且對(duì)網(wǎng)站開發(fā)很了解了?！安贿^這里有個(gè)機(jī)會(huì)讓你認(rèn)識(shí)到其實(shí)你的知識(shí)并不是那么扎實(shí)，還有很多基礎(chǔ)的東西需要學(xué)習(xí)。

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

我鼓勵(lì)這兩種朋友都讀一下介紹內(nèi)容，甚至你可以不全看。

什么是Dojo？

其實(shí)總結(jié)Dojo到底是什么是非常困難的。我說總結(jié)Dojo是很困難的，是因?yàn)镈ojo是一個(gè)可擴(kuò)展的代碼集合 （expandable collection of code)。擴(kuò)展不只是來自于眾多開發(fā)者，并且你會(huì)發(fā)現(xiàn)你可以根據(jù)你自己的需要擴(kuò)展自己的一套東西。就是說，你把目光放在Dojo身上的原因是因?yàn)?Dojo可以和javascript取長(zhǎng)補(bǔ)短。

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

歷史

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

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

什么是工具（Toolkit）?

很多人認(rèn)為結(jié)構(gòu)（framework），庫(kù)（library），工具是同一個(gè)意思。但是弄清楚它們之間的區(qū)別，對(duì)于以后的理解很有幫助。

Framework

在軟件開發(fā)中，為了讓其他的項(xiàng)目可以分享和合作，通常定義一個(gè)結(jié)構(gòu)（framework）。一個(gè)結(jié)構(gòu)通常包含支持程序（support programs），庫(kù)和一個(gè)腳本程序。你可能認(rèn)識(shí)到Dojo就是framework的一個(gè)部分，但并不是framework的本身。

Library

庫(kù)文件定義了很多可以引用的方法（function），它們是在任何位置都可以運(yùn)行的，并不是我們平常自己在程序中定義的方法?？戳诉@些，你可能會(huì)說“嘿！dojo就是庫(kù)的集合！”。你應(yīng)該是對(duì)的，但是，dojo比一個(gè)庫(kù)的集合要包含得多很多。

Toolkit

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

在這個(gè)系統(tǒng)中，我們把庫(kù)分成很多部分。有核心方法（core functions），還有很多其他不常用的子庫(kù)（sub library）。這就使你使用dojo的時(shí)候感覺它很簡(jiǎn)潔。下面會(huì)有更具體的分析，會(huì)讓你更加明白dojo。

Dojo會(huì)給你什么

曾經(jīng)，Netscape盛行一時(shí)，大部分人都在使用，所以當(dāng)時(shí)Netscape給出了一個(gè)網(wǎng)站制作的標(biāo)準(zhǔn)。好景不長(zhǎng)，后來出現(xiàn)了微軟的IE，IE當(dāng)時(shí)強(qiáng)過Netscape，成為了新的標(biāo)準(zhǔn)。但是這個(gè)標(biāo)準(zhǔn)跟W3C有一定的差別，所以在人們制作網(wǎng)站時(shí)，開始向IE新標(biāo)準(zhǔn)靠攏。

很多年過去了，IE依舊不敗，而且并沒有更新很多。一樣多的bug，缺少標(biāo)準(zhǔn)化。慢慢的網(wǎng)蟲們開始使用firefox，opera，safari，它們?yōu)榱烁蟇3C的標(biāo)準(zhǔn)，所以更新得很快。

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

知識(shí)補(bǔ)充

如果光使用靜態(tài)html制作網(wǎng)站，當(dāng)然不會(huì)出現(xiàn)上面的問題，但是這也意味這網(wǎng)站不可能具有交互性，最多的也只是提供一個(gè)表單（form）讓用戶提交，然后再返回一個(gè)新的頁(yè)面顯示數(shù)據(jù)。

Javascript的出現(xiàn)正是為了解決這些難題。

解決所有問題

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

Dojo會(huì)讓你的生活更加簡(jiǎn)單，因?yàn)樗婺沔溄恿撕芏鄸|西，把你的復(fù)雜項(xiàng)目分成一些小問題，讓你的代碼更簡(jiǎn)潔，更有效率，并且可以更好的重復(fù)使用。

第一章：開始使用Dojo

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

下載Dojo

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

Dojo模塊（Modules）

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

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

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

引用模塊格式：

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

例如我們想引用lite effects systems，

dojo.require("dojo.lfx");

這會(huì)引入所有l(wèi)fx下的子模塊，當(dāng)然你也可以使用dojo.lfx.*，如果想單獨(dú)引用lfx下的toggle模塊：

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

Widgets

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

使用Dojo可以改變widget ，例如在日期輸入框旁邊加上一個(gè)彩色日歷，讓用戶可以選擇日期，與此同時(shí)Dojo并不會(huì)破壞你原始的輸入框，因?yàn)镈ojo是擴(kuò)展了你的html而不是替換了它。

使用widget的優(yōu)勢(shì)主要三點(diǎn)：
跨平臺(tái)：使用Dojo widget，無論使用任何瀏覽器，都會(huì)準(zhǔn)確的得到正確效果。
自動(dòng)退化：一些老瀏覽器可能對(duì)javascript支持并不是那么完美，Dojo也可以讓它們顯示出正確的內(nèi)容，例如前面彩色日歷的例子，如果瀏覽器不支持，那么Dojo會(huì)自動(dòng)將日歷退化到一個(gè)簡(jiǎn)單的選擇框，或者其他（根據(jù)不同widget而定）。
擴(kuò)展性：你可以利用Dojo提供的widget創(chuàng)造出新的widget，在這個(gè)過程中你并不需要從庫(kù)中復(fù)制任何代碼或者修改庫(kù)中的代碼。

如何使用Widget

Widget有很多使用方法。Widget會(huì)搜索整個(gè)網(wǎng)頁(yè)框架，然后自動(dòng)把應(yīng)該添加的內(nèi)容加入到當(dāng)中。

下面是個(gè)簡(jiǎn)單的例子，我們也可以看出WIdget是怎樣自動(dòng)退化的，因?yàn)槲覀儾]有給ComboBox定義選擇項(xiàng)，而只是一個(gè)value，而且所以最后顯示出來的只象是一個(gè)簡(jiǎn)單的inputbox，如果用戶禁用了javascript，顯示結(jié)果也會(huì)一樣。

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

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

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

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

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

下面是一個(gè)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>

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

后退和前進(jìn)

動(dòng)態(tài)網(wǎng)頁(yè)程序（dynamic web application）避免了頻繁的刷新頁(yè)面，不過通常也帶來后退和前進(jìn)按鈕會(huì)失去作用。更多的，有的時(shí)候，用戶可能很難把網(wǎng)頁(yè)加入收藏夾。

Dojo提供了一個(gè)解決辦法，讓網(wǎng)頁(yè)程序處理瀏覽器的后退和前進(jìn)，并且提供給瀏覽器一個(gè)唯一的地址。這個(gè)解決辦法就是使用dojo.undo.browser。

使用dojo.undo.browser

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

首先，需要使用dojo.undo.browser.setInitialStae(state)設(shè)定當(dāng)瀏覽器第一次載入網(wǎng)頁(yè)的狀態(tài)。

理論

動(dòng) 態(tài)網(wǎng)頁(yè)程序會(huì)調(diào)用XMLHTTPRequest和DOM來更新網(wǎng)頁(yè)內(nèi)容而避免了刷新，更新瀏覽歷史，并且也不會(huì)改變?yōu)g覽器的地址欄。這就意味著當(dāng)用戶點(diǎn)擊 了后退按鈕，整個(gè)網(wǎng)頁(yè)程序丟失了當(dāng)前運(yùn)行的狀態(tài)（state）。而且即使用戶想把當(dāng)前的網(wǎng)頁(yè)內(nèi)容加入收藏夾，也是不可能的，因?yàn)槭詹貖A不會(huì)記錄網(wǎng)頁(yè)程序運(yùn) 行的狀態(tài)，而只會(huì)簡(jiǎn)單的記錄下網(wǎng)頁(yè)程序的地址（URL）。

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

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

（譯者注：#fragmentIdentifier就是標(biāo)簽記錄）

因?yàn)楫?dāng)改變標(biāo)簽的時(shí)候并不會(huì)使網(wǎng)頁(yè)刷新，所以非常適合記錄當(dāng)前網(wǎng)頁(yè)程序的狀態(tài)。當(dāng)然開發(fā)者可以自定義一個(gè)更容易讀懂的標(biāo)簽，并且使用戶可以把它加入收藏夾。

dojo.undo.browser允許開發(fā)者創(chuàng)建一個(gè)相對(duì)于運(yùn)行狀態(tài)的對(duì)象（state object），這個(gè)對(duì)象會(huì)得到回叫（callback）當(dāng)用戶點(diǎn)擊后退或者前進(jìn)按鈕。

開發(fā)

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

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

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

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

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

設(shè)定網(wǎng)頁(yè)程序的初始狀態(tài)：

dojo.undo.browser.setInitialState(state);

當(dāng)用戶每次點(diǎn)擊前進(jìn)或者后退，state對(duì)象都會(huì)被調(diào)用。

然后我們需要給state對(duì)象創(chuàng)建幾個(gè)方法（function）
得到后退提示：back（），backButtion（）或者h(yuǎn)andle（type），type可以是“back”或者是“forward”。
得到前進(jìn)提示：forward（），forwardButton（）或者h(yuǎn)andle(type），type如上。

下面是個(gè)簡(jiǎn)單的例子：

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

注冊(cè)一個(gè)state對(duì)象使用下面的方法：

dojo.undo.browser.addToHistory(state);

如 果向改變?yōu)g覽器的地址（URL），引用state對(duì)象的changeUrl屬性。如果changeUrl是true，dojo.undo.browser 就將產(chǎn)生一個(gè)唯一的標(biāo)簽，如果changeUrl被定義為任何其他的值（不包括undefined，null，0和空string），那么這個(gè)值就會(huì)被使 用為標(biāo)簽。這樣用戶就可以把當(dāng)前頁(yè)加入收藏夾了。

提示
如果你要使用changeUrl，即使你不設(shè)定自己的標(biāo)簽，也至少定義為true。
如果你要在本機(jī)測(cè)試，不要使用IE。因?yàn)楫?dāng)IE訪問本地文件時(shí)不會(huì)創(chuàng)建歷史列表ifram_history.html。請(qǐng)把網(wǎng)頁(yè)上傳到服務(wù)器上測(cè)試。
Safari2.0.3+：只有后退按鈕可以正常工作，并且只有當(dāng)changeUrl沒用使用的時(shí)候。
Opera 8.5.3：不會(huì)正常運(yùn)行。

這里有一個(gè)網(wǎng)上的例子：

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

發(fā)布Dojo

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

6月27日更新：

I/O

dojo.io.blind介紹

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

在dojo.io 包中我們一般最常使用的是dojo.io.bind()方法。dojo.io.blind()是一個(gè)標(biāo)準(zhǔn)的異步的請(qǐng)求API，它包含了各種傳輸層 （transport layers），包括queues of iFrames,XMLHTTP,mod_pubsub,LivePage等等。Dojo會(huì)試圖為當(dāng)前的請(qǐng)求選擇最合適的傳輸方法，因?yàn)樵谧鼍W(wǎng)站時(shí)一般不 會(huì)使用到其他傳輸，所以我們只用到XMLHTTP。dojo接受一個(gè)匿名的類，但是在知道這個(gè)類的屬性的情況下，把它作為方法參數(shù)（function argument）。下面的代碼是創(chuàng)建一個(gè)請(qǐng)求（request），這個(gè)請(qǐng)求會(huì)從URL返回原始的字符串。
dojo.io.bind({
    url:  "     load:  function (type, data, evt){  /* do something w/ the data  */  },
    mimetype:  " text/plain "
});

這就是全部，你提供了一個(gè)數(shù)據(jù)地址，還有一個(gè)當(dāng)你得到返回值時(shí)要執(zhí)行的function。但是如果在請(qǐng)求過程中出錯(cuò)了怎么辦呢？我們?cè)賮韯?chuàng)建一個(gè)register來解決：

dojo.io.bind({
    url: "    load: function(type, data, evt){ /*do something w/ the data */ },
    error: function(type, error){ /*do something w/ the error*/ },
    mimetype: "text/plain"
});

同樣也可以只創(chuàng)建一個(gè)單獨(dú)的handler來解決：
dojo.io.bind({
    url: "    handle: function(type, data, evt){
        if(type == "load"){
            // do something with the data object
        }else if(type == "error"){
            // here, "data" is our error object
            // respond to the error here
        }else{
            // other types of events might get passed, handle them here
        }
    },
    mimetype: "text/plain"
});

下面的代碼提交一段javascript程序段，然后讓服務(wù)器運(yùn)行它，一般我們這么做是為了加速程序運(yùn)行，注意mimetype：
dojo.io.bind({
    url: "    load: function(type, evaldObj){ /* do something */ },
    mimetype: "text/javascript"
});

如果你想確保程序使用XMLHTTP，可以這樣寫：
dojo.io.bind({
    url: "    load: function(type, evaldObj){ /* do something */ },
    mimetype: "text/plain", // get plain text, don't eval()
    transport: "XMLHTTPTransport"
});
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):
作為一個(gè)jack-of-all-trades（萬(wàn)事通），bind()同樣支持來自于表單提交的數(shù)據(jù)。
dojo.io.bind({
    url: "    load: function(type, evaldObj){ /* do something */ },
    formNode: document.getElementById("formToSubmit")
});
以上只是一些最基本的，其實(shí)這些可以不用全部由開發(fā)者自定義。

RPC
你可以看到，Dojo通過dojo.io.bind提供了簡(jiǎn)單，強(qiáng)大的方法使用多種多樣的I/O functions。但是在開發(fā)過程中，程序員會(huì)調(diào)用很多很多I/O，這同時(shí)會(huì)給服務(wù)器和客戶端加重負(fù)擔(dān)。Dojo的RPC服務(wù)就是為了減少負(fù)擔(dān)，易用，精簡(jiǎn)代碼而生的。

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

我們假定有一個(gè)需要調(diào)用服務(wù)器端程序的小程序，假設(shè)要調(diào)用add(x,y)和subtract(x,y)。在沒有特殊情況的條件下，我們的客戶端會(huì)這樣寫：
add = function(x,y) {

    request = {x: x, y: y};

    dojo.io.bind({
            url: "add.php",
            load: onAddResults,
            mimetype: "text/plain",
        content: request
    });
}

subtract = function(x,y) {

    request = {x: x, y: y};

    dojo.io.bind({
            url: "subract",
            load: onSubtractResults,
            mimetype: "text/plain"
        content: request
    });
}

你 看，這不是很難。但是無論是我們讓服務(wù)器運(yùn)行add和subtract還是讓客戶端自己計(jì)算，這只是一個(gè)非常簡(jiǎn)單的程序。如果我們要調(diào)用在服務(wù)器上30個(gè) 不同method會(huì)怎么樣呢？我猜我們可能要重復(fù)的寫幾乎一樣的代碼一遍又一遍，每次都要?jiǎng)?chuàng)建一個(gè)請(qǐng)求類（request object),設(shè)定URL，設(shè)定變量等等。這不僅容易出錯(cuò)，而且還很枯燥。
Dojo的RPC客戶端簡(jiǎn)化了這個(gè)過程：
{
    "serviceType": "JSON-RPC",
    "serviceURL": "rpcProcessor.php",
    "methods":[
        {
            "name": "add",
            "parameters":[
                {"name": "x"},
                {"name": "y"}   
            ]
        },
        {
            "name": "subtract",
            "parameters":[
                {"name": "x"},
                {"name": "y"}   
            ]
        }

    ]
}

以上就是對(duì)于服務(wù)器的定義。一旦定義創(chuàng)建完畢，其他的事情就簡(jiǎn)單了，我們還可以創(chuàng)建一個(gè)類：
var myObject = new dojo.rpc.JsonService?(defintion);
要使用服務(wù)器的方法：
myObject.add(3,5);

我 敢打賭你會(huì)在想“我不是只調(diào)用方法就夠了，我還有得到計(jì)算的結(jié)果?！蹦闶菍?duì)的，但這也是非常容易的。服務(wù)器端的myObject.add()會(huì)返回一個(gè)延 緩類（deferred object）。Twisted Python用戶可能對(duì)延緩類（deferred object）很熟悉，延緩類（deferred object）允許開發(fā)者根據(jù)返回?cái)?shù)據(jù)的類型附加一個(gè)或更多的回叫（callbacks）和錯(cuò)誤處理（errbacks）。這里有一個(gè)簡(jiǎn)單的例子：
var myDeferred = myObject.add(3,5);
myDeferred.addCallback(myCallbackMethod);

我 們把mycallbackmethod作為回叫添加到我們的延緩類mydeferred。這時(shí)，8會(huì)被傳遞進(jìn)mycallbackmethod。另一方 面，我們也可以添加一個(gè)errback method來處理服務(wù)器返回的出錯(cuò)信息。我們隨意添加回叫方法（callback），多少都可以，它們會(huì)按照我們定義的順序被調(diào)用。

以上的例子都是圍繞dojo.rpc.JsonService展開的。我們還可以使用dojo.rpc.YahooService，規(guī)范和結(jié)構(gòu)都是一樣的。這兩個(gè)類都是繼承了dojo.rpc.RpcService。要?jiǎng)?chuàng)建自己的類會(huì)在第二章中詳細(xì)介紹。

轉(zhuǎn)載自http://www.blogjava.net/burnet

原文地址 http://www.blogjava.net/burnet/articles/54186.html

最新評(píng)論