或許你還沒(méi)有用過(guò)它， prototype.js 是一個(gè)由Sam Stephenson寫(xiě)的JavaScript包。這個(gè)構思奇妙編寫(xiě)良好的一段兼容標準的一段代碼將承擔創(chuàng )造胖客戶(hù)端， 高交互性WEB應用程序的重擔。輕松加入Web 2.0特性。
如果你最近體驗了這個(gè)程序包，你很可能會(huì )發(fā)現文檔并不是它的強項之一。像所有在我之前的開(kāi)發(fā)者一樣，我只能一頭扎進(jìn)prototype.js的源代碼中并且試驗其中的每一個(gè)部分。 我想當我學(xué)習他的時(shí)候記寫(xiě)筆記然后分享給其他人將會(huì )很不錯。
我也一起提供了這個(gè)包的對象，類(lèi)，方法和擴展的 非官方參考 。
這個(gè)程序包里面包含了許多預定義的對象和通用性方法。編寫(xiě)這些方法的明顯的目的就是為了減少你大量的重復編碼和慣用法。
$() 方法是在DOM中使用過(guò)于頻繁的 document.getElementById() 方法的一個(gè)便利的簡(jiǎn)寫(xiě)，就像這個(gè)DOM方法一樣，這個(gè)方法返回參數傳入的id的那個(gè)元素。
比起DOM中的方法，這個(gè)更勝一籌。你可以傳入多個(gè)id作為參數然后 $() 返回一個(gè)帶有所有要求的元素的一個(gè) Array 對象。下面的例子會(huì )向你描述這些。
<HTML><HEAD><TITLE> Test Page </TITLE><script src="prototype-1.3.1.js"></script><script> function test1() { var d = $(‘myDiv‘); alert(d.innerHTML); } function test2() { var divs = $(‘myDiv‘,‘myOtherDiv‘); for(i=0; i<divs.length; i++) { alert(divs[i].innerHTML); } }</script></HEAD><BODY> <div id="myDiv"> <p>This is a paragraph</p> </div> <div id="myOtherDiv"> <p>This is another paragraph</p> </div> <input type="button" value=Test1 onclick="test1();"><br> <input type="button" value=Test2 onclick="test2();"><br></BODY></HTML>這個(gè)方法的另一個(gè)好處就是你可以傳入id字符串或者元素對象自己，這使得在創(chuàng )建可以傳入任何形式參數的方法的時(shí)候， 它變得非常有用。
$F()方法是另一個(gè)非常受歡迎的簡(jiǎn)寫(xiě)。它可以返回任何輸入表單控件的值，如文本框或下拉框。 這個(gè)方法可以傳入元素的id或者元素自己。
<script> function test3() { alert( $F(‘userName‘) ); }</script><input type="text" id="userName" value="Joe Doe"><br> <input type="button" value=Test3 onclick="test3();"><br>Try.these() 方法使得實(shí)現當你想調用不同的方法直到其中的一個(gè)成功正常的這種需求變得非常容易， 他把一系列的方法作為參數并且按順序的一個(gè)一個(gè)的執行這些方法直到其中的一個(gè)成功執行，返回成功執行的那個(gè)方法的返回值。
在下面的例子中， xmlNode.text在一些瀏覽器中好用，但是xmlNode.textContent在另一些瀏覽器中正常工作。 使用Try.these()方法我們可以得到正常工作的那個(gè)方法的返回值。
<script>function getXmlNodeValue(xmlNode){ return Try.these( function() {return xmlNode.text;}, function() {return xmlNode.textContent;) );}</script>上面提到的共通方法非常好，但是面對它吧，它們不是最高級的那類(lèi)東西。它們是嗎？你很可能自己編寫(xiě)了這些甚至在你的腳本里面有類(lèi)似功能的方法。但是這些方法只是冰山一角。
我很肯定你對prototype.js感興趣的原因很可能是由于它的AJAX能力。所以讓我們解釋當你需要完成AJAX邏輯的時(shí)候，這個(gè)包如何讓它更容易。
Ajax 對象是一個(gè)預定義對象，由這個(gè)包創(chuàng )建，為了封裝和簡(jiǎn)化編寫(xiě)AJAX 功能涉及的狡猾的代碼。 這個(gè)對象包含一系列的封裝AJAX邏輯的類(lèi)。我們來(lái)看看它們的一些。
如果你不使用任何的幫助程序包，你很可能編寫(xiě)了整個(gè)大量的代碼來(lái)創(chuàng )建XMLHttpRequest對象并且異步的跟蹤它的進(jìn)程， 然后解析出響應 然后處理它。當你不需要支持多于一種類(lèi)型的瀏覽器時(shí)你會(huì )感到非常的幸運。
為了支持 AJAX 功能。這個(gè)包定義了 Ajax.Request 類(lèi)。
假如你有一個(gè)應用程序可以通過(guò)url http://yoursever/app/get_sales?empID=1234&year=1998與服務(wù)器通信。它返回下面這樣的XML 響應。
<?xml version="1.0" encoding="utf-8" ?><ajax-response> <response type="object" id="productDetails"> <monthly-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-01</year-month> <sales>$8,115.36</sales> </employee-sales> <employee-sales> <employee-id>1234</employee-id> <year-month>1998-02</year-month> <sales>$11,147.51</sales> </employee-sales> </monthly-sales> </response></ajax-response>
用 Ajax.Request對象和服務(wù)器通信并且得到這段XML是非常簡(jiǎn)單的。下面的例子演示了它是如何完成的。
<script> function searchSales() { var empID = $F(‘lstEmployees‘); var y = $F(‘lstYears‘); var url = ‘http://yoursever/app/get_sales‘; var pars = ‘empID=‘ + empID + ‘&year=‘ + y; var myAjax = new Ajax.Request( url, {method: ‘get‘, parameters: pars, onComplete: showResponse} ); } function showResponse(originalRequest) { //put returned XML in the textarea $(‘result‘).value = originalRequest.responseText; }</script><select id="lstEmployees" size="10" onchange="searchSales()"> <option value="5">Buchanan, Steven</option> <option value="8">Callahan, Laura</option> <option value="1">Davolio, Nancy</option></select><select id="lstYears" size="3" onchange="searchSales()"> <option selected="selected" value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option></select><br><textarea id=result cols=60 rows=10 ></textarea>你看到傳入 Ajax.Request構造方法的第二個(gè)對象了嗎？ 參數{method: ‘get‘, parameters: pars, onComplete: showResponse} 表示一個(gè)匿名對象的真實(shí)寫(xiě)法。他表示你傳入的這個(gè)對象有一個(gè)名為 method 值為 ‘get‘的屬性，另一個(gè)屬性名為 parameters 包含HTTP請求的查詢(xún)字符串，和一個(gè)onComplete 屬性/方法包含函數showResponse。
還有一些其它的屬性可以在這個(gè)對象里面定義和設置，如 asynchronous，可以為true 或 false 來(lái)決定AJAX對服務(wù)器的調用是否是異步的（默認值是 true）。
這個(gè)參數定義AJAX調用的選項。在我們的例子中，在第一個(gè)參數通過(guò)HTTP GET命令請求那個(gè)url，傳入了變量 pars包含的查詢(xún)字符串， Ajax.Request 對象在它完成接收響應的時(shí)候將調用showResponse 方法。
也許你知道， XMLHttpRequest在HTTP請求期間將報告進(jìn)度情況。這個(gè)進(jìn)度被描述為四個(gè)不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對象在任何階段調用自定義方法 ，Complete 是最常用的一個(gè)。想調用自定義的方法只需要簡(jiǎn)單的在請求的選項參數中的名為 onXXXXX 屬性/方法中提供自定義的方法對象。 就像我們例子中的 onComplete 。你傳入的方法將會(huì )被用一個(gè)參數調用，這個(gè)參數是 XMLHttpRequest 對象自己。你將會(huì )用這個(gè)對象去得到返回的數據并且或許檢查包含有在這次調用中的HTTP結果代碼的 status 屬性。
還有另外兩個(gè)有用的選項用來(lái)處理結果。我們可以在onSuccess 選項處傳入一個(gè)方法，當AJAX無(wú)誤的執行完后調用， 相反的，也可以在onFailure選項處傳入一個(gè)方法，當服務(wù)器端出現錯誤時(shí)調用。正如onXXXXX 選項傳入的方法一樣，這兩個(gè)在被調用的時(shí)候也傳入一個(gè)帶有AJAX請求的XMLHttpRequest對象。
我們的例子沒(méi)有用任何有趣的方式處理這個(gè) XML響應， 我們只是把這段XML放進(jìn)了一個(gè)文本域里面。對這個(gè)響應的一個(gè)典型的應用很可能就是找到其中的想要的信息，然后更新頁(yè)面中的某些元素， 或者甚至可能做某些XSLT轉換而在頁(yè)面中產(chǎn)生一些HTML。
更完全的解釋?zhuān)垍⒄?Ajax.Request 參考 和 Ajax選項參考。
如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了，那么使用這個(gè)程序包中 Ajax.Updater 類(lèi)將使你的生活變得更加得容易。用它你只需提供哪一個(gè)元素需要被AJAX請求返回的HTML填充就可以了，例子比我寫(xiě)說(shuō)明的更清楚。
<script> function getHTML() { var url = ‘http://yourserver/app/getSomeHTML‘; var pars = ‘someParameter=ABC‘; var myAjax = new Ajax.Updater(‘placeholder‘, url, {method: ‘get‘, parameters: pars}); }</script><input type=button value=GetHtml onclick="getHTML()"><div id="placeholder"></div>你可以看到，這段代碼比前面的例子更加簡(jiǎn)潔，不包括 onComplete 方法，但是在構造方法中傳入了一個(gè)元素id。 我們來(lái)稍稍修改一下代碼來(lái)描述如何在客戶(hù)端處理服務(wù)器段錯誤成為可能。
我們將加入更多的選項， 指定處理錯誤的一個(gè)方法。這個(gè)是用 onFailure 選項來(lái)完成的。
我們也指定了一個(gè) placeholder 只有在成功請求之后才會(huì )被填充。為了完成這個(gè)目的我們修改了第一個(gè)參數從一個(gè)簡(jiǎn)單的元素id到一個(gè)帶有兩個(gè)屬性的對象， success (一切OK的時(shí)候被用到) 和 failure (有地方出問(wèn)題的時(shí)候被用到) 在下面的例子中沒(méi)有用到failure屬性，而僅僅在 onFailure 處使用了 reportError 方法。
<script> function getHTML() { var url = ‘http://yourserver/app/getSomeHTML‘; var pars = ‘someParameter=ABC‘; var myAjax = new Ajax.Updater( {success: ‘placeholder‘}, url, {method: ‘get‘, parameters: pars, onFailure: reportError}); } function reportError(request) { alert(‘Sorry. There was an error.‘); }</script><input type=button value=GetHtml onclick="getHTML()"><div id="placeholder"></div>如果你的服務(wù)器邏輯是返回JavaScript 代碼而不是單純的 HTML 標記， Ajax.Updater對象可以執行那段JavaScript代碼。為了使這個(gè)對象對待響應為JavaScript，你只需在最后參數的對象構造方法中簡(jiǎn)單加入evalScripts: true屬性。
更完全的解釋?zhuān)垍⒄?Ajax.Updater 參考 和 Ajax選項參考 。
Table 3. 對 Function 類(lèi)的擴展
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| bind(object) | instance | object: 擁有這個(gè)方法的對象 | 返回預先綁定在擁有該函數(=方法)的對象上的函數實(shí)例， 返回的方法將和原來(lái)的方法具有相同的參數。 |
| bindAsEventListener(object) | instance | object: 擁有這個(gè)方法的對象 | 返回預先綁定在擁有該函數(=方法)的對象上的函數實(shí)例， 返回的方法將把當前的事件對象作為它的參數。 |
讓我們看看這些擴展的具體例子。
<input type=checkbox id=myChk value=1> Test?<script> //declaring the class var CheckboxWatcher = Class.create(); //defining the rest of the class implmentation CheckboxWatcher.prototype = { initialize: function(chkBox, message) { this.chkBox = $(chkBox); this.message = message; //assigning our method to the event this.chkBox.onclick = this.showMessage.bindAsEventListener(this); }, showMessage: function(evt) { alert(this.message + ‘ (‘ + evt.type + ‘)‘); } }; var watcher = new CheckboxWatcher(‘myChk‘, ‘Changed‘);</script>Table 6. Event 對象的擴展
| 屬性 | 類(lèi)型 | 描述 |
|---|---|---|
| KEY_BACKSPACE | Number | 8: 常量，退格(Backspace)鍵的代碼。 |
| KEY_TAB | Number | 9: 常量，Tab鍵的代碼。 |
| KEY_RETURN | Number | 13: 常量，回車(chē)鍵的代碼。 |
| KEY_ESC | Number | 27: 常量， Esc鍵的代碼。 |
| KEY_LEFT | Number | 37: 常量，左箭頭鍵的代碼。 |
| KEY_UP | Number | 38: 常量，上箭頭鍵的代碼。 |
| KEY_RIGHT | Number | 39: 常量，右箭頭鍵的代碼。 |
| KEY_DOWN | Number | 40: 常量，下箭頭鍵的代碼。 |
| KEY_DELETE | Number | 46: 常量，刪除(Delete)鍵的代碼。 |
| observers: | Array | 緩存的觀(guān)察者的列表，這個(gè)對象內部具體實(shí)現的一部分。 |
Table 7. Event 對象的擴展
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| element(event) | static | event: 事件對象 | 返回引發(fā)這個(gè)事件的元素。 |
| isLeftClick(event) | static | event: 事件對象 | 如果鼠標左鍵單擊返回true。 |
| pointerX(event) | static | event: 事件對象 | 返回在頁(yè)面上x(chóng)坐標。 |
| pointerY(event) | static | event: 事件對象 | 返回在頁(yè)面上y坐標。 |
| stop(event) | static | event: 事件對象 | 用這個(gè)方法來(lái)中止事件的默認行為來(lái)使事件的傳播停止。 |
| findElement(event, tagName) | static | event: 事件對象, tagName: 指定標記的名字 | 向 DOM 樹(shù)的上位查找，找到第一個(gè)給定標記名稱(chēng)的元素， 從這個(gè)元素開(kāi)始觸發(fā)事件。 |
| observe(element, name, observer, useCapture) | static | element: 對象或者對象id, name: 事件名 (如 ‘click‘, ‘load‘, etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 | 加入一個(gè)處理事件的方法。 |
| stopObserving(element, name, observer, useCapture) | static | element: 對象或者對象id, name: 事件名 (如 ‘click‘, ‘load‘, etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 | 刪除一個(gè)處理實(shí)踐的方法。 |
| _observeAndCache( element, name, observer, useCapture) | static | 私有方法，不用管它。 | |
| unloadCache() | static | (none) | 私有方法，不用管它。清除內存中的多有觀(guān)察著(zhù)緩存。 |
讓我們看看怎樣用這個(gè)對象加入處理 window 對象的load事件的處理方法。
<script> Event.observe(window, ‘load‘, showMessage, false); function showMessage() { alert(‘Page loaded.‘); }</script>這個(gè)對象提供一定間隔時(shí)間上重復調用一個(gè)方法的邏輯。
Prototype 沒(méi)有太重要的作用，只是聲明了該程序包的版本 。
在這個(gè)程序包中 Class 對象在聲明其他的類(lèi)時(shí)候被用到 。用這個(gè)對象聲明類(lèi)使得新類(lèi)支持 initialize() 方法，他起構造方法的作用。
看下面的例子
//declaring the classvar MySampleClass = Class.create();//defining the rest of the class implmentationMySampleClass.prototype = { initialize: function(message) { this.message = message; }, showMessage: function(ajaxResponse) { alert(this.message); }};//now, let‘s instantiate and use one objectvar myTalker = new MySampleClass(‘hi there.‘);myTalker.showMessage(); //displays alert這個(gè)對象被用作其他提供AJAX功能的類(lèi)的根對象。
這個(gè)類(lèi)是其他在A(yíng)jax對象中定義的類(lèi)的基類(lèi)。
Table 13. Ajax.Base 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| setOptions(options) | instance | options: AJAX 選項 | 設定AJAX操作想要的選項。 |
| responseIsSuccess() | instance | (none) | 返回 true 如果AJAX操作成功,否則為 false 。 |
| responseIsFailure() | instance | (none) | 與 responseIsSuccess() 相反。 |
繼承自 Ajax.Base
封裝 AJAX 操作
Table 14. Ajax.Request 類(lèi)
| 屬性 | 類(lèi)型 | 類(lèi)別 | 描述 |
|---|---|---|---|
| Events | Array | static | 在A(yíng)JAX操作中所有可能報告的事件/狀態(tài)的列表。這個(gè)列表包括: ‘Uninitialized‘, ‘Loading‘, ‘Loaded‘, ‘Interactive‘, 和 ‘Complete‘。 |
| transport | XMLHttpRequest | instance | 攜帶AJAX操作的 XMLHttpRequest 對象。 |
Table 15. Ajax.Request 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](url, options) | constructor | url: 請求的url, options: AJAX 選項 | 創(chuàng )建這個(gè)對象的一個(gè)實(shí)例，它將在給定的選項下請求url。 重要：如果選擇的url受到瀏覽器的安全設置，他會(huì )一點(diǎn)作用也不起。 很多情況下，瀏覽器不會(huì )請求與當前頁(yè)面不同主機(域名)的url。 你最好只使用本地url來(lái)避免限制用戶(hù)配置他們的瀏覽器(謝謝Clay) |
| request(url) | instance | url: AJAX 請求的url | 這個(gè)方法通常不會(huì )被外部調用。已經(jīng)在構造方法中調用了。 |
| setRequestHeaders() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被這個(gè)對象自己調用來(lái)配置在HTTP請求要發(fā)送的HTTP報頭。 |
| onStateChange() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 當AJAX請求狀態(tài)改變的時(shí)候被這個(gè)對象自己調用。 |
| respondToReadyState(readyState) | instance | readyState: 狀態(tài)數字 (1 到 4) | 這個(gè)方法通常不會(huì )被外部調用。 當AJAX請求狀態(tài)改變的時(shí)候被這個(gè)對象自己調用。 |
AJAX操作中一個(gè)重要的部分就是 options 參數。 本質(zhì)上沒(méi)有options類(lèi)。任何對象都可以被傳入，只要帶有需要的屬性。通常會(huì )只為了AJAX調用創(chuàng )建匿名類(lèi)。
Table 16. options 參數對象
| 屬性 | 類(lèi)型 | Default | 描述 |
|---|---|---|---|
| method | Array | ‘post‘ | HTTP 請求方式。 |
| parameters | String | ‘‘ | 在HTTP請求中傳入的url格式的值列表。 |
| asynchronous | Boolean | true | 指定是否做異步 AJAX 請求。 |
| postBody | String | undefined | 在HTTP POST的情況下，傳入請求體中的內容。 |
| requestHeaders | Array | undefined | 和請求一起被傳入的HTTP頭部列表， 這個(gè)列表必須含有偶數個(gè)項目， 任何奇數項目是自定義的頭部的名稱(chēng)， 接下來(lái)的偶數項目使這個(gè)頭部項目的字符串值。 例子:[‘my-header1‘, ‘this is the value‘, ‘my-other-header‘, ‘a(chǎn)nother value‘] |
| onXXXXXXXX | Function(XMLHttpRequest) | undefined | 在A(yíng)JAX請求中，當相應的事件/狀態(tài)形成的時(shí)候調用的自定義方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 這個(gè)方法將被傳入一個(gè)參數， 這個(gè)參數是攜帶AJAX操作的 XMLHttpRequest對象。 |
| onSuccess | Function(XMLHttpRequest) | undefined | 當AJAX請求成功完成的時(shí)候調用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數， 這個(gè)參數是攜帶AJAX操作的 XMLHttpRequest對象。 |
| onFailure | Function(XMLHttpRequest) | undefined | 當AJAX請求完成但出現錯誤的時(shí)候調用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數， 這個(gè)參數是攜帶AJAX操作的 XMLHttpRequest對象。 |
| insertion | Function(Object, String) | null | 為了把返回的文本注入到一個(gè)元素中而執行的方法。 這個(gè)方法將被傳入兩個(gè)參數，要被更新的對象并且只應用于 Ajax.Updater的響應文本 。 |
| evalScripts | Boolean | undefined, false | 決定當響應到達的時(shí)候是否執行其中的腳本塊，只在 Ajax.Updater 對象中應用。 |
| decay | Number | undefined, 1 | 決定當最后一次響應和前一次響應相同時(shí)在 Ajax.PeriodicalUpdater 對象中的減漫訪(fǎng)問(wèn)的次數， 例如，如果設為2，后來(lái)的刷新和之前的結果一樣， 這個(gè)對象將等待2個(gè)設定的時(shí)間間隔進(jìn)行下一次刷新， 如果又一次一樣， 那么將等待4次，等等。 不設定這個(gè)只，或者設置為1，將避免訪(fǎng)問(wèn)頻率變慢。 |
繼承自 Ajax.Request
當請求的url返回一段HTML而你想把它直接放置到頁(yè)面中一個(gè)特定的元素的時(shí)候被用到。 如果url的返回<script> 的塊并且想在接收到時(shí)就執行它的時(shí)候也可以使用該對象。含有腳本的時(shí)候使用 evalScripts 選項。
Table 17. Ajax.Updater 類(lèi)
| 屬性 | 類(lèi)型 | 類(lèi)別 | 描述 |
|---|---|---|---|
| ScriptFragment | String | static | 可以判斷是否為腳本的正則表達式。 |
| containers | Object | instance | 這個(gè)對象包含兩個(gè)屬性:AJAX請求成功執行的時(shí)候用到 containers.success , 否則的話(huà)用到 containers.failure 。 |
Table 18. Ajax.Updater 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](container, url, options) | constructor | container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對象 - object.success AJAX請求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設定的元素(或id) ,url: 請求的url, options: AJAX 選項 | 創(chuàng )建一個(gè)用給定的選項請求給定的url的一個(gè)實(shí)例。 |
| updateContent() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 當響應到達的時(shí)候，被這個(gè)對象自己調用。 它會(huì )用HTML更新適當的元素或者調用在 insertion 選項中傳入的方法-這個(gè)方法將被傳入兩個(gè)參數， 被更新的元素和響應文本。 |
繼承自 Ajax.Base
這個(gè)類(lèi)重復生成并使用 Ajax.Updater 對象來(lái)刷新頁(yè)面中的一個(gè)元素?；蛘邎绦?Ajax.Updater 可以執行的其它任務(wù)。更多信息參照 Ajax.Updater 參考 。
Table 19. Ajax.PeriodicalUpdater 類(lèi)
| 屬性 | 類(lèi)型 | 類(lèi)別 | 描述 |
|---|---|---|---|
| container | Object | instance | 這個(gè)值將直接傳入Ajax.Updater的構造方法。 |
| url | String | instance | 這個(gè)值將直接傳入Ajax.Updater的構造方法。 |
| frequency | Number | instance | 兩次刷新之間的間隔 (不是頻率) ，以秒為單位。 默認2秒。 This 當調用 Ajax.Updater 對象的時(shí)候，這個(gè)數將和當前的 decay 相乘。 |
| decay | Number | instance | 重負執行任務(wù)的時(shí)候保持的衰敗水平。 |
| updater | Ajax.Updater | instance | 最后一次使用的 Ajax.Updater 對象 |
| timer | Object | instance | 通知對象該下一次更新時(shí)用到的JavaScript 計時(shí)器。 |
Table 20. Ajax.PeriodicalUpdater 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](container, url, options) | constructor | container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對象 - object.success AJAX請求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設定的元素(或id) ,url: 請求的url, options: AJAX 選項 | 創(chuàng )建一個(gè)用給定的選項請求給定的url的一個(gè)實(shí)例。 |
| start() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 對象為了開(kāi)始周期性執行任務(wù)的時(shí)候調用的方法。 |
| stop() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 對象為了停止周期性執行任務(wù)的時(shí)候調用的方法。 |
| updateComplete() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被當前的 Ajax.Updater 使用，當一次請求結束的時(shí)候，它被用作計劃下一次請求。 |
| onTimerEvent() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。當到下一次更新時(shí)被內部調用。 |
這個(gè)對象提供在操作DOM中元素時(shí)使用的功能性方法。
Table 21. Element 對象
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| toggle(elem1 [, elem2 [, elem3 [...]]]) | constructor | elemN: 元素對象或id | 切換每一個(gè)傳入元素的可視性。 |
| hide(elem1 [, elem2 [, elem3 [...]]]) | instance | elemN: 元素對象或id | 用設定它的 style.display 為 ‘none‘來(lái)隱藏每個(gè)傳入的元素。 |
| show(elem1 [, elem2 [, Slem3 [...]]]) | instance | elemN: 元素對象或id | 用設定它的 style.display 為 ‘‘來(lái)顯示每個(gè)傳入的元素。 |
| remove(element) | instance | element: 元素對象或id | 從document對象中刪除指定的元素。 |
| getHeight(element) | instance | element: 元素對象或id | 返回元素的 offsetHeight 。 |
| addClassName( element, className) | instance | element: 元素對象或id, className: CSS類(lèi)名 | 向元素的類(lèi)名中加入給定的類(lèi)名。 |
| hasClassName( element, className) | instance | element: 元素對象或id, className: CSS類(lèi)名 | 返回 true 如果元素的類(lèi)名中含有給定的類(lèi)名 |
| removeClassName( element, className) | instance | element: 元素對象或id, className: CSS類(lèi)名 | 從元素的類(lèi)名中刪除給定的類(lèi)名。 |
| cleanWhitespace( element ) | instance | element: 元素對象或id | 刪除該元素的所有只含有空格的子節點(diǎn)。 |
這個(gè)類(lèi)被用作其他提供動(dòng)態(tài)內容插入功能的類(lèi)的基類(lèi)，它像一個(gè)抽象類(lèi)一樣被使用。
在給定元素開(kāi)始標記的前面插入HTML。
Table 24. Insertion.Before 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, content) | constructor | element: 元素對象或id, content: 被插入的HTML | 繼承自 Abstract.Insertion. 創(chuàng )建一個(gè)可以幫助插入動(dòng)態(tài)內容的對象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going?</span><script> new Insertion.Before(‘person‘, ‘Chief ‘); </script>將把 HTML 變?yōu)?/p>
<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How‘s it going?</span>在給定元素第一個(gè)子節點(diǎn)位置插入 HTML。內容將位于元素的開(kāi)始標記的緊后面。
Table 25. Insertion.Top 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, content) | constructor | element: 元素對象或id, content: 被插入的HTML | 繼承自 Abstract.Insertion. 創(chuàng )建一個(gè)可以幫助插入動(dòng)態(tài)內容的對象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going?</span><script> new Insertion.Top(‘person‘, ‘Mr. ‘); </script>將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How‘s it going?</span>在給定元素最后一個(gè)子節點(diǎn)位置插入 HTML。內容將位于元素的結束標記的緊前面。
Table 26. Insertion.Bottom 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, content) | constructor | element: 元素對象或id, content: 被插入的HTML | 繼承自 Abstract.Insertion. 創(chuàng )建一個(gè)可以幫助插入動(dòng)態(tài)內容的對象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going?</span><script> new Insertion.Bottom(‘person‘, " What‘s up?"); </script>將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going? What‘s up?</span>在給定元素結束標記的后面插入HTML。
Table 27. Insertion.After 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, content) | constructor | element: 元素對象或id, content: 被插入的HTML | 繼承自 Abstract.Insertion. 創(chuàng )建一個(gè)可以幫助插入動(dòng)態(tài)內容的對象。 |
下面的代碼
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going?</span><script> new Insertion.After(‘person‘, ‘ Are you there?‘); </script>將把 HTML 變?yōu)?/p>
<br>Hello, <span id="person" style="color:red;">Wiggum. How‘s it going?</span> Are you there?這個(gè)對象提供操作表單中的輸入項目的功能性方法。
Table 28. Field 對象
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| clear(field1 [, field2 [, field3 [...]]]) | instance | fieldN: 元素對象或id | 清除傳入表單中項目元素的值。 |
| present(field1 [, field2 [, field3 [...]]]) | instance | fieldN: 元素對象或id | 只有在所有的表單項目都不為空時(shí)返回 true 。 |
| focus(field) | instance | fieldN: 元素對象或id | 移動(dòng)焦點(diǎn)到給定的表單項目。 |
| select(field) | instance | fieldN: 元素對象或id | 選擇支持項目值選擇的表單項目的值。 |
| activate(field) | instance | fieldN: 元素對象或id | 移動(dòng)焦點(diǎn)并且選擇支持項目值選擇的表單項目的值。 |
這個(gè)對象提供操作表單和他們的輸入項目的功能性方法。
Table 29. Form 對象
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| serialize(form) | instance | form: 表單元素或id | 返回url參數格式的項目名和值的列表， 如‘field1=value1&field2=value2&field3=value3‘。 |
| getElements(form) | instance | form: 表單元素或id | 返回包含所有在表單中輸入項目的 Array 對象。 |
| getInputs(form [, typeName [, name]]) | instance | form: 表單元素或id, typeName: 輸入項目的類(lèi)型, name: 輸入項目的名稱(chēng) | 返回一個(gè) Array 包含所有在表單中的 <input> 元素。 另外， 這個(gè)列表可以對元素的類(lèi)型或名字屬性進(jìn)行過(guò)濾。 |
| disable(form) | instance | form: 表單元素或id | 使表單中的所有輸入項目無(wú)效。 |
| enable(form) | instance | form: 表單元素或id | 使表單中的所有輸入項目有效。 |
| focusFirstElement(form) | instance | form: 表單元素或id | 激活第一個(gè)表單中可視的，有效的輸入項目。 |
| reset(form) | instance | form: 表單元素或id | 重置表單。和調用表單對象的 reset() 方法一樣。 |
這個(gè)對象提供表單對象中的可視和非可視元素的功能性方法。
這個(gè)對象提供了內部使用的用來(lái)協(xié)助解析出表單元素的當前值功能性方法。
Table 31. Form.Element.Serializers 對象
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| inputSelector(element) | instance | element: 一個(gè)帶有checked屬性的表單元素或id， 如 radio 或 checkbox。 | 返回帶有元素名稱(chēng)和值的 Array , 如 [‘elementName‘, ‘elementValue‘] |
| textarea(element) | instance | element: 一個(gè)帶有value屬性的表單元素或id， 如 textbox, button 或 password 項目。 | 返回帶有元素名稱(chēng)和值的 Array , 如 [‘elementName‘, ‘elementValue‘] |
| select(element) | instance | element: 一個(gè)<select> 元素對象或id。 | 返回帶有元素名稱(chēng)和所有被選擇的選項的值或文本的 Array , 如 [‘elementName‘, ‘selOpt1 selOpt4 selOpt9‘] |
這個(gè)類(lèi)是用于其它監聽(tīng)一個(gè)元素的值(或者任何類(lèi)中涉及的屬性)變化的類(lèi)的基類(lèi)，這個(gè)類(lèi)像一個(gè)抽象類(lèi)一樣被使用。
子類(lèi)可以被創(chuàng )建來(lái)監聽(tīng)如輸入項目值，或style屬性，或表格的行數，或者其他任何對跟蹤變化相關(guān)的東西。
子類(lèi)必須實(shí)現這個(gè)方法來(lái)決定什么才是被監聽(tīng)的元素的當前值。
Table 32. Abstract.TimedObserver 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, frequency, callback) | constructor | element: 元素對象或id, frequency: 以秒為單位的間隔, callback: 當元素改變的時(shí)候調用的方法。 | 創(chuàng )建一個(gè)監聽(tīng)元素的對象。 |
| registerCallback() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被這個(gè)對象自己調用來(lái)開(kāi)始監聽(tīng)那個(gè)元素。 |
| onTimerEvent() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被這個(gè)對象自己調用來(lái)周期性的檢查那個(gè)元素。 |
Abstract.TimedObserver 的一個(gè)實(shí)現類(lèi)用來(lái)監聽(tīng)表單輸入項目的值的變化。當你想監聽(tīng)一個(gè)沒(méi)有帶報告值變化事件的元素的時(shí)候使用這個(gè)類(lèi)。否則的話(huà)使用 Form.Element.EventObserver 類(lèi)代替。
Abstract.TimedObserver 的一個(gè)實(shí)現類(lèi)用來(lái)監聽(tīng)表單中任何數據項的值的變化。當你想監聽(tīng)一個(gè)沒(méi)有帶報告值變化事件的元素的時(shí)候使用這個(gè)類(lèi)。 否則的話(huà)使用類(lèi)Form.EventObserver 代替。
這個(gè)類(lèi)被用作其他一些類(lèi)的基類(lèi)，這些類(lèi)具有在一個(gè)元素的值改變事件發(fā)生的時(shí)候執行一個(gè)回調方法這樣的功能。
類(lèi) Abstract.EventObserver 的多個(gè)對象可以綁定到一個(gè)元素上，不是一個(gè)幫其他的擦出了，而是按照他們付給元素的順序執行這些回調方法。
單選按鈕和復選框的觸發(fā)事件是 onclick ，而文本框和下拉列表框/下拉列表框的是 onchange 。
子類(lèi)必須實(shí)現這個(gè)方法來(lái)決定什么才是被監聽(tīng)的元素的當前值。
Table 36. Abstract.EventObserver 類(lèi)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| [ctor](element, callback) | constructor | element: 元素對象或id, callback: 當事件發(fā)生的時(shí)候調用的方法。 | 創(chuàng )建監聽(tīng)元素的對象。 |
| registerCallback() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被對象調用來(lái)把自己綁定到元素的事件上。 |
| registerFormCallbacks() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 被對象調用來(lái)把自己綁定到表單中的每一個(gè)數據項元素的事件上。 |
| onElementEvent() | instance | (none) | 這個(gè)方法通常不會(huì )被外部調用。 將被綁定到元素的事件上。 |
Abstract.EventObserver 的一個(gè)實(shí)現類(lèi)，它在監測到表單中數據項元素的值改變的相應事件時(shí)候執行一個(gè)回調方法。 如果元素沒(méi)有任何報告變化的事件，那么你可以使用 Form.Element.Observer 類(lèi)代替。
Abstract.EventObserver 的一個(gè)實(shí)現類(lèi)，監聽(tīng)表單對象中包含的任何對象的任何變化，用元素的事件檢測值的變化。如果元素沒(méi)有任何報告變化的事件， 那么你可以使用Form.Observer 類(lèi)代替。
這個(gè)對象提供許多和元素位置相關(guān)的方法。
Table 40. Position 對象 (預備文檔)
| 方法 | 類(lèi)別 | 參數 | 描述 |
|---|---|---|---|
| prepare() | instance | (none) | 調整 deltaX 和 deltaY 屬性來(lái)協(xié)調在滾動(dòng)位置中的變化。 記得在頁(yè)面滾動(dòng)之后的任何調用的withinIncludingScrolloffset 之前調用這個(gè)方法。 |
| realOffset(element) | instance | element: 對象或id | 返回這個(gè)元素的正確滾動(dòng)偏差的 Array 對象， 包括所有影響元素的滾動(dòng)偏差。結果數組類(lèi)似 [total_scroll_left, total_scroll_top] |
| cumulativeOffset(element) | instance | element: 對象或id | 回這個(gè)元素的正確滾動(dòng)偏差的 Array 對象， 包含任何被放置的父元素強加偏差。結果數組類(lèi)似 [total_offset_left, total_offset_top] |
| within(element, x, y) | instance | element: 對象, x 和 y: 一個(gè)點(diǎn)的坐標 | 測試給定的點(diǎn)的坐標是否在給定的元素的外部矩形范圍之內。 |
| withinIncludingScrolloffsets(element, x, y) | instance | element: object, x and y: coordinates of a point | |
| overlap(mode, element) | instance | mode: ‘vertical‘ 或 ‘horizontal‘, element: 對象 | 在調用這個(gè)方法之前需要調用within() 。這個(gè)方法返回0.0到1.0之間的數字，來(lái)表示坐標在元素重疊的分數。 舉個(gè)例子，如果元素是一個(gè)邊長(cháng)是100px的正方形的DIV，并且位于(300, 300), 然后 within(divSquare, 330, 330)；overlap(‘vertical‘, divSquare); 會(huì )返回 0.10，意思是那個(gè)點(diǎn)位于DIV頂部邊框以下 10% (30px) 的位置上。 |
| clone(source, target) | instance | source: 元素對象或 id, target: 元素對象或id | 改變目標元素的大小尺寸和位置與源元素的相同。 |
如果你發(fā)現錯誤，過(guò)失或信息不完全，或平淡無(wú)意義的東西，請 通知作者 ，作者會(huì )盡可能快的修正它，作者仍然在寫(xiě)其他沒(méi)寫(xiě)的類(lèi)，來(lái)保持一致。 任何翻譯的過(guò)失，不足，詞不達意，表達含糊等請通知我，我會(huì )再加斟酌，找到合適的描述。
聯(lián)系客服
