prototype.js 1.4版開發(fā)者手冊(cè)
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
prototype.js是什么?
[p]萬一你沒有使用過大名鼎鼎的prototype.js,那么讓我來告訴你,[url=http://prototype.conio.net/]prototype.js[/url]是由[url=http://conio.net/]sam stephenson[/url]寫的一個(gè)javascript類庫(kù)。這個(gè)構(gòu)思奇妙,而且兼容標(biāo)準(zhǔn)的類庫(kù),能幫助你輕松建立有高度互動(dòng)的web2.0特性的富客戶端頁面。[/p]
[p]如果你最近嘗試使用它,你大概了解到文檔并不是作者的一個(gè)強(qiáng)項(xiàng)。和在我以前使用這個(gè)類庫(kù)的不少開發(fā)者一樣,一開始,我不得不一頭扎進(jìn)閱讀prototype.js的源代碼和實(shí)驗(yàn)它的功能中。我想,在我學(xué)習(xí)完它之后,把我學(xué)到的東西分享給大家是件不錯(cuò)的事。[/p]
[p]同時(shí),在本文中,我也將提供一個(gè)關(guān)于這個(gè)類庫(kù)提供的objects,classes,functions,extensions這對(duì)東東的[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference]非官方參考[/url][/p]
[p]在閱讀這個(gè)文檔時(shí),熟悉ruby的開發(fā)者將會(huì)注意到ruby的一些內(nèi)建類和本類庫(kù)擴(kuò)展實(shí)現(xiàn)之間非常相似。[/p]
相關(guān)文章
[p]advanced [url=http://sergiopereira.com/articles/advjs.html]javascript guide[/url].[/p]
一些實(shí)用的函數(shù)
[p]這個(gè)類庫(kù)帶有很多預(yù)定義的對(duì)象和實(shí)用函數(shù),這些東東的目的顯然是把你從一些重復(fù)的打字中解放出來 。[/p]
使用$()方法
[p]$() 方法是在dom中使用過于頻繁的 document.getelementbyid() 方法的一個(gè)便利的簡(jiǎn)寫,就像這個(gè)dom方法一樣,這個(gè)方法返回參數(shù)傳入的id的那個(gè)元素。[/p]
[p]比起dom中的方法,這個(gè)更勝一籌。你可以傳入多個(gè)id作為參數(shù)然后 $() 返回一個(gè)帶有所有要求的元素的一個(gè) array 對(duì)象。[/p][br]
[br]
[br]
[br]
this is a paragraph [br][br]
[br]
this is another paragraph [br][br] [br] [br] [p]另外一個(gè)好處是,這個(gè)函數(shù)能傳入用string表示的對(duì)象id,也可以傳入對(duì)象本身,這樣,在建立其它能傳兩種類型的參數(shù)的函數(shù)時(shí)非常有用。[/p] 使用$f()函數(shù) [p]$f()函數(shù)是另一個(gè)大收歡迎的“快捷鍵”,它能用于返回任何表單輸入控件的值,比如text box,drop-down list。這個(gè)方法也能用元素id或元素本身做為參數(shù)。[/p][br] [br] 使用$a()函數(shù) [p]$a()函數(shù)能把它接收到的單個(gè)的參數(shù)轉(zhuǎn)換成一個(gè)array對(duì)象。[/p] [p]這個(gè)方法,結(jié)合被本類庫(kù)擴(kuò)展了的array類,能方便的把任何的可枚舉列表轉(zhuǎn)換成或拷貝到一個(gè)array對(duì)象。一個(gè)推薦的用法就是把dom node lists轉(zhuǎn)換成一個(gè)普通的array對(duì)象,從而更有效率的進(jìn)行遍歷,請(qǐng)看下面的例子。[/p][br] [br] [p][/p] 使用 $h() 函數(shù) [p]$h()函數(shù)把一些對(duì)象轉(zhuǎn)換成一個(gè)可枚舉的和聯(lián)合數(shù)組類似的hash對(duì)象。[/p] [p][/p] 使用$r()函數(shù) [p]$r()是new objectrange(lowbound,upperbound,excludebounds)的縮寫。[/p] [p]跳到[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.objectrange]objectrange[/url] 類文檔可以看到一個(gè)關(guān)于此類的完整描述. 此時(shí),我們還是先來看一個(gè)例子以展示這個(gè)縮寫能代替哪些方法吧。其它相關(guān)的一些知識(shí)可以在[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#reference.enumerable]enumerable[/url] 對(duì)象文檔中找到。[/p][br] [p][/p] 使用try.these()函數(shù) try.these() 方法使得實(shí)現(xiàn)當(dāng)你想調(diào)用不同的方法直到其中的一個(gè)成功正常的這種需求變得非常容易, 他把一系列的方法作為參數(shù)并且按順序的一個(gè)一個(gè)的執(zhí)行這些方法直到其中的一個(gè)成功執(zhí)行,返回成功執(zhí)行的那個(gè)方法的返回值。 在下面的例子中, xmlnode.text在一些瀏覽器中好用,但是xmlnode.textcontent在另一些瀏覽器中正常工作。 使用try.these()方法我們可以得到正常工作的那個(gè)方法的返回值。 [p][br] [/p] [p][/p] ajax對(duì)象 [p]上面提到的共通方法非常好,但是面對(duì)它吧,它們不是最高級(jí)的那類東西。它們是嗎?你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。[/p] [p]我很肯定你對(duì)prototype.js感興趣的原因很可能是由于它的ajax能力。所以讓我們解釋當(dāng)你需要完成ajax邏輯的時(shí)候,這個(gè)包如何讓它更容易。[/p] ajax 對(duì)象是一個(gè)預(yù)定義對(duì)象,由這個(gè)包創(chuàng)建,為了封裝和簡(jiǎn)化編寫[url=http://en.wikipedia.org/wiki/ajax_%28programming%29]ajax[/url] 功能涉及的狡猾的代碼。 這個(gè)對(duì)象包含一系列的封裝ajax邏輯的類。我們來看看其中幾個(gè)類。 使用ajax.request類 如果你不使用任何的幫助程序包,你很可能編寫了整個(gè)大量的代碼來創(chuàng)建xmlhttprequest對(duì)象并且異步的跟蹤它的進(jìn)程, 然后解析出響應(yīng) 然后處理它。當(dāng)你不需要支持多于一種類型的瀏覽器時(shí)你會(huì)感到非常的幸運(yùn)。 為了支持 ajax 功能。這個(gè)包定義了 ajax.request 類。 [p]假如你有一個(gè)應(yīng)用程序可以通過url [i]http://yoursever/app/get_sales?empid=1234&year=1998[/i]與服務(wù)器通信。它返回下面這樣的xml 響應(yīng)。[/p][br] 你注意到傳入 ajax.request構(gòu)造方法的第二個(gè)對(duì)象了嗎? 參數(shù){method: 'get', parameters: pars, oncomplete: showresponse} 表示一個(gè)匿名對(duì)象的真實(shí)寫法。他表示你傳入的這個(gè)對(duì)象有一個(gè)名為 method 值為 'get'的屬性,另一個(gè)屬性名為 parameters 包含http請(qǐng)求的查詢字符串,和一個(gè)oncomplete 屬性/方法包含函數(shù)showresponse。 還有一些其它的屬性可以在這個(gè)對(duì)象里面定義和設(shè)置,如 asynchronous,可以為true 或 false 來決定ajax對(duì)服務(wù)器的調(diào)用是否是異步的(默認(rèn)值是 true)。 這個(gè)參數(shù)定義ajax調(diào)用的選項(xiàng)。在我們的例子中,在第一個(gè)參數(shù)通過http get命令請(qǐng)求那個(gè)url,傳入了變量 pars包含的查詢字符串, ajax.request 對(duì)象在它完成接收響應(yīng)的時(shí)候?qū)⒄{(diào)用showresponse 方法。 也許你知道, xmlhttprequest在http請(qǐng)求期間將報(bào)告進(jìn)度情況。這個(gè)進(jìn)度被描述為四個(gè)不同階段:[i]loading[/i], [i]loaded[/i], [i]interactive[/i], 或 [i]complete[/i]。你可以使 ajax.request 對(duì)象在任何階段調(diào)用自定義方法 ,[i]complete[/i] 是最常用的一個(gè)。想調(diào)用自定義的方法只需要簡(jiǎn)單的在請(qǐng)求的選項(xiàng)參數(shù)中的名為 onxxxxx 屬性/方法中提供自定義的方法對(duì)象。 就像我們例子中的 oncomplete 。你傳入的方法將會(huì)被用一個(gè)參數(shù)調(diào)用,這個(gè)參數(shù)是 xmlhttprequest 對(duì)象自己。你將會(huì)用這個(gè)對(duì)象去得到返回的數(shù)據(jù)并且或許檢查包含有在這次調(diào)用中的http結(jié)果代碼的 status 屬性。 還有另外兩個(gè)有用的選項(xiàng)用來處理結(jié)果。我們可以在onsuccess 選項(xiàng)處傳入一個(gè)方法,當(dāng)ajax無誤的執(zhí)行完后調(diào)用, 相反的,也可以在onfailure選項(xiàng)處傳入一個(gè)方法,當(dāng)服務(wù)器端出現(xiàn)錯(cuò)誤時(shí)調(diào)用。正如onxxxxx 選項(xiàng)傳入的方法一樣,這兩個(gè)在被調(diào)用的時(shí)候也傳入一個(gè)帶有ajax請(qǐng)求的xmlhttprequest對(duì)象。 [p]我們的例子沒有用任何有趣的方式處理這個(gè) xml響應(yīng), 我們只是把這段xml放進(jìn)了一個(gè)文本域里面。對(duì)這個(gè)響應(yīng)的一個(gè)典型的應(yīng)用很可能就是找到其中的想要的信息,然后更新頁面中的某些元素, 或者甚至可能做某些xslt轉(zhuǎn)換而在頁面中產(chǎn)生一些html。[/p] [p]在1.4.0版本中,一種新的事件回傳外理被引入。如果你有一段代碼總是要為一個(gè)特殊的事件執(zhí)行,而不管是哪個(gè)ajax調(diào)用引發(fā)它,那么你可以使用新的[url=http://cnblogs.com/thinhunan/archive/2006/04/01/364404.html#ajax.responders]ajax.responders[/url]對(duì)象。[/p] [p]假設(shè)你想要在一個(gè)ajax調(diào)用正在運(yùn)行時(shí),顯示一些提示效果,像一個(gè)不斷轉(zhuǎn)動(dòng)的圖標(biāo)之類的,你可以使用兩個(gè)全局事件handler來做到,其中一個(gè)在第一個(gè)調(diào)用開始時(shí)顯示圖標(biāo),另一個(gè)在最后一個(gè)調(diào)用完成時(shí)隱藏圖標(biāo)。看下面的例子。[/p] ![]() [br] this text has[br] a lot of[br] links. some are[br] external[br] and some are local[br] [br] [p]上面的代碼僅僅是一點(diǎn)小小的實(shí)踐讓人愛上這種語法。請(qǐng)參看 [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]的所有函數(shù)[/p] [p][/p] [p][/p] prototype.js參考 [p][/p] javascript類擴(kuò)展 [p]prototype.js 類庫(kù)實(shí)現(xiàn)強(qiáng)大功能的一種途徑是擴(kuò)展已有的javascript 類。[/p] [p][/p] 對(duì) [color=#000000]object的擴(kuò)展[/color] method kind arguments description extend(destination, source) static destination: any object, source: any object 提供一種通過拷貝所有源以象屬性和函數(shù)到目標(biāo)函數(shù)實(shí)現(xiàn)繼承的方法 inspect(targetobj) static targetobj: any object 返回可讀性好關(guān)于目標(biāo)對(duì)象的文字描述,如果對(duì)象實(shí)例沒有定義一個(gè)inspect函數(shù),默認(rèn)返回tostring函數(shù)的值。 [p][/p] [color=#000000]對(duì)number的擴(kuò)展[/color] method kind arguments description tocolorpart() instance (none) 返回?cái)?shù)字的十六進(jìn)制表示形式。在把一個(gè)rgb數(shù)字轉(zhuǎn)換成html表現(xiàn)形式時(shí)很有用。 succ() instance (none) 返回下一個(gè)數(shù)字,這個(gè)方法可用于迭代調(diào)用場(chǎng)景中。 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. 反復(fù)調(diào)用iterator函數(shù)并傳遞當(dāng)前index到iterator的index參數(shù)。 [/color] [p]下面的例子用提示框顯示0-9。[/p][b該文章在 2010/7/3 14:57:11 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |