什么是Prototype
Prototype 是由 Sam Stephenson 開發(fā)的一個 Javascript 類庫，也是其他框架的鼻祖。其對現(xiàn)有的部分 Javascript 對象比如 Object 、 Function 、 Dom 、 String 等進(jìn)行擴(kuò)展，并且對 Ajax 應(yīng)用進(jìn)行封裝，借此提供了兼容標(biāo)準(zhǔn)的更加易于使用的類庫，極大的方便開發(fā)人員快速創(chuàng)建具備高度交互性的 Web2.0 胖客戶端應(yīng)用程序。
Prototype 最初的目標(biāo)是應(yīng)用于 Ruby 領(lǐng)域的，不過由于優(yōu)秀的表現(xiàn)和完美的封裝以及服務(wù)器語言無關(guān)性，現(xiàn)在已經(jīng)被應(yīng)用到各個領(lǐng)域，包括 Java 、 .NET 、 PHP 等。不過在 Prototype 的源碼中，還是可以找到 Ruby 的影子，比如 Ruby 樣式的 Array 對象枚舉。
正如之前提到的， Prototype 是一個底層的遠(yuǎn)程調(diào)用包，雖然其僅僅是一個千余行的 Javascript 文件，但是它為其他框架提供了最底層的 Javascript 擴(kuò)展和 Ajax 封裝。其他 Javascript 程序庫在其基礎(chǔ)上構(gòu)建了更加高級的功能和 UI 效果，比如 Script.aculo.us 。
Prototype 目前的最新版本是 1.4 ， 1.5 也已經(jīng)提供了 pre 版本，其官方網(wǎng)站提供了最新版本的下載，包括 zip 包、 js 文件和 Subvision 源碼。不過和其他版本一樣， Prototype 官方網(wǎng)站并未提供完整的參考文檔，開發(fā)者只能通過閱讀源碼掌握其功能。可喜的是，網(wǎng)上已經(jīng)流傳著不少關(guān)于 Prototype 源碼解讀和使用的文檔，這在一定程度上彌補(bǔ)了 Prototype 官方文檔不足的遺憾。
2.2
軟件組織架構(gòu)以及應(yīng)用
Prototype 主要包括三個內(nèi)容：一是提供了一些全局性的函數(shù)，替代原先煩瑣重復(fù)的代碼；二是對現(xiàn)有 Javascript 、 DOM 對象的擴(kuò)展，提供訪問公共函數(shù)的捷徑；三是對 Ajax 應(yīng)用的封裝，使得開發(fā) Ajax 應(yīng)用更加容易和快速。
全局性的函數(shù)，比較有代表性的 $ 系列函數(shù)和 Try.these() 函數(shù)。
$() 函數(shù)是用于替代在 DOM 中頻繁使用的 document.getElementById() 方法的，其返回參數(shù)傳入的 id 所指向的元素。不過，其允許傳入多個 id 作為參數(shù)，然后返回一個其 id 指向的元素的 Array 對象。
$F() 函數(shù)則用于返回任何表單輸入控件的值，比如文本框、文本區(qū)域、下拉列表，其也是以元素的 id 或者元素本身作為參數(shù)。不過，必須注意的是， id 所指向的元素必須支持 value 屬性，比如文本框。如果 id 指向一個按鈕，那自然就得不到所要的 value 值。
$A() 函數(shù)能夠?qū)⑵浣邮艿降娜魏慰擅杜e列表轉(zhuǎn)化成為一個 Array 對象，比如將 string 字符串轉(zhuǎn)化成 Array 數(shù)組。 $H() 函數(shù)則將傳入的對象轉(zhuǎn)換成一個可枚舉的和聯(lián)合數(shù)組類似的 Hash 對象。 $R() 函數(shù)是 new ObjectRange(lowBound, upperBound, excludeBounds) 的縮寫和替代。
Try.thiese() 方法以一系列的函數(shù)作為參數(shù)，按照順序一個一個的執(zhí)行，返回第一個成功執(zhí)行的函數(shù)的返回值。這使得想調(diào)用不同的方法直到其中一個成功執(zhí)行的需求變得容易和直觀。否則我們就得變通的用 if else 去判斷了。典型的比如在保證瀏覽器兼容的情況下實例化 XHR 對象。
Prototype 對 Javascript 的 Object 、 Number 、 Function 、 String 、 Array 、 Event 等對象進(jìn)行了擴(kuò)展，創(chuàng)建了一些新的對象和類，并在此基礎(chǔ)上提供了很多有用的公共函數(shù)，比如 each() 、 any() 、 collect() 等。
Prototype 另外一個值得稱道的是對 Ajax 的封裝和簡化，這也是 Prototype 吸引我們的另外一個重要之處。 Prototype 的 Ajax 功能主要由 Ajax.Request 和 Ajax.Updater 兩個類完成。
在沒有使用 Prototype 之前，我們需要創(chuàng)建 XHR 對象實例并且異步的跟蹤其進(jìn)程，在回調(diào)函數(shù)中使用 DOM 解析其返回的響應(yīng)數(shù)據(jù)并且處理后更新頁面。而 Ajax.Request 類提供了完成這一系列步驟的捷徑。我們只需要將目標(biāo) URL 、 URL 參數(shù)、 http 請求方法類型、回調(diào)函數(shù)名稱等一股腦的傳遞給 Ajax.Request 類即可。
Ajax.Request 類是針對需要解析服務(wù)器返回的響應(yīng)數(shù)據(jù)的情況。而如果服務(wù)器返回的信息已經(jīng)是 HTML 格式，只需要填充到某個 HTML 控件中，則可以使用 Ajax.Updater 類。其調(diào)用 innerHTML 直接將 HTML 代碼填充到指定的 HTML 控件內(nèi)部。
難得可貴的是，以往我們需要判斷 XHR 的 readyState 和 status 值來獲取 http 請求的狀態(tài)并且作出相應(yīng)的處理，以便應(yīng)付請求失敗的情況；而 AjaxRequest 和 Ajax.Updater 類提供了 onComplete 來替代這些煩瑣的判斷，其只需要簡單的在請求的選項參數(shù)中的名為 onXXXX 屬性 / 方法中提供自定義的方法對象即可。
接下來，我們使用 Prototype1.4 ，列舉一二，體驗一下 Prototype 的主要功能及其所帶來的便捷。
2.3
循序漸近
從 Prototype 官方網(wǎng)站
http://prototype.conio.net/
下載最新的開發(fā)包 prototype-1.4.0.js ，放到應(yīng)用程序目錄中，通過 <script> 代碼引入 Prototype 程序庫：
<script language="javascript" type="text/javascript" src="prototype-1.4.0.js"></script>
2.3.1
$
系列函數(shù)體驗
在 Prototype 出現(xiàn)之前，我們使用這種方式定位頁面上的某個 HTML 元素及其值：
var myElement = document.getElementById(“your element's id”);
var myValue = document.getElementById(“your element's id”).value;
現(xiàn)在，可以分別使用 $() 函數(shù)和 $F() 函數(shù)來代替，例程 1 展示 $() 和 $F() 函數(shù)的用法：
var myElement = $(“your element's id”);
var myValue = $F(“your element's id”);
例程 1
： $()
和 $F()
函數(shù)的用法
<p>Username:<input type="text" name="txtUsername" value="Jimmy"></p>
<p>
<input type="button" name="$Test" value=" $ " onClick="window.alert($('txtUsername'))">
<input type="button" name="$FTest" value=" $F " onClick="window.alert($F('txtUsername'))">
</p>
$A() 函數(shù)則將其接收到的可枚舉的任何參數(shù)轉(zhuǎn)化成為一個 Array 對象。結(jié)合 Prototype 對 Array 的擴(kuò)展， $A() 能夠提供更加強(qiáng)大的功能。例程 2 使用 $A() 函數(shù)獲取頁面中的全部 input 類型的控件，并使用擴(kuò)展后的 each() 函數(shù)遍歷全部的控件。
例程 2
： $A()
函數(shù)的用法
<script language="javascript" type="text/javascript">
/*$A 函數(shù)體驗 */
function do$ATest() {
var nodeList = document.getElementsByTagName("input");
var nodeArray = $A(nodeList);
var message = "
全部 input 控件： \r\n";
nodeArray.each(
function(node) {
message += node.type + "|" + node.name + "|" + node.value + "\r\n";
}
);
window.alert(message);
}
</script>
<input type="button" name="$ATest" value=" $A " onClick="do$ATest()">
2.3.2
Try.these()
函數(shù)的妙用
我們知道， XHR 是 Ajax 的核心之一。但是各個瀏覽器對 XHR 的實現(xiàn)不同， IE 瀏覽器的各個版本對 XHR 的支持也有所差異。為了保證 Ajax 的瀏覽器兼容性，在實例化 XHR 對象的時候，通常要使用 try/catch 對兼容性進(jìn)行判斷。比如例程 3 所示。
例程 3
：使用 try/catch
塊實例化 XHR
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
if(xhr.overrideMimeType) xhr.overrideMimeType(“text/xml”);
}
else if(window.ActiveXObject) {
try {
xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e) {
try {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){}
}
}
而現(xiàn)在，使用 Try.these() 函數(shù)，這些煩瑣的過程變得異常簡單。
例程 4
：使用 Try.these()
函數(shù)實例化 XHR
function doInitialXHR() {
return Try.these(
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')},
function() {return new XMLHttpRequest()}
) || false;
}
2.3.3
對集合類的遍歷
之前提過， Prototype 最初的應(yīng)用領(lǐng)域是 Ruby 。 Ruby 為遍歷集合中的元素提供了一系列快捷的方法，使得執(zhí)行維護(hù)、查找、收集、刪除其中的元素更加快速。 Prototype 新建了一個 Enumerable 對象，為 Javascript 提供類似 Ruby 的功能。
在 Ruby 、 .NET 語言中，都支持使用 each 關(guān)鍵詞對集合中的元素進(jìn)行遍歷。在 Enumberable 對象中，還有很多方法比如 all() 、 any() 、 collect() 等都是基于 each() 方法實現(xiàn)的。所以， each() 方法是操作集合元素的基礎(chǔ)。
each() 方法使用 iterator 依次獲取集合中的每個元素，并將其作為匿名函數(shù)的參數(shù)；也可以在該匿名函數(shù)中加上可選參數(shù) index ，獲取當(dāng)前元素的索引值。其實在例程 2 中，我們已經(jīng)使用了 each() 方法。
例程 5 使用 each() 方法，對一個保存貨物價格的數(shù)組進(jìn)行遍歷，顯示價格及其索引值。
例程 5
：使用 each()
方法遍歷集合
function doEachTest() {
var prices = [100.2, 445, 552.3, 56.0];
prices.each(
function(price, index) {
window.alert("Value:" + price + "| Index:" + index);
}
);
}
2.3.4
P
rototype
的
Ajax體驗
Prototype 將 Ajax 應(yīng)用封裝為 Ajax.Request 和 Ajax.Update 類。使用這兩個類，可以應(yīng)付大部分的 Ajax 應(yīng)用，而且不需要煩瑣的實例化 XHR 、監(jiān)控請求狀態(tài)的過程。
假設(shè)我們將書籍的信息保存在一個 XML 文檔中，如例程 6 所示。
例程 6
：保存書籍信息的 XML
文檔
<?xml version="1.0" encoding="gb2312"?>
<books>
<book>
<title>Ajax bible</title>
<pages>500</pages>
</book>
<book>
<title>Build with Ant</title>
<pages>632</pages>
</book>
<book>
<title>Google</title>
<pages>934</pages>
</book>
</books>
現(xiàn)在，我們使用 Ajax.Request 類去獲取這個 XML 文檔的內(nèi)容，并將其顯示出來。例程 7 展示了這一過程。
例程 7
：使用 Ajax.Request
獲取 XML
文檔內(nèi)容
<script language=”javascript” type=”text/javascript”>
/*Ajax.Request 類體驗 */
function doAjaxRequest() {
var url = "books.xml";
var myAjax = new Ajax.Request(
url,
{
method:"get",
onComplete:showResponse
}
);
}
/*Ajax.Request 類回調(diào)函數(shù) */
function showResponse(request) {
window.alert(request.responseText);
}
</script>
<input type="button" name="ajaxRequest" value="ajaxRequest" onClick="doAjaxRequest()">
圖 1 展示了使用 Ajax.Request 后所獲取的 books.xml 文檔內(nèi)容。
圖 1 使用 Ajax.Request 后所獲取的 books.xml 文檔內(nèi)容
例程 7 中， onComplete 指定的 showResponse 函數(shù)其實是 Ajax 的回調(diào)函數(shù)，通常在這個回調(diào)函數(shù)中完成對響應(yīng)數(shù)據(jù)的解析和顯示。而如果服務(wù)器端返回的是已經(jīng)格式化后的 HTML 代碼（這點在 Ruby 中很流行），則可以使用 Ajax.Updater 。例程 8 使用 Ajax.Updater 將服務(wù)器的響應(yīng)數(shù)據(jù)填充到指定的 div 中。圖 2 展示了使用 Ajax.Updater 的執(zhí)行效果。
例程 8
：使用 Ajax.Updater
獲取服務(wù)器的響應(yīng)數(shù)據(jù)
<script language=”javascript” type=”text/javascript”>
/*Ajax.Update 類體驗 */
function doAjaxUpdate() {
var url = "response.jsp";
var pars = "field=all&show=true";
var myAjax = new Ajax.Updater(
"divContent",
url,
{
method:"get",
parameters:pars
}
);
</script>
<input type="button" name="ajaxUpdate" value="ajaxUpdate" onClick="doAjaxUpdate()">
<p><div id="divContent"></div></p>
圖 2 使用 Ajax.Updater 的執(zhí)行效果
例程 9 是例程 8 所請求的 JSP 文件。其簡單的打印出加粗后的“ Ajax.Update ”字樣。
例程 9
：
<%@ page contentType="text/html; charset=gb2312"
language="java" import="java.sql.*" errorPage="" %>
<%="<strong>Ajax.Update</strong>"%>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
