prototype.js 1.4版開發者手冊
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
prototype.js是什么?
[p]萬一你沒有使用過大名鼎鼎的prototype.js,那么讓我來告訴你,[url=http://prototype.conio.net/]prototype.js[/url]是由[url=http://conio.net/]sam stephenson[/url]寫的一個javascript類庫。這個構思奇妙,而且兼容標準的類庫,能幫助你輕松建立有高度互動的web2.0特性的富客戶端頁面。[/p]
[p]如果你最近嘗試使用它,你大概了解到文檔并不是作者的一個強項。和在我以前使用這個類庫的不少開發者一樣,一開始,我不得不一頭扎進閱讀prototype.js的源代碼和實驗它的功能中。我想,在我學習完它之后,把我學到的東西分享給大家是件不錯的事。[/p]
[p]同時,在本文中,我也將提供一個關于這個類庫提供的objects,classes,functions,extensions這對東東的[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference]非官方參考[/url][/p]
[p]在閱讀這個文檔時,熟悉ruby的開發者將會注意到ruby的一些內建類和本類庫擴展實現之間非常相似。[/p]
相關文章
[p]advanced [url=http://sergiopereira.com/articles/advjs.html]javascript guide[/url].[/p]
一些實用的函數
[p]這個類庫帶有很多預定義的對象和實用函數,這些東東的目的顯然是把你從一些重復的打字中解放出來 。[/p]
使用$()方法
[p]$() 方法是在dom中使用過于頻繁的 document.getelementbyid() 方法的一個便利的簡寫,就像這個dom方法一樣,這個方法返回參數傳入的id的那個元素。[/p]
[p]比起dom中的方法,這個更勝一籌。你可以傳入多個id作為參數然后 $() 返回一個帶有所有要求的元素的一個 array 對象。[/p][br]
[br]
[br]
[br]
this is a paragraph [br][br]
[br]
this is another paragraph [br][br] [br] [br] [p]另外一個好處是,這個函數能傳入用string表示的對象id,也可以傳入對象本身,這樣,在建立其它能傳兩種類型的參數的函數時非常有用。[/p] 使用$f()函數 [p]$f()函數是另一個大收歡迎的“快捷鍵”,它能用于返回任何表單輸入控件的值,比如text box,drop-down list。這個方法也能用元素id或元素本身做為參數。[/p][br] [br] 使用$a()函數 [p]$a()函數能把它接收到的單個的參數轉換成一個array對象。[/p] [p]這個方法,結合被本類庫擴展了的array類,能方便的把任何的可枚舉列表轉換成或拷貝到一個array對象。一個推薦的用法就是把dom node lists轉換成一個普通的array對象,從而更有效率的進行遍歷,請看下面的例子。[/p][br] [br] [p][/p] 使用 $h() 函數 [p]$h()函數把一些對象轉換成一個可枚舉的和聯合數組類似的hash對象。[/p] [p][/p] 使用$r()函數 [p]$r()是new objectrange(lowbound,upperbound,excludebounds)的縮寫。[/p] [p]跳到[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.objectrange]objectrange[/url] 類文檔可以看到一個關于此類的完整描述. 此時,我們還是先來看一個例子以展示這個縮寫能代替哪些方法吧。其它相關的一些知識可以在[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.enumerable]enumerable[/url] 對象文檔中找到。[/p][br] [p][/p] 使用try.these()函數 try.these() 方法使得實現當你想調用不同的方法直到其中的一個成功正常的這種需求變得非常容易, 他把一系列的方法作為參數并且按順序的一個一個的執行這些方法直到其中的一個成功執行,返回成功執行的那個方法的返回值。 在下面的例子中, xmlnode.text在一些瀏覽器中好用,但是xmlnode.textcontent在另一些瀏覽器中正常工作。 使用try.these()方法我們可以得到正常工作的那個方法的返回值。 [p][br] [/p] [p][/p] ajax對象 [p]上面提到的共通方法非常好,但是面對它吧,它們不是最高級的那類東西。它們是嗎?你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。[/p] [p]我很肯定你對prototype.js感興趣的原因很可能是由于它的ajax能力。所以讓我們解釋當你需要完成ajax邏輯的時候,這個包如何讓它更容易。[/p] ajax 對象是一個預定義對象,由這個包創建,為了封裝和簡化編寫[url=http://en.wikipedia.org/wiki/ajax_%28programming%29]ajax[/url] 功能涉及的狡猾的代碼。 這個對象包含一系列的封裝ajax邏輯的類。我們來看看其中幾個類。 使用ajax.request類 如果你不使用任何的幫助程序包,你很可能編寫了整個大量的代碼來創建xmlhttprequest對象并且異步的跟蹤它的進程, 然后解析出響應 然后處理它。當你不需要支持多于一種類型的瀏覽器時你會感到非常的幸運。 為了支持 ajax 功能。這個包定義了 ajax.request 類。 [p]假如你有一個應用程序可以通過url [i]http://yoursever/app/get_sales?empid=1234&year=1998[/i]與服務器通信。它返回下面這樣的xml 響應。[/p][br] 你注意到傳入 ajax.request構造方法的第二個對象了嗎? 參數{method: 'get', parameters: pars, oncomplete: showresponse} 表示一個匿名對象的真實寫法。他表示你傳入的這個對象有一個名為 method 值為 'get'的屬性,另一個屬性名為 parameters 包含http請求的查詢字符串,和一個oncomplete 屬性/方法包含函數showresponse。 還有一些其它的屬性可以在這個對象里面定義和設置,如 asynchronous,可以為true 或 false 來決定ajax對服務器的調用是否是異步的(默認值是 true)。 這個參數定義ajax調用的選項。在我們的例子中,在第一個參數通過http get命令請求那個url,傳入了變量 pars包含的查詢字符串, ajax.request 對象在它完成接收響應的時候將調用showresponse 方法。 也許你知道, xmlhttprequest在http請求期間將報告進度情況。這個進度被描述為四個不同階段:[i]loading[/i], [i]loaded[/i], [i]interactive[/i], 或 [i]complete[/i]。你可以使 ajax.request 對象在任何階段調用自定義方法 ,[i]complete[/i] 是最常用的一個。想調用自定義的方法只需要簡單的在請求的選項參數中的名為 onxxxxx 屬性/方法中提供自定義的方法對象。 就像我們例子中的 oncomplete 。你傳入的方法將會被用一個參數調用,這個參數是 xmlhttprequest 對象自己。你將會用這個對象去得到返回的數據并且或許檢查包含有在這次調用中的http結果代碼的 status 屬性。 還有另外兩個有用的選項用來處理結果。我們可以在onsuccess 選項處傳入一個方法,當ajax無誤的執行完后調用, 相反的,也可以在onfailure選項處傳入一個方法,當服務器端出現錯誤時調用。正如onxxxxx 選項傳入的方法一樣,這兩個在被調用的時候也傳入一個帶有ajax請求的xmlhttprequest對象。 [p]我們的例子沒有用任何有趣的方式處理這個 xml響應, 我們只是把這段xml放進了一個文本域里面。對這個響應的一個典型的應用很可能就是找到其中的想要的信息,然后更新頁面中的某些元素, 或者甚至可能做某些xslt轉換而在頁面中產生一些html。[/p] [p]在1.4.0版本中,一種新的事件回傳外理被引入。如果你有一段代碼總是要為一個特殊的事件執行,而不管是哪個ajax調用引發它,那么你可以使用新的[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#ajax.responders]ajax.responders[/url]對象。[/p] [p]假設你想要在一個ajax調用正在運行時,顯示一些提示效果,像一個不斷轉動的圖標之類的,你可以使用兩個全局事件handler來做到,其中一個在第一個調用開始時顯示圖標,另一個在最后一個調用完成時隱藏圖標。看下面的例子。[/p] loading...
[p]更完全的解釋,請參照 [url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#ajax_request_reference]ajax.request 參考[/url] 和 [url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#options_reference]ajax選項參考[/url]。[/p]
[p][/p]
使用ajax.updater類
如果你的服務器的另一端返回的信息已經是html了,那么使用這個程序包中 ajax.updater 類將使你的生活變得更加得容易。用它你只需提供哪一個元素需要被ajax請求返回的html填充就可以了,例子比我寫說明的更清楚。
你可以看到,這段代碼比前面的例子更加簡潔,不包括 oncomplete 方法,但是在構造方法中傳入了一個元素id。 我們來稍稍修改一下代碼來描述如何在客戶端處理服務器段錯誤成為可能。
我們將加入更多的選項, 指定處理錯誤的一個方法。這個是用 onfailure 選項來完成的。我們也指定了一個 placeholder 只有在成功請求之后才會被填充。為了完成這個目的我們修改了第一個參數從一個簡單的元素id到一個帶有兩個屬性的對象, success (一切ok的時候被用到) 和 failure (有地方出問題的時候被用到) 在下面的例子中沒有用到failure屬性,而僅僅在 onfailure 處使用了 reporterror 方法。
[p]
如果你的服務器邏輯是連同html 標記返回javascript 代碼, ajax.updater對象可以執行那段javascript代碼。為了使這個對象對待響應為javascript,你只需在最后參數的對象構造方法中簡單加入evalscripts: true屬性。但是值得提醒的是,像這個選項名evalscripts暗示的,這些腳本會被執行,但是它們不會被加入到page的腳本中。“有什么區別?”,可能你會這樣問。我們假定請求地址返回的東東像這樣:[br]
[p]如果你以前這樣嘗試過,你知道這些腳本不會如你所期望的那樣工作,原因是這段腳本會被執行,但像上面這樣的腳本執行并不會創建一個名叫sayhi的函數,它什么也不做。如果要創建一個函數,我們應當把代碼改成下面這個樣子:[/p]
[p]為什么我們在上面的代碼中不使用var關鍵字來聲明這個變量呢(指sayhi ),因為那樣做創建出來的函數將只是當前腳本塊的一個局部變量(至少在ie中是這樣)。不寫var關鍵字,創建出來的對象的作用域就是我們所期望的window。[/p]
[p]更多相關知識,請參看 [url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#ajax.updater]ajax.updater reference[/url] 和[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#ajax.options]options reference[/url].[/p]
枚舉... 噢!噢!
[p]你知道,我們都是這樣來做循環的,建一個array,用elements組織它們,再建一個循環結構(例如for,foreach,while)通過index數字來訪問每一個element,再用這個element做一些動作。[/p]
[p]當你想到這時,你會發現幾乎每次寫循環代碼你都會遲早用到一個array。那么,如果array對象能夠提供更多的功能給它們的迭代器使用不是很爽嗎?確實是這樣,事實上很多的編程語言都在它們的array或其它類似的結構中(如collections,lists)提供一些這樣的功能。[/p]
[p]現在好了,prototype.js了給我們一個 [url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.enumerable][color=#800080]enumerable[/color][/url]對象,它實現了很多和可迭代數據進行交互的竅門。和原有的js對象相比prototype.js更上一層樓,它對[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.array][color=#800080]array 類s[/color][/url]擴展了所有枚舉要用的函數。[/p]
循環, ruby樣式的
[p]在標準的javascript中,如果你想把一個array中的所有elements顯示出來,你可以像下面代碼這樣寫得很好:[/p]
[p]使用我們新的最好的朋友,prototype.js,我們可以把它生寫成這樣[/p]function showlist(){[br]
var simpsons = ['homer', 'marge', 'lisa', 'bart', 'meg'];[br]
simpsons.each( function(familymember){[br]
alert(familymember);[br]
});
}
[p]你可能會想“非常奇怪的方式...相對舊的,這種語法太怪異了”。哦,在上面的例子,確實什么也沒有,在這個簡單得要死例子中,也沒有改變太多啊,盡管如此,請繼續讀下去。[/p]
[p]在繼續下面內容之前,你注意到那個被做為一個參數傳遞給each函數的函數?我們把它理解成迭代器函數。[/p]
your arrays on steroids
[p]就如我們上面提到的,把你的array中的elements當成相同的類型使用相同的屬性和函數是很通用(common,不知該翻譯成通用還是庸俗)的。讓我們看看怎么樣利用我們新的馬力強勁的arrays的迭代功能吧。[/p]
[p]依照標準找到一個element。[/p]
[p][/p][br]
[br]
[p]現在我們再下一城,看看如何過濾一個array中的元素,從每個元素中得到我們想要的成員。[/p]
[p][/p][br]
[br] this text has[br] a lot of[br] links. some are[br] external[br] and some are local[br] [br] [p]上面的代碼僅僅是一點小小的實踐讓人愛上這種語法。請參看 [url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.enumerable][color=#800080]enumerable[/color][/url]和[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.array][color=#800080]array[/color][/url]的所有函數[/p] [p][/p] [p][/p] prototype.js參考 [p][/p] javascript類擴展 [p]prototype.js 類庫實現強大功能的一種途徑是擴展已有的javascript 類。[/p] [p][/p] 對 [color=#000000]object的擴展[/color] method kind arguments description extend(destination, source) static destination: any object, source: any object 提供一種通過拷貝所有源以象屬性和函數到目標函數實現繼承的方法 inspect(targetobj) static targetobj: any object 返回可讀性好關于目標對象的文字描述,如果對象實例沒有定義一個inspect函數,默認返回tostring函數的值。 [p][/p] [color=#000000]對number的擴展[/color] method kind arguments description tocolorpart() instance (none) 返回數字的十六進制表示形式。在把一個rgb數字轉換成html表現形式時很有用。 succ() instance (none) 返回下一個數字,這個方法可用于迭代調用場景中。 times(iterator) instance iterator: a function object conforming to function(index) calls the [color=#000000]iterator function repeatedly passing the current index in the index argument. 反復調用iterator函數并傳遞當前index到iterator的index參數。 [/color] [p]下面的例子用提示框顯示0-9。[/p][b該文章在 2010/7/3 14:57:11 編輯過 |
關鍵字查詢
相關文章
正在查詢... |