prototype.js參考

JavaScript類擴(kuò)展

prototype.js 類庫實(shí)現(xiàn)強(qiáng)大功能的一種途徑是擴(kuò)展已有的JavaScript 類。

對 Object的擴(kuò)展

對Number的擴(kuò)展

下面的例子用提示框顯示0-9。

<script>
function demoTimes(){
var n = 10;
n.times(function(index){
alert(index);
});
/***************************
* you could have also used:
*           (10).times( .... );
***************************/
}
</script>
<input type=button value="Test Number.times()" onclick="demoTimes()">

對 Function擴(kuò)展

讓我們看看如何運(yùn)用這些擴(kuò)展。

<input type=checkbox id=myChk value=1> Test?
<script>
//declaring the class
var CheckboxWatcher = Class.create();
//defining the rest of the class implementation
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>

對String的擴(kuò)展

對  Array的擴(kuò)展

因?yàn)閍rray擴(kuò)展于enumerable，所以所有enumberable對象的函數(shù)，array都是可以使用的，除此之外，下面的這些也是已經(jīng)實(shí)現(xiàn)了的。

document DOM擴(kuò)展

Event擴(kuò)展

下面代碼演示如何給window添加一個(gè)load事件處理函數(shù)。

<script>
Event.observe(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>

在prototype.js中定義新的對象和類

另一個(gè)這個(gè)程序包幫助你的地方就是提供許多既支持面向?qū)ο笤O(shè)計(jì)理念又有共通功能的許多對象。

The PeriodicalExecuter object

這個(gè)對象提供一定間隔時(shí)間上重復(fù)調(diào)用一個(gè)方法的邏輯。

The Prototype object

Prototype 沒有太重要的作用，只是聲明了該程序包的版本 。

The Enumerable object

Enumberable對象能夠已更優(yōu)雅的方式實(shí)現(xiàn)對列表樣式的結(jié)構(gòu)進(jìn)行枚舉。

很多其它的對象通過擴(kuò)展自Enumberable對象來得到這些有用的接口。

The Hash object

 Hash對象實(shí)現(xiàn)一種Hash結(jié)構(gòu)，也就是一個(gè)Key:Value對的集合。

Hash中的每個(gè)Item是一個(gè)有兩個(gè)元素的array，前一個(gè)是Key，后一個(gè)是Value，每個(gè)Item也有兩個(gè)不需加以說明的屬性,key和value。

The ObjectRange class

繼承自  Enumerable

用上、下邊界描述一個(gè)對象區(qū)域。

The Class object

在這個(gè)程序包中 Class 對象在聲明其他的類時(shí)候被用到 。用這個(gè)對象聲明類使得新類支持 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

The Ajax object

這個(gè)對象被用作其他提供AJAX功能的類的根對象。 

The Ajax.Responders object

繼承自 Enumerable

這個(gè)對象維持一個(gè)在Ajax相關(guān)事件發(fā)生時(shí)將被調(diào)用的對象的列表。比如，你要設(shè)置一個(gè)全局鉤子來處理Ajax操作異常，那么你就可以使用這個(gè)對象。

The Ajax.Base class

這個(gè)類是其他在Ajax對象中定義的類的基類。

The Ajax.Request class

繼承自 Ajax.Base

封裝 AJAX 操作

The options argument object

An important part of the AJAX operations is the options argument. There's no options class per se. Any object can be passed, as long as it has the expected properties. It is common to create anonymous objects just for the AJAX calls.

The Ajax.Updater class

繼承自 Ajax.Request

當(dāng)請求的url返回一段HTML而你想把它直接放置到頁面中一個(gè)特定的元素的時(shí)候被用到。 如果url的返回<script> 的塊并且想在接收到時(shí)就執(zhí)行它的時(shí)候也可以使用該對象。含有腳本的時(shí)候使用 evalScripts 選項(xiàng)。

The Ajax.PeriodicalUpdater class

繼承自Ajax.Base

這個(gè)類重復(fù)生成并使用 Ajax.Updater 對象來刷新頁面中的一個(gè)元素?；蛘邎?zhí)行 Ajax.Updater 可以執(zhí)行的其它任務(wù)。更多信息參照 Ajax.Updater 參考 。

The Element object

這個(gè)對象提供在操作DOM中元素時(shí)使用的功能性方法。

The Element.ClassNames class

繼承自  Enumerable

在一個(gè)對象中表示CSS class names的集合。

The Abstract object

這個(gè)對象是這個(gè)程序包中其他類的根。它沒有任何屬性和方法。在這個(gè)對象中定義的類可以被視為傳統(tǒng)的抽象類。

