快捷導(dǎo)航

prototype 1.5相關(guān)知識(shí)及他人筆記

更新時(shí)間：2006年12月16日 00:00:00 作者：

一直沒有沒有時(shí)間看prototype,現(xiàn)在好了，已經(jīng)更新到了1.5 pre1,呵呵,強(qiáng)大的功能不得不學(xué)習(xí)啊,這個(gè)是提升自己JS能力的又一個(gè)捷徑.

1. Prototype是什么?
或許你還沒有用過它， 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ò)展的非官方參考。

2. 通用性方法
這個(gè)程序包里面包含了許多預(yù)定義的對(duì)象和通用性方法。編寫這些方法的明顯的目的就是為了減少你大量的重復(fù)編碼和慣用法。

從Prototype1.5.x版本開始，你可以更方便的如下面代碼一樣操作DOM對(duì)象了:

程序代碼

var ele = $("myelement");
ele.hide(); //隱藏DOM對(duì)象對(duì)比從前的版本var ele = $("myelement");
Element.hide(ele); //隱藏DOM對(duì)象

這樣的改變有什么益處呢？我覺得一來是更面向?qū)ο罅耍砭褪潜阌趯鞩DE里的代碼提示。

2.1. 使用 $()方法
$() 方法是在DOM中使用過于頻繁的 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.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í)候，它變得非常有用。

2.2. 使用$F()方法
$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>

2.3. 使用Try.these()方法
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>

3. Ajax 對(duì)象
上面提到的共通方法非常好，但是面對(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邏輯的類。我們來看看它們的一些。

3.1. 使用 Ajax.Request類
如果你不使用任何的幫助程序包，你很可能編寫了整個(gè)大量的代碼來創(chuàng)建XMLHttpRequest對(duì)象并且異步的跟蹤它的進(jìn)程，然后解析出響應(yīng) 然后處理它。當(dāng)你不需要支持多于一種類型的瀏覽器時(shí)你會(huì)感到非常的幸運(yùn)。

為了支持 AJAX 功能。這個(gè)包定義了 Ajax.Request 類。

假如你有一個(gè)應(yīng)用程序可以通過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 來決定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è)不同階段：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)用來處理結(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ì)象。

我們的例子沒有用任何有趣的方式處理這個(gè) XML響應(yīng)，我們只是把這段XML放進(jìn)了一個(gè)文本域里面。對(duì)這個(gè)響應(yīng)的一個(gè)典型的應(yīng)用很可能就是找到其中的想要的信息，然后更新頁(yè)面中的某些元素，或者甚至可能做某些XSLT轉(zhuǎn)換而在頁(yè)面中產(chǎn)生一些HTML。

3.2. 使用 Ajax.Updater 類
如果你的服務(wù)器的另一端返回的信息已經(jīng)是HTML了，那么使用這個(gè)程序包中 Ajax.Updater 類將使你的生活變得更加得容易。用它你只需提供哪一個(gè)元素需要被AJAX請(qǐng)求返回的HTML填充就可以了，例子比我寫說明的更清楚。

程序代碼

<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。我們來稍稍修改一下代碼來描述如何在客戶端處理服務(wù)器段錯(cuò)誤成為可能。

我們將加入更多的選項(xiàng)，指定處理錯(cuò)誤的一個(gè)方法。這個(gè)是用 onFailure 選項(xiàng)來完成的。

我們也指定了一個(gè) placeholder 只有在成功請(qǐng)求之后才會(huì)被填充。為了完成這個(gè)目的我們修改了第一個(gè)參數(shù)從一個(gè)簡(jiǎn)單的元素id到一個(gè)帶有兩個(gè)屬性的對(duì)象， success (一切OK的時(shí)候被用到) 和 failure (有地方出問題的時(shí)候被用到) 在下面的例子中沒有用到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屬性。
最近做otalk,開始是基于prototype1.4的,后來因?yàn)槲壹由狭藄criptaculous 1.6.1,她要求prototype的版本是1.5的,所以就升級(jí)到了1.5,看著demo學(xué)習(xí)起了scriptaculous的用法.
用法稍后整理,因?yàn)樵谑褂眠^程中很多次效果都不讓自己滿意,想看代碼又看不明白,經(jīng)過一次折磨,我下定決心,一定要把scriptaculous和prototype的代碼看明白!
這里作為我的學(xué)習(xí)筆記,可能沒有什么順序了邏輯,等到學(xué)習(xí)完,最后整理
首先是定義類  看著笑笑老師的一些介紹,自己看是試驗(yàn)起來,往往很多東西看了覺著明白,其實(shí)還是差很多的
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
定義了一個(gè)class函數(shù)作為創(chuàng)建類的模版或者說是原型
使用方法
var llinzzi= Class.create();
llinzzi.prototype = {
    initialize:function(){
          document.write('實(shí)例被創(chuàng)建');
    },
    fun1:function(){document.write('方法被實(shí)例調(diào)用');}
}
var linChild = new llinzzi();
運(yùn)行,輸出'實(shí)例被創(chuàng)建'說明initialize是創(chuàng)建實(shí)例的時(shí)候被調(diào)用的
回顧 Class代碼中
    return function() {
      this.initialize.apply(this, arguments);
    }
看出,當(dāng)執(zhí)行create方法時(shí),就開始調(diào)用.
linChild.fun1();
輸出'方法被實(shí)例調(diào)用',fun1方法被成功調(diào)用
就是當(dāng)采用了prototype的Class.create();方法創(chuàng)建對(duì)象的時(shí)候,initialize作為特殊的方法,在創(chuàng)建實(shí)例的時(shí)候被執(zhí)行,用以初始化.
續(xù)承
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
用法
Object.extend(目標(biāo),源);
讓我產(chǎn)生奇怪的是scriptaculous中的一段代碼
    var options = Object.extend({
      greedy:     true,
      hoverclass: null,
      tree:       false
    }, arguments[1] || {});
既然是定義一個(gè)options為什么還要用Object.extend方法
直接
var options ={
      greedy:     true,
      hoverclass: null,
      tree:       false
}
不就行了么?等等,出現(xiàn)問題了.后面還有arguments[1] || {},這應(yīng)該是目標(biāo),目標(biāo)是函數(shù)的參數(shù),分析下,獲取參數(shù),如果沒有這個(gè)參數(shù)的時(shí)候則為{}就是恐,如果有的話,相比也是{hoverclass:'xx'}的格式,哦,原來定義options也不是這么簡(jiǎn)單的,先看有沒有參數(shù),無論有沒有,利用Object.extend方法,把參數(shù)中的對(duì)象追加或覆蓋到前面的{     greedy:     true,      hoverclass: null,      tree:       false}中,如果參數(shù)是無,則相當(dāng)簡(jiǎn)單的上面的 var options = {};了但,如果參數(shù)中有{hoverclass:'abc'}呢?這時(shí)候覆蓋了原來的hoverclass的值null,然后看Object.extend方法返回值就是第一個(gè)參數(shù)被覆蓋后的全部的值
不得不佩服,一段一句進(jìn)行定義,同時(shí)有設(shè)置了默認(rèn)值.
越看越有意思,繼續(xù)看下去