|
|
Chapter 1. Programming Guide
或許你還沒(méi)有用過(guò)它， prototype.js 是一個(gè)由Sam Stephenson寫的JavaScript包。這個(gè)構(gòu)思奇妙編寫良好的一段兼容標(biāo)準(zhǔn)的一段代碼將承擔(dān)創(chuàng)造胖客戶端， 高交互性WEB應(yīng)用程序的重?fù)?dān)。輕松加入Web 2.0特性。
如果你最近體驗(yàn)了這個(gè)程序包，你很可能會(huì)發(fā)現(xiàn)文檔并不是它的強(qiáng)項(xiàng)之一。像所有在我之前的開發(fā)者一樣，我只能一頭扎進(jìn)prototype.js的源代碼中并且試驗(yàn)其中的每一個(gè)部分。 我想當(dāng)我學(xué)習(xí)他的時(shí)候記寫筆記然后分享給其他人將會(huì)很不錯(cuò)。
我也一起提供了這個(gè)包的對(duì)象，類，方法和擴(kuò)展的 非官方參考 。
這個(gè)程序包里面包含了許多預(yù)定義的對(duì)象和通用性方法。編寫這些方法的明顯的目的就是為了減少你大量的重復(fù)編碼和慣用法。
$() 方法是在DOM中使用過(guò)于頻繁的 document.getElementById() 方法的一個(gè)便利的簡(jiǎn)寫，就像這個(gè)DOM方法一樣，這個(gè)方法返回參數(shù)傳入的id的那個(gè)元素。
比起DOM中的方法，這個(gè)更勝一籌。你可以傳入多個(gè)id作為參數(shù)然后 $() 返回一個(gè)帶有所有要求的元素的一個(gè) Array 對(duì)象。下面的例子會(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字符串或者元素對(duì)象自己，這使得在創(chuàng)建可以傳入任何形式參數(shù)的方法的時(shí)候， 它變得非常有用。
$F()方法是另一個(gè)非常受歡迎的簡(jiǎn)寫。它可以返回任何輸入表單控件的值，如文本框或下拉框。 這個(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>
$A()方法把接收到的參數(shù)轉(zhuǎn)換成一個(gè)Array對(duì)象。
這個(gè)方法加上對(duì)Array類的擴(kuò)展，可以很容易的轉(zhuǎn)換或者復(fù)制任意的列舉列表到Array對(duì)象， 一個(gè)被推薦使用的用法就是轉(zhuǎn)換DOM的NodeLists到一個(gè)普通的數(shù)組里，可以被更廣泛高效的使用， 看下面的例子。
<script>
function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
nodes.each(function(node){
alert(node.nodeName + ': ' + node.innerHTML);
});
}
</script>
<select id="lstEmployees" size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >
$H()方法把對(duì)象轉(zhuǎn)化成可枚舉的貌似聯(lián)合數(shù)組Hash對(duì)象。
<script>
function testHash()
{
//let's create the object
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash
var h = $H(a);
alert(h.toQueryString()); //displays: first=10&second=20&third=30
}
</script>
$R()方法是new ObjectRange(lowerBound, upperBound, excludeBounds)的一個(gè)簡(jiǎn)單快捷的使用方式。
ObjectRange類文檔里面有完整的解釋。 同時(shí)，我們來(lái)看看一個(gè)簡(jiǎn)單的例子， 來(lái)演示通過(guò)each方法遍歷的用法。 那個(gè)方法的更多解釋在Enumerable對(duì)象文檔里面。
<script>
function demoDollar_R(){
var range = $R(10, 20, false);
range.each(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >
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è)方法的返回值。
<script>
function getXmlNodeValue(xmlNode){
return Try.these(
function() {return xmlNode.text;},
function() {return xmlNode.textContent;)
);
}
</script>
上面提到的共通方法非常好，但是面對(duì)它吧，它們不是最高級(jí)的那類東西。它們是嗎？你很可能自己編寫了這些甚至在你的腳本里面有類似功能的方法。但是這些方法只是冰山一角。
我很肯定你對(duì)prototype.js感興趣的原因很可能是由于它的AJAX能力。所以讓我們解釋當(dāng)你需要完成AJAX邏輯的時(shí)候，這個(gè)包如何讓它更容易。
Ajax 對(duì)象是一個(gè)預(yù)定義對(duì)象，由這個(gè)包創(chuàng)建，為了封裝和簡(jiǎn)化編寫AJAX 功能涉及的狡猾的代碼。 這個(gè)對(duì)象包含一系列的封裝AJAX邏輯的類。我們來(lái)看看它們的一些。
如果你不使用任何的幫助程序包，你很可能編寫了整個(gè)大量的代碼來(lái)創(chuàng)建XMLHttpRequest對(duì)象并且異步的跟蹤它的進(jìn)程， 然后解析出響應(yīng) 然后處理它。當(dāng)你不需要支持多于一種類型的瀏覽器時(shí)你會(huì)感到非常的幸運(yùn)。
為了支持 AJAX 功能。這個(gè)包定義了 Ajax.Request 類。
假如你有一個(gè)應(yīng)用程序可以通過(guò)url http://yoursever/app/get_sales?empID=1234&year=1998與服務(wù)器通信。它返回下面這樣的XML 響應(yīng)。
<?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對(duì)象和服務(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ò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 來(lái)決定AJAX對(duì)服務(wù)器的調(diào)用是否是異步的（默認(rèn)值是 true）。
這個(gè)參數(shù)定義AJAX調(diào)用的選項(xiàng)。在我們的例子中，在第一個(gè)參數(shù)通過(guò)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è)不同階段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 對(duì)象在任何階段調(diào)用自定義方法 ，Complete 是最常用的一個(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)用來(lái)處理結(jié)果。我們可以在onSuccess 選項(xiàng)處傳入一個(gè)方法，當(dāng)AJAX無(wú)誤的執(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ì)象。
我們的例子沒(méi)有用任何有趣的方式處理這個(gè) XML響應(yīng)， 我們只是把這段XML放進(jìn)了一個(gè)文本域里面。對(duì)這個(gè)響應(yīng)的一個(gè)典型的應(yīng)用很可能就是找到其中的想要的信息，然后更新頁(yè)面中的某些元素， 或者甚至可能做某些XSLT轉(zhuǎn)換而在頁(yè)面中產(chǎn)生一些HTML。
更完全的解釋，請(qǐng)參照 Ajax.Request 參考 和 Ajax選項(xiàng)參考。
如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了，那么使用這個(gè)程序包中 Ajax.Updater 類將使你的生活變得更加得容易。用它你只需提供哪一個(gè)元素需要被AJAX請(qǐng)求返回的HTML填充就可以了，例子比我寫說(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òu)造方法中傳入了一個(gè)元素id。 我們來(lái)稍稍修改一下代碼來(lái)描述如何在客戶端處理服務(wù)器段錯(cuò)誤成為可能。
我們將加入更多的選項(xiàng)， 指定處理錯(cuò)誤的一個(gè)方法。這個(gè)是用 onFailure 選項(xiàng)來(lái)完成的。
我們也指定了一個(gè) placeholder 只有在成功請(qǐng)求之后才會(huì)被填充。為了完成這個(gè)目的我們修改了第一個(gè)參數(shù)從一個(gè)簡(jiǎn)單的元素id到一個(gè)帶有兩個(gè)屬性的對(duì)象， 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 標(biāo)記， Ajax.Updater對(duì)象可以執(zhí)行那段JavaScript代碼。為了使這個(gè)對(duì)象對(duì)待響應(yīng)為JavaScript，你只需在最后參數(shù)的對(duì)象構(gòu)造方法中簡(jiǎn)單加入evalScripts: true屬性。
更完全的解釋，請(qǐng)參照 Ajax.Updater 參考 和 Ajax選項(xiàng)參考 。
Chapter 2. prototype.js參考
2.1. JavaScript 類的擴(kuò)展
prototype.js 包中加入功能的一種途徑就是擴(kuò)展已有的JavaScript 類。
2.2. 對(duì) Object 類的擴(kuò)展
Table 2.1. Object 類的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| extend(destination, source) |
static |
destination: 任何對(duì)象, source: 任何對(duì)象 |
用從 source 到 destination復(fù)制所有屬性和方法的方式 來(lái)提供一種繼承機(jī)制。 |
| extend(object) |
instance |
任何對(duì)象 |
用從傳入的 object 中復(fù)制所有屬性和方法的方式 來(lái)提供一種繼承機(jī)制。 |
2.3. 對(duì) Number 類的擴(kuò)展
Table 2.2. Number 類的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| toColorPart() |
instance |
(none) |
返回?cái)?shù)字的十六進(jìn)制描述， 當(dāng)在HTML中轉(zhuǎn)換為RGB顏色組件到HTML中使用的顏色。 |
2.4. 對(duì) Function 類的擴(kuò)展
Table 2.3. 對(duì) Function 類的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| bind(object) |
instance |
object: 擁有這個(gè)方法的對(duì)象 |
返回預(yù)先綁定在擁有該函數(shù)(=方法)的對(duì)象上的函數(shù)實(shí)例， 返回的方法將和原來(lái)的方法具有相同的參數(shù)。 |
| bindAsEventListener(object) |
instance |
object: 擁有這個(gè)方法的對(duì)象 |
返回預(yù)先綁定在擁有該函數(shù)(=方法)的對(duì)象上的函數(shù)實(shí)例， 返回的方法將把當(dāng)前的事件對(duì)象作為它的參數(shù)。 |
讓我們看看這些擴(kuò)展的具體例子。
<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>
2.5. 對(duì) String 類的擴(kuò)展
Table 2.4. String 類的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| stripTags() |
instance |
(none) |
返回一個(gè)把所有的HTML或XML標(biāo)記都移除的字符串。 |
| escapeHTML() |
instance |
(none) |
返回一個(gè)把所有的HTML標(biāo)記回避掉的字符串。 |
| unescapeHTML() |
instance |
(none) |
和 escapeHTML()相反。 |
2.6. 對(duì) document DOM 對(duì)象的擴(kuò)展
Table 2.5. document DOM 對(duì)象的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| getElementsByClassName(className) |
instance |
className: 關(guān)聯(lián)在元素上的CSS類名 |
返回給定的具有相同的CSS類名的所有元素。 |
2.7. 對(duì) Event 對(duì)象的擴(kuò)展
Table 2.6. Event 對(duì)象的擴(kuò)展
| 屬性 |
類型 |
描述 |
| KEY_BACKSPACE |
Number |
8: 常量，退格(Backspace)鍵的代碼。 |
| KEY_TAB |
Number |
9: 常量，Tab鍵的代碼。 |
| KEY_RETURN |
Number |
13: 常量，回車鍵的代碼。 |
| 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 |
緩存的觀察者的列表，這個(gè)對(duì)象內(nèi)部具體實(shí)現(xiàn)的一部分。 |
Table 2.7. Event 對(duì)象的擴(kuò)展
| 方法 |
類別 |
參數(shù) |
描述 |
| element(event) |
static |
event: 事件對(duì)象 |
返回引發(fā)這個(gè)事件的元素。 |
| isLeftClick(event) |
static |
event: 事件對(duì)象 |
如果鼠標(biāo)左鍵單擊返回true。 |
| pointerX(event) |
static |
event: 事件對(duì)象 |
返回在頁(yè)面上x坐標(biāo)。 |
| pointerY(event) |
static |
event: 事件對(duì)象 |
返回在頁(yè)面上y坐標(biāo)。 |
| stop(event) |
static |
event: 事件對(duì)象 |
用這個(gè)方法來(lái)中止事件的默認(rèn)行為來(lái)使事件的傳播停止。 |
| findElement(event, tagName) |
static |
event: 事件對(duì)象, tagName: 指定標(biāo)記的名字 |
向 DOM 樹的上位查找，找到第一個(gè)給定標(biāo)記名稱的元素， 從這個(gè)元素開始觸發(fā)事件。 |
| observe(element, name, observer, useCapture) |
static |
element: 對(duì)象或者對(duì)象id, name: 事件名 (如 'click', 'load', etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 |
加入一個(gè)處理事件的方法。 |
| stopObserving(element, name, observer, useCapture) |
static |
element: 對(duì)象或者對(duì)象id, name: 事件名 (如 'click', 'load', etc), observer: 處理這個(gè)事件的方法, useCapture: 如果true, 在捕捉到事件的階段處理事件 那么如果 false在bubbling 階段處理。 |
刪除一個(gè)處理實(shí)踐的方法。 |
| _observeAndCache( element, name, observer, useCapture) |
static |
|
私有方法，不用管它。 |
| unloadCache() |
static |
(none) |
私有方法，不用管它。清除內(nèi)存中的多有觀察著緩存。 |
讓我們看看怎樣用這個(gè)對(duì)象加入處理 window 對(duì)象的load事件的處理方法。
<script>
Event.observe(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>
2.8. 在 prototype.js中定義的新對(duì)象和類
另一個(gè)這個(gè)程序包幫助你的地方就是提供許多既支持面向?qū)ο笤O(shè)計(jì)理念又有共通功能的許多對(duì)象。
2.9. PeriodicalExecuter 對(duì)象
這個(gè)對(duì)象提供一定間隔時(shí)間上重復(fù)調(diào)用一個(gè)方法的邏輯。
Table 2.8. PeriodicalExecuter 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](callback, interval) |
constructor |
callback: 沒(méi)有參數(shù)的方法, interval: 秒數(shù) |
創(chuàng)建這個(gè)對(duì)象的實(shí)例將會(huì)重復(fù)調(diào)用給定的方法。 |
Table 2.9. PeriodicalExecuter 對(duì)象
| 屬性 |
類型 |
描述 |
| callback |
Function() |
被調(diào)用的方法，該方法不會(huì)被傳入?yún)?shù)。 |
| frequency |
Number |
以秒為單位的間隔。 |
| currentlyExecuting |
Boolean |
表示這個(gè)方法是否正在執(zhí)行。 |
Prototype 沒(méi)有太重要的作用，只是聲明了該程序包的版本 。
Table 2.10. The Prototype object
| 屬性 |
類型 |
描述 |
| Version |
String |
包的版本。 |
| emptyFunction |
Function() |
空方法對(duì)象。 |
在這個(gè)程序包中 Class 對(duì)象在聲明其他的類時(shí)候被用到 。用這個(gè)對(duì)象聲明類使得新類支持 initialize() 方法，他起構(gòu)造方法的作用。
看下面的例子
//declaring the class
var MySampleClass = Class.create();
//defining the rest of the class implmentation
MySampleClass.prototype = {
initialize: function(message) {
this.message = message;
},
showMessage: function(ajaxResponse) {
alert(this.message);
}
};
//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //displays alert
Table 2.11. Class 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| create(*) |
instance |
(any) |
定義新類的構(gòu)造方法。 |
這個(gè)對(duì)象被用作其他提供AJAX功能的類的根對(duì)象。
Table 2.12. Ajax 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| getTransport() |
instance |
(none) |
返回新的XMLHttpRequest 對(duì)象。 |
這個(gè)類是其他在Ajax對(duì)象中定義的類的基類。
Table 2.13. Ajax.Base 類
| 方法 |
類別 |
參數(shù) |
描述 |
| setOptions(options) |
instance |
options: AJAX 選項(xiàng) |
設(shè)定AJAX操作想要的選項(xiàng)。 |
| responseIsSuccess() |
instance |
(none) |
返回 true 如果AJAX操作成功,否則為 false 。 |
| responseIsFailure() |
instance |
(none) |
與 responseIsSuccess() 相反。 |
繼承自 Ajax.Base
封裝 AJAX 操作
Table 2.14. Ajax.Request 類
| 屬性 |
類型 |
類別 |
描述 |
| Events |
Array |
static |
在AJAX操作中所有可能報(bào)告的事件/狀態(tài)的列表。這個(gè)列表包括: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', 和 'Complete'。 |
| transport |
XMLHttpRequest |
instance |
攜帶AJAX操作的 XMLHttpRequest 對(duì)象。 |
Table 2.15. Ajax.Request 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](url, options) |
constructor |
url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建這個(gè)對(duì)象的一個(gè)實(shí)例，它將在給定的選項(xiàng)下請(qǐng)求url。 重要：如果選擇的url受到瀏覽器的安全設(shè)置，他會(huì)一點(diǎn)作用也不起。 很多情況下，瀏覽器不會(huì)請(qǐng)求與當(dāng)前頁(yè)面不同主機(jī)(域名)的url。 你最好只使用本地url來(lái)避免限制用戶配置他們的瀏覽器(謝謝Clay) |
| request(url) |
instance |
url: AJAX 請(qǐng)求的url |
這個(gè)方法通常不會(huì)被外部調(diào)用。已經(jīng)在構(gòu)造方法中調(diào)用了。 |
| setRequestHeaders() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來(lái)配置在HTTP請(qǐng)求要發(fā)送的HTTP報(bào)頭。 |
| onStateChange() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)AJAX請(qǐng)求狀態(tài)改變的時(shí)候被這個(gè)對(duì)象自己調(diào)用。 |
| respondToReadyState(readyState) |
instance |
readyState: 狀態(tài)數(shù)字 (1 到 4) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)AJAX請(qǐng)求狀態(tài)改變的時(shí)候被這個(gè)對(duì)象自己調(diào)用。 |
2.15. options 參數(shù)對(duì)象
AJAX操作中一個(gè)重要的部分就是 options 參數(shù)。 本質(zhì)上沒(méi)有options類。任何對(duì)象都可以被傳入，只要帶有需要的屬性。通常會(huì)只為了AJAX調(diào)用創(chuàng)建匿名類。
Table 2.16. options 參數(shù)對(duì)象
| 屬性 |
類型 |
Default |
描述 |
| method |
Array |
'post' |
HTTP 請(qǐng)求方式。 |
| parameters |
String |
'' |
在HTTP請(qǐng)求中傳入的url格式的值列表。 |
| asynchronous |
Boolean |
true |
指定是否做異步 AJAX 請(qǐng)求。 |
| postBody |
String |
undefined |
在HTTP POST的情況下，傳入請(qǐng)求體中的內(nèi)容。 |
| requestHeaders |
Array |
undefined |
和請(qǐng)求一起被傳入的HTTP頭部列表， 這個(gè)列表必須含有偶數(shù)個(gè)項(xiàng)目， 任何奇數(shù)項(xiàng)目是自定義的頭部的名稱， 接下來(lái)的偶數(shù)項(xiàng)目使這個(gè)頭部項(xiàng)目的字符串值。 例子:['my-header1', 'this is the value', 'my-other-header', 'another value'] |
| onXXXXXXXX |
Function(XMLHttpRequest) |
undefined |
在AJAX請(qǐng)求中，當(dāng)相應(yīng)的事件/狀態(tài)形成的時(shí)候調(diào)用的自定義方法。 例如 var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. 這個(gè)方法將被傳入一個(gè)參數(shù)， 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
| onSuccess |
Function(XMLHttpRequest) |
undefined |
當(dāng)AJAX請(qǐng)求成功完成的時(shí)候調(diào)用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數(shù)， 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
| onFailure |
Function(XMLHttpRequest) |
undefined |
當(dāng)AJAX請(qǐng)求完成但出現(xiàn)錯(cuò)誤的時(shí)候調(diào)用的自定義方法。 這個(gè)方法將被傳入一個(gè)參數(shù)， 這個(gè)參數(shù)是攜帶AJAX操作的 XMLHttpRequest對(duì)象。 |
| insertion |
Function(Object, String) |
null |
為了把返回的文本注入到一個(gè)元素中而執(zhí)行的方法。 這個(gè)方法將被傳入兩個(gè)參數(shù)，要被更新的對(duì)象并且只應(yīng)用于 Ajax.Updater 的響應(yīng)文本 。 |
| evalScripts |
Boolean |
undefined, false |
決定當(dāng)響應(yīng)到達(dá)的時(shí)候是否執(zhí)行其中的腳本塊，只在 Ajax.Updater 對(duì)象中應(yīng)用。 |
| decay |
Number |
undefined, 1 |
決定當(dāng)最后一次響應(yīng)和前一次響應(yīng)相同時(shí)在 Ajax.PeriodicalUpdater 對(duì)象中的減漫訪問(wèn)的次數(shù)， 例如，如果設(shè)為2，后來(lái)的刷新和之前的結(jié)果一樣， 這個(gè)對(duì)象將等待2個(gè)設(shè)定的時(shí)間間隔進(jìn)行下一次刷新， 如果又一次一樣， 那么將等待4次，等等。 不設(shè)定這個(gè)只，或者設(shè)置為1，將避免訪問(wèn)頻率變慢。 |
繼承自 Ajax.Request
當(dāng)請(qǐng)求的url返回一段HTML而你想把它直接放置到頁(yè)面中一個(gè)特定的元素的時(shí)候被用到。 如果url的返回<script> 的塊并且想在接收到時(shí)就執(zhí)行它的時(shí)候也可以使用該對(duì)象。含有腳本的時(shí)候使用 evalScripts 選項(xiàng)。
Table 2.17. Ajax.Updater 類
| 屬性 |
類型 |
類別 |
描述 |
| ScriptFragment |
String |
static |
可以判斷是否為腳本的正則表達(dá)式。 |
| containers |
Object |
instance |
這個(gè)對(duì)象包含兩個(gè)屬性:AJAX請(qǐng)求成功執(zhí)行的時(shí)候用到 containers.success , 否則的話用到 containers.failure 。 |
Table 2.18. Ajax.Updater 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](container, url, options) |
constructor |
container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對(duì)象 - object.success AJAX請(qǐng)求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設(shè)定的元素(或id) ,url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建一個(gè)用給定的選項(xiàng)請(qǐng)求給定的url的一個(gè)實(shí)例。 |
| updateContent() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 當(dāng)響應(yīng)到達(dá)的時(shí)候，被這個(gè)對(duì)象自己調(diào)用。 它會(huì)用HTML更新適當(dāng)?shù)脑鼗蛘哒{(diào)用在 insertion 選項(xiàng)中傳入的方法-這個(gè)方法將被傳入兩個(gè)參數(shù)， 被更新的元素和響應(yīng)文本。 |
2.17. Ajax.PeriodicalUpdater 類
繼承自 Ajax.Base
這個(gè)類重復(fù)生成并使用 Ajax.Updater 對(duì)象來(lái)刷新頁(yè)面中的一個(gè)元素。或者執(zhí)行 Ajax.Updater 可以執(zhí)行的其它任務(wù)。更多信息參照 Ajax.Updater 參考 。
Table 2.19. Ajax.PeriodicalUpdater 類
| 屬性 |
類型 |
類別 |
描述 |
| container |
Object |
instance |
這個(gè)值將直接傳入Ajax.Updater的構(gòu)造方法。 |
| url |
String |
instance |
這個(gè)值將直接傳入Ajax.Updater的構(gòu)造方法。 |
| frequency |
Number |
instance |
兩次刷新之間的間隔 (不是頻率) ，以秒為單位。 默認(rèn)2秒。 This 當(dāng)調(diào)用 Ajax.Updater 對(duì)象的時(shí)候，這個(gè)數(shù)將和當(dāng)前的 decay 相乘。 |
| decay |
Number |
instance |
重負(fù)執(zhí)行任務(wù)的時(shí)候保持的衰敗水平。 |
| updater |
Ajax.Updater |
instance |
最后一次使用的 Ajax.Updater 對(duì)象 |
| timer |
Object |
instance |
通知對(duì)象該下一次更新時(shí)用到的JavaScript 計(jì)時(shí)器。 |
Table 2.20. Ajax.PeriodicalUpdater 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](container, url, options) |
constructor |
container:可以是元素的id, 也可以是元素自己, 或者可以是帶有2個(gè)屬性的對(duì)象 - object.success AJAX請(qǐng)求成功的時(shí)候用到的元素(或者id) 否則用到object.failure 中設(shè)定的元素(或id) ,url: 請(qǐng)求的url, options: AJAX 選項(xiàng) |
創(chuàng)建一個(gè)用給定的選項(xiàng)請(qǐng)求給定的url的一個(gè)實(shí)例。 |
| start() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 對(duì)象為了開始周期性執(zhí)行任務(wù)的時(shí)候調(diào)用的方法。 |
| stop() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 對(duì)象為了停止周期性執(zhí)行任務(wù)的時(shí)候調(diào)用的方法。 |
| updateComplete() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被當(dāng)前的 Ajax.Updater 使用，當(dāng)一次請(qǐng)求結(jié)束的時(shí)候，它被用作計(jì)劃下一次請(qǐng)求。 |
| onTimerEvent() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。當(dāng)?shù)较乱淮胃聲r(shí)被內(nèi)部調(diào)用。 |
這個(gè)對(duì)象提供在操作DOM中元素時(shí)使用的功能性方法。
Table 2.21. Element 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| toggle(elem1 [, elem2 [, elem3 [...]]]) |
constructor |
elemN: 元素對(duì)象或id |
切換每一個(gè)傳入元素的可視性。 |
| hide(elem1 [, elem2 [, elem3 [...]]]) |
instance |
elemN: 元素對(duì)象或id |
用設(shè)定它的 style.display 為 'none'來(lái)隱藏每個(gè)傳入的元素。 |
| show(elem1 [, elem2 [, Slem3 [...]]]) |
instance |
elemN: 元素對(duì)象或id |
用設(shè)定它的 style.display 為 ''來(lái)顯示每個(gè)傳入的元素。 |
| remove(element) |
instance |
element: 元素對(duì)象或id |
從document對(duì)象中刪除指定的元素。 |
| getHeight(element) |
instance |
element: 元素對(duì)象或id |
返回元素的 offsetHeight 。 |
| addClassName( element, className) |
instance |
element: 元素對(duì)象或id, className: CSS類名 |
向元素的類名中加入給定的類名。 |
| hasClassName( element, className) |
instance |
element: 元素對(duì)象或id, className: CSS類名 |
返回 true 如果元素的類名中含有給定的類名 |
| removeClassName( element, className) |
instance |
element: 元素對(duì)象或id, className: CSS類名 |
從元素的類名中刪除給定的類名。 |
| cleanWhitespace( element ) |
instance |
element: 元素對(duì)象或id |
刪除該元素的所有只含有空格的子節(jié)點(diǎn)。 |
這個(gè)對(duì)象是這個(gè)程序包中其他類的根。它沒(méi)有任何屬性和方法。在這個(gè)對(duì)象中定義的類可以被視為傳統(tǒng)的抽象類。
2.20. Abstract.Insertion 類
這個(gè)類被用作其他提供動(dòng)態(tài)內(nèi)容插入功能的類的基類，它像一個(gè)抽象類一樣被使用。
Table 2.22. Abstract.Insertion 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, content) |
constructor |
element: 元素對(duì)象或id, content: 被插入的HTML |
創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
Table 2.23. Abstract.Insertion 類
| 屬性 |
類型 |
類別 |
描述 |
| adjacency |
String |
static, parameter |
這個(gè)參數(shù)指定相對(duì)于給定元素，內(nèi)容將被放置的位置。 可能的值是: 'beforeBegin', 'afterBegin', 'beforeEnd', 和 'afterEnd'. |
| element |
Object |
instance |
與插入物做參照元素對(duì)象。 |
| content |
String |
instance |
被插入的 HTML 。 |
這個(gè)對(duì)象是其他類似功能的根。它沒(méi)有任何屬性和方法。在這個(gè)對(duì)象中定義的類仍然可以被視為傳統(tǒng)的抽象類。
繼承自 Abstract.Insertion
在給定元素開始標(biāo)記的前面插入HTML。
Table 2.24. Insertion.Before 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, content) |
constructor |
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<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>
繼承自 Abstract.Insertion
在給定元素第一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的開始標(biāo)記的緊后面。
Table 2.25. Insertion.Top 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, content) |
constructor |
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<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>
繼承自 Abstract.Insertion
在給定元素最后一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的結(jié)束標(biāo)記的緊前面。
Table 2.26. Insertion.Bottom 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, content) |
constructor |
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<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>
繼承自 Abstract.Insertion
在給定元素結(jié)束標(biāo)記的后面插入HTML。
Table 2.27. Insertion.After 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, content) |
constructor |
element: 元素對(duì)象或id, content: 被插入的HTML |
繼承自 Abstract.Insertion. 創(chuàng)建一個(gè)可以幫助插入動(dòng)態(tài)內(nèi)容的對(duì)象。 |
下面的代碼
<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è)對(duì)象提供操作表單中的輸入項(xiàng)目的功能性方法。
Table 2.28. Field 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| clear(field1 [, field2 [, field3 [...]]]) |
instance |
fieldN: 元素對(duì)象或id |
清除傳入表單中項(xiàng)目元素的值。 |
| present(field1 [, field2 [, field3 [...]]]) |
instance |
fieldN: 元素對(duì)象或id |
只有在所有的表單項(xiàng)目都不為空時(shí)返回 true 。 |
| focus(field) |
instance |
fieldN: 元素對(duì)象或id |
移動(dòng)焦點(diǎn)到給定的表單項(xiàng)目。 |
| select(field) |
instance |
fieldN: 元素對(duì)象或id |
選擇支持項(xiàng)目值選擇的表單項(xiàng)目的值。 |
| activate(field) |
instance |
fieldN: 元素對(duì)象或id |
移動(dòng)焦點(diǎn)并且選擇支持項(xiàng)目值選擇的表單項(xiàng)目的值。 |
這個(gè)對(duì)象提供操作表單和他們的輸入項(xiàng)目的功能性方法。
Table 2.29. Form 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| serialize(form) |
instance |
form: 表單元素或id |
返回url參數(shù)格式的項(xiàng)目名和值的列表， 如'field1=value1&field2=value2&field3=value3'。 |
| getElements(form) |
instance |
form: 表單元素或id |
返回包含所有在表單中輸入項(xiàng)目的 Array 對(duì)象。 |
| getInputs(form [, typeName [, name]]) |
instance |
form: 表單元素或id, typeName: 輸入項(xiàng)目的類型, name: 輸入項(xiàng)目的名稱 |
返回一個(gè) Array 包含所有在表單中的 <input> 元素。 另外， 這個(gè)列表可以對(duì)元素的類型或名字屬性進(jìn)行過(guò)濾。 |
| disable(form) |
instance |
form: 表單元素或id |
使表單中的所有輸入項(xiàng)目無(wú)效。 |
| enable(form) |
instance |
form: 表單元素或id |
使表單中的所有輸入項(xiàng)目有效。 |
| focusFirstElement(form) |
instance |
form: 表單元素或id |
激活第一個(gè)表單中可視的，有效的輸入項(xiàng)目。 |
| reset(form) |
instance |
form: 表單元素或id |
重置表單。和調(diào)用表單對(duì)象的 reset() 方法一樣。 |
2.28. Form.Element 對(duì)象
這個(gè)對(duì)象提供表單對(duì)象中的可視和非可視元素的功能性方法。
Table 2.30. Form.Element 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| serialize(element) |
instance |
element: 表單元素或id |
返回元素的 名稱=值 對(duì), 如 'elementName=elementValue'。 |
| getValue(element) |
instance |
element: 表單元素或id |
返回元素的值。 |
2.29. Form.Element.Serializers 對(duì)象
這個(gè)對(duì)象提供了內(nèi)部使用的用來(lái)協(xié)助解析出表單元素的當(dāng)前值功能性方法。
Table 2.31. Form.Element.Serializers 對(duì)象
| 方法 |
類別 |
參數(shù) |
描述 |
| inputSelector(element) |
instance |
element: 一個(gè)帶有checked屬性的表單元素或id， 如 radio 或 checkbox。 |
返回帶有元素名稱和值的 Array , 如 ['elementName', 'elementValue'] |
| textarea(element) |
instance |
element: 一個(gè)帶有value屬性的表單元素或id， 如 textbox, button 或 password 項(xiàng)目。 |
返回帶有元素名稱和值的 Array , 如 ['elementName', 'elementValue'] |
| select(element) |
instance |
element: 一個(gè)<select> 元素對(duì)象或id。 |
返回帶有元素名稱和所有被選擇的選項(xiàng)的值或文本的 Array , 如 ['elementName', 'selOpt1 selOpt4 selOpt9'] |
2.30. Abstract.TimedObserver 類
這個(gè)類是用于其它監(jiān)聽一個(gè)元素的值(或者任何類中涉及的屬性)變化的類的基類，這個(gè)類像一個(gè)抽象類一樣被使用。
子類可以被創(chuàng)建來(lái)監(jiān)聽如輸入項(xiàng)目值，或style屬性，或表格的行數(shù)，或者其他任何對(duì)跟蹤變化相關(guān)的東西。
子類必須實(shí)現(xiàn)這個(gè)方法來(lái)決定什么才是被監(jiān)聽的元素的當(dāng)前值。
Table 2.32. Abstract.TimedObserver 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, frequency, callback) |
constructor |
element: 元素對(duì)象或id, frequency: 以秒為單位的間隔, callback: 當(dāng)元素改變的時(shí)候調(diào)用的方法。 |
創(chuàng)建一個(gè)監(jiān)聽元素的對(duì)象。 |
| registerCallback() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來(lái)開始監(jiān)聽那個(gè)元素。 |
| onTimerEvent() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被這個(gè)對(duì)象自己調(diào)用來(lái)周期性的檢查那個(gè)元素。 |
Table 2.33. Abstract.TimedObserver 類
| 屬性 |
類型 |
描述 |
| element |
Object |
被監(jiān)聽的元素對(duì)象。 |
| frequency |
Number |
每次檢查中的以秒為單位的時(shí)間間隔。 |
| callback |
Function(Object, String) |
只要元素改變這個(gè)方法就會(huì)被調(diào)用。 會(huì)接收到元素對(duì)象和新值作為參數(shù)。 |
| lastValue |
String |
元素被核實(shí)的最后一個(gè)值。 |
2.31. Form.Element.Observer 類
繼承自 Abstract.TimedObserver
Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來(lái)監(jiān)聽表單輸入項(xiàng)目的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒(méi)有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。否則的話使用 Form.Element.EventObserver 類代替。
Table 2.34. Form.Element.Observer 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, frequency, callback) |
constructor |
element: 元素對(duì)象或id, frequency: 以秒為單位的間隔, callback: 當(dāng)元素改變的時(shí)候調(diào)用的方法。 |
繼承自 Abstract.TimedObserver. 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
| getValue() |
instance |
(none) |
返回元素的值。 |
繼承自 Abstract.TimedObserver
Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來(lái)監(jiān)聽表單中任何數(shù)據(jù)項(xiàng)的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒(méi)有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。 否則的話使用類 Form.EventObserver 代替。
Table 2.35. Form.Observer 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](form, frequency, callback) |
constructor |
form: 表單對(duì)象或id, |
繼承自 Abstract.TimedObserver. 創(chuàng)建一個(gè)監(jiān)聽表單變化的對(duì)象。 |
| getValue() |
instance |
(none) |
返回所有表單數(shù)據(jù)的一系列值。 |
2.33. Abstract.EventObserver 類
這個(gè)類被用作其他一些類的基類，這些類具有在一個(gè)元素的值改變事件發(fā)生的時(shí)候執(zhí)行一個(gè)回調(diào)方法這樣的功能。
類 Abstract.EventObserver 的多個(gè)對(duì)象可以綁定到一個(gè)元素上，不是一個(gè)幫其他的擦出了，而是按照他們付給元素的順序執(zhí)行這些回調(diào)方法。
單選按鈕和復(fù)選框的觸發(fā)事件是 onclick ，而文本框和下拉列表框/下拉列表框的是 onchange 。
子類必須實(shí)現(xiàn)這個(gè)方法來(lái)決定什么才是被監(jiān)聽的元素的當(dāng)前值。
Table 2.36. Abstract.EventObserver 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, callback) |
constructor |
element: 元素對(duì)象或id, callback: 當(dāng)事件發(fā)生的時(shí)候調(diào)用的方法。 |
創(chuàng)建監(jiān)聽元素的對(duì)象。 |
| registerCallback() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被對(duì)象調(diào)用來(lái)把自己綁定到元素的事件上。 |
| registerFormCallbacks() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 被對(duì)象調(diào)用來(lái)把自己綁定到表單中的每一個(gè)數(shù)據(jù)項(xiàng)元素的事件上。 |
| onElementEvent() |
instance |
(none) |
這個(gè)方法通常不會(huì)被外部調(diào)用。 將被綁定到元素的事件上。 |
Table 2.37. Abstract.EventObserver 類
| 屬性 |
類型 |
描述 |
| element |
Object |
被監(jiān)聽的元素對(duì)象。 |
| callback |
Function(Object, String) |
只要元素改變就調(diào)用的方法。會(huì)接收到元素對(duì)象和新值作為參數(shù)。 |
| lastValue |
String |
元素被核實(shí)的最后一個(gè)值。 |
2.34. Form.Element.EventObserver 類
繼承自 Abstract.EventObserver
Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類，它在監(jiān)測(cè)到表單中數(shù)據(jù)項(xiàng)元素的值改變的相應(yīng)事件時(shí)候執(zhí)行一個(gè)回調(diào)方法。 如果元素沒(méi)有任何報(bào)告變化的事件，那么你可以使用 Form.Element.Observer 類代替。
Table 2.38. Form.Element.EventObserver 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](element, callback) |
constructor |
element: 元素對(duì)象或id, callback: 當(dāng)事件發(fā)生的時(shí)候調(diào)用的方法。 |
繼承自 Abstract.EventObserver。 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
| getValue() |
instance |
(none) |
返回元素的值。 |
2.35. Form.EventObserver 類
繼承自 Abstract.EventObserver
Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類，監(jiān)聽表單對(duì)象中包含的任何對(duì)象的任何變化，用元素的事件檢測(cè)值的變化。如果元素沒(méi)有任何報(bào)告變化的事件， 那么你可以使用 Form.Observer 類代替。
Table 2.39. Form.Element.EventObserver 類
| 方法 |
類別 |
參數(shù) |
描述 |
| [ctor](form, callback) |
constructor |
form: 元素對(duì)象或id, callback: 當(dāng)表單中任何數(shù)據(jù)項(xiàng)改變的時(shí)候調(diào)用的方法 |
繼承自 Abstract.EventObserver。 創(chuàng)建一個(gè)監(jiān)聽元素值屬性的對(duì)象。 |
| getValue() |
instance |
(none) |
返回所有表單數(shù)據(jù)的一系列值。 |
2.36. Position 對(duì)象 (預(yù)備文檔)
這個(gè)對(duì)象提供許多和元素位置相關(guān)的方法。
Table 2.40. Position 對(duì)象 (預(yù)備文檔)
| 方法 |
類別 |
參數(shù) |
描述 |
| prepare() |
instance |
(none) |
調(diào)整 deltaX 和 deltaY 屬性來(lái)協(xié)調(diào)在滾動(dòng)位置中的變化。 記得在頁(yè)面滾動(dòng)之后的任何調(diào)用的withinIncludingScrolloffset 之前調(diào)用這個(gè)方法。 |
| realOffset(element) |
instance |
element: 對(duì)象或id |
返回這個(gè)元素的正確滾動(dòng)偏差的 Array 對(duì)象， 包括所有影響元素的滾動(dòng)偏差。結(jié)果數(shù)組類似 [total_scroll_left, total_scroll_top] |
| cumulativeOffset(element) |
instance |
element: 對(duì)象或id |
回這個(gè)元素的正確滾動(dòng)偏差的 Array 對(duì)象， 包含任何被放置的父元素強(qiáng)加偏差。結(jié)果數(shù)組類似 [total_offset_left, total_offset_top] |
| within(element, x, y) |
instance |
element: 對(duì)象, x 和 y: 一個(gè)點(diǎn)的坐標(biāo) |
測(cè)試給定的點(diǎn)的坐標(biāo)是否在給定的元素的外部矩形范圍之內(nèi)。 |
| withinIncludingScrolloffsets(element, x, y) |
instance |
element: object, x and y: coordinates of a point |
|
| overlap(mode, element) |
instance |
mode: 'vertical' 或 'horizontal', element: 對(duì)象 |
在調(diào)用這個(gè)方法之前需要調(diào)用within() 。這個(gè)方法返回0.0到1.0之間的數(shù)字，來(lái)表示坐標(biāo)在元素重疊的分?jǐn)?shù)。 舉個(gè)例子，如果元素是一個(gè)邊長(zhǎ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: 元素對(duì)象或 id, target: 元素對(duì)象或id |
改變目標(biāo)元素的大小尺寸和位置與源元素的相同。 |
|