wml

          轉(zhuǎn):DOJO Book 第一章

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

          譯者序:隨著web2.0的熱潮,google,yahoo等各大web供應(yīng)商爭(zhēng)先恐后的退出自己的ajax開(kāi)發(fā)包,意圖爭(zhēng)奪ajax標(biāo)準(zhǔn).究竟鹿死誰(shuí)手?有人看好Yui,有人喜歡GWT,還有人對(duì)這些都嗤之以鼻,認(rèn)為自己寫(xiě)javascript才是王道.

          好了,誰(shuí)優(yōu)誰(shuí)劣暫放一邊,現(xiàn)在我要給大家的是由IBM研發(fā)的dojo開(kāi)發(fā)工具(toolkit)的開(kāi)發(fā)首冊(cè),由我來(lái)翻譯.

          最后說(shuō)一句題外話,本人出國(guó)已久,雖然平時(shí)經(jīng)常上CSDN之類(lèi)的論壇,但是對(duì)中文術(shù)語(yǔ)還不是非常精通,所以有的時(shí)候翻譯一些術(shù)語(yǔ)的時(shí)候不太準(zhǔn)確,我 會(huì)把那些我拿不準(zhǔn)的術(shù)語(yǔ)在后面標(biāo)注上英文,還有本書(shū)作者風(fēng)格比較幽默,有些不能直譯中文,也沒(méi)有必要翻譯,我會(huì)盡我所能,目的是讓大家能掌握Dojo

          ?

          做人要厚道,轉(zhuǎn)載請(qǐng)著名專(zhuān)自Burnet's Blog


          介紹:

          這里將給你對(duì)于dojo的啟蒙課程。你可能會(huì)跟自己說(shuō)"這段可以跳過(guò)了,因?yàn)槲乙呀?jīng)很了解javascript并且對(duì)網(wǎng)站開(kāi)發(fā)很了解了。“不過(guò)這里有個(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到底是什么是非常困難的。我說(shuō)總結(jié)Dojo是很困難的,是因?yàn)镈ojo是一個(gè)可擴(kuò)展的代碼集合 (expandable collection of code)。擴(kuò)展不只是來(lái)自于眾多開(kāi)發(fā)者,并且你會(huì)發(fā)現(xiàn)你可以根據(jù)你自己的需要擴(kuò)展自己的一套東西。就是說(shuō),你把目光放在Dojo身上的原因是因?yàn)?Dojo可以和javascript取長(zhǎng)補(bǔ)短。

          在開(kāi)發(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

          在軟件開(kāi)發(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ì)說(shuō)“嘿!dojo就是庫(kù)的集合!”。你應(yīng)該是對(duì)的,但是,dojo比一個(gè)庫(kù)的集合要包含得多很多。

          Toolkit

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

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

          Dojo會(huì)給你什么

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

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

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

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

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

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

          解決所有問(wèn)題

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

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



          第一章:開(kāi)始使用Dojo

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

          下載Dojo

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

          Dojo模塊(Modules)

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

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

          (譯者注:此部分原著甚是啰嗦,我給精簡(jiǎn)了一下,有興趣的朋友可以參見(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,最常見(jiàn)的html widget有鏈接,按鈕,輸入框。

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

          使用widget的優(yōu)勢(shì)主要三點(diǎn):

          • 跨平臺(tái):使用Dojo widget,無(wú)論使用任何瀏覽器,都會(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è)過(guò)程中你并不需要從庫(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)槲覀儾](méi)有給ComboBox定義選擇項(xiàng),而只是一個(gè)value,而且所以最后顯示出來(lái)的只象是一個(gè)簡(jiǎn)單的inputbox如果用戶禁用了javascript,顯示結(jié)果也會(huì)一樣。

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

          但是如果我們只想使用W3C標(biāo)準(zhǔn)(譯者注:沒(méi)有那些額外的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中沒(méi)用任何內(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>

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

          后退和前進(jìn)

          動(dòng)態(tài)網(wǎng)頁(yè)程序(dynamic web application)避免了頻繁的刷新頁(yè)面,不過(guò)通常也帶來(lái)后退和前進(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版本中,并沒(méi)有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來(lái)更新網(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)。

          開(kāi)發(fā)者可以使用dojo.undo.browser包得到用戶點(diǎn)擊后退和前進(jìn)的事件(event),然后根據(jù)這些事件來(lái)更新頁(yè)面內(nèi)容。 dojo.undo.browser通過(guò)使用一個(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)然開(kāi)發(fā)者可以自定義一個(gè)更容易讀懂的標(biāo)簽,并且使用戶可以把它加入收藏夾。

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

          開(kāi)發(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()或者handle(type),type可以是“back”或者是“forward”。
          • 得到前進(jìn)提示:forward(),forwardButton()或者handle(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訪問(wèn)本地文件時(shí)不會(huì)創(chuàng)建歷史列表ifram_history.html。請(qǐng)把網(wǎng)頁(yè)上傳到服務(wù)器上測(cè)試。
          • Safari2.0.3+:只有后退按鈕可以正常工作,并且只有當(dāng)changeUrl沒(méi)用使用的時(shí)候。
          • Opera 8.5.3:不會(huì)正常運(yùn)行。

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

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

          發(fā)布Dojo

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


          posted on 2006-07-04 11:01 wml 閱讀(249) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): DOJO

          主站蜘蛛池模板: 汤阴县| 伊春市| 定日县| 巴彦淖尔市| 安康市| 万宁市| 射阳县| 莒南县| 芮城县| 大同县| 宜丰县| 潜山县| 金川县| 莒南县| 河南省| 延安市| 瑞丽市| 城市| 凤冈县| 隆昌县| 咸丰县| 崇仁县| 靖州| 晋江市| 宕昌县| 乐安县| 鄂温| 邹平县| 大荔县| 开化县| 扎囊县| 阿拉善左旗| 靖宇县| 加查县| 邢台市| 英吉沙县| 顺昌县| 永丰县| 龙口市| 湖口县| 泗阳县|