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