The Abstract.Insertion class

這個(gè)類被用作其他提供動態(tài)內(nèi)容插入功能的類的基類，它像一個(gè)抽象類一樣被使用。

The Insertion object

這個(gè)對象是其他類似功能的根。它沒有任何屬性和方法。在這個(gè)對象中定義的類仍然可以被視為傳統(tǒng)的抽象類。

The Insertion.Before class

繼承自 Abstract.Insertion

在給定元素開始標(biāo)記的前面插入HTML。

下面的代碼
<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>

The Insertion.Top class

繼承自 Abstract.Insertion

在給定元素第一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的開始標(biāo)記的緊后面。

下面的代碼
<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>

The Insertion.Bottom class

Inherits from Abstract.Insertion

在給定元素最后一個(gè)子節(jié)點(diǎn)位置插入 HTML。內(nèi)容將位于元素的結(jié)束標(biāo)記的緊前面。

The following code

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Bottom('person', " What's up?"); </script>

Will change the HTML to

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

The Insertion.After class

Inherits from Abstract.Insertion

在給定元素結(jié)束標(biāo)記的后面插入HTML。

The following code

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.After('person', ' Are you there?'); </script>

Will change the HTML to

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?

The Field object

這個(gè)對象提供操作表單中的輸入項(xiàng)目的功能性方法。

The Form object

這個(gè)對象提供操作表單和他們的輸入元素的功能性方法。

The Form.Element object

這個(gè)對象提供表單對象中的可視和非可視元素的功能性方法。

The Form.Element.Serializers object

這個(gè)對象提供了內(nèi)部使用的用來協(xié)助解析出表單元素的當(dāng)前值的一些有用的方法。

The Abstract.TimedObserver class

這個(gè)類是用于其它監(jiān)聽一個(gè)元素的值(或者任何類中涉及的屬性)變化的類的基類，這個(gè)類像一個(gè)抽象類一樣被使用。

子類可以被創(chuàng)建來監(jiān)聽如輸入項(xiàng)目值，或style屬性，或表格的行數(shù)，或者其他任何對跟蹤變化相關(guān)的東西。

子類必須實(shí)現(xiàn)這個(gè)方法來決定什么才是被監(jiān)聽的元素的當(dāng)前值。

The Form.Element.Observer class

繼承自 Abstract.TimedObserver

Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來監(jiān)聽表單輸入項(xiàng)目的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。否則的話使用 Form.Element.EventObserver 類代替。

The Form.Observer class

繼承自 Abstract.TimedObserver

Abstract.TimedObserver 的一個(gè)實(shí)現(xiàn)類用來監(jiān)聽表單中任何數(shù)據(jù)項(xiàng)的值的變化。當(dāng)你想監(jiān)聽一個(gè)沒有帶報(bào)告值變化事件的元素的時(shí)候使用這個(gè)類。 否則的話使用類Form.EventObserver 代替。

The Abstract.EventObserver class

這個(gè)類被用作其他一些類的基類，這些類具有在一個(gè)元素的值改變事件發(fā)生的時(shí)候執(zhí)行一個(gè)回調(diào)方法這樣的功能。

類 Abstract.EventObserver 的多個(gè)對象可以綁定到一個(gè)元素上，不是一個(gè)幫其他的擦出了，而是按照他們付給元素的順序執(zhí)行這些回調(diào)方法。

單選按鈕和復(fù)選框的觸發(fā)事件是 onclick ，而文本框和下拉列表框/下拉列表框的是 onchange 。 

The Form.Element.EventObserver class

繼承自 Abstract.EventObserver

Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類，它在監(jiān)測到表單中數(shù)據(jù)項(xiàng)元素的值改變的相應(yīng)事件時(shí)候執(zhí)行一個(gè)回調(diào)方法。 如果元素沒有任何報(bào)告變化的事件，那么你可以使用 Form.Element.Observer 類代替。

The Form.EventObserver class

繼承自 Abstract.EventObserver

Abstract.EventObserver 的一個(gè)實(shí)現(xiàn)類，監(jiān)聽表單對象中包含的任何對象的任何變化，用元素的事件檢測值的變化。如果元素沒有任何報(bào)告變化的事件， 那么你可以使用Form.Observer 類代替。

Position 對象 (預(yù)備文檔)

這個(gè)對象提供許多和元素位置相關(guān)的方法。

http://www.cnblogs.com/thinhunan/archive/2006/04/01/DeveloperNotesForPrototype.html