Prototype Study (转)

什么是Prototype

Prototype 是由 Sam Stephenson 开发的一个 Javascript 类库，也是其他框架的鼻祖。其对现有的部分 Javascript 对象比如 Object 、 Function 、 Dom 、 String 等进行扩展，并且对 Ajax 应用进行封装，借此提供了兼容标准的更加易于使用的类库，极大的方便开发人员快速创建具备高度交互性的 Web2.0 胖客户端应用程序。

(相关站点：http://www.prototypejs.org/ )

Prototype 最初的目标是应用于 Ruby 领域的，不过由于优秀的表现和完美的封装以及服务器语言无关性，现在已经被应用到各个领域，包括 Java 、 .NET 、 PHP 等。不过在 Prototype 的源码中，还是可以找到 Ruby 的影子，比如 Ruby 样式的 Array 对象枚举。

正如之前提到的， Prototype 是一个底层的远程调用包，虽然其仅仅是一个千余行的 Javascript 文件，但是它为其他框架提供了最底层的 Javascript 扩展和 Ajax 封装。其他 Javascript 程序库在其基础上构建了更加高级的功能和 UI 效果，比如 Script.aculo.us 。

Prototype 目前的最新版本是1.5 ，其官方网站提供了最新版本的下载，包括 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 程序库：

XML/HTML代码

<
script
 
language
=
"javascript"
 
type
=
"text/javascript"
 
src
=
"prototype-1.4.0.js"
>
</
script
>

 

2.3.1 $ 系列函数体验

在 Prototype 出现之前，我们使用这种方式定位页面上的某个 HTML 元素及其值：

JavaScript代码

var
 myElement = document.getElementById(“your element
's id”);
var myValue = document.getElementById(“your element'
s id”).value;

现在，可以分别使用 $() 函数和 $F() 函数来代替，例程 1 展示 $() 和 $F() 函数的用法：

JavaScript代码

var
 myElement = $(“your element
's id”);
var myValue = $F(“your element'
s id”);

 

例程 1 ： $() 和 $F() 函数的用法

XML/HTML代码

<
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() 函数的用法

XML/HTML代码

<
script
 
language
=
"javascript"
 
type
=
"text/javascript"
>
/*$A 函数体验 */
function do$ATest() {
    var 
nodeList
 = 
document
.getElementsByTagName("input");
    var 
nodeArray
 = $A(nodeList);
    var 
message
 = 
" 全部 input 控件： "
;

    nodeArray.each(
        function(node) {
            message += node.type + "|" + node.name + "|" + node.value + "";
        }
    );
    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

JavaScript代码

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

JavaScript代码

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() 方法遍历集合

JavaScript代码

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 Prototype 的Ajax体验

Prototype 将 Ajax 应用封装为 Ajax.Request 和 Ajax.Update 类。使用这两个类，可以应付大部分的 Ajax 应用，而且不需要烦琐的实例化 XHR 、监控请求状态的过程。

假设我们将书籍的信息保存在一个 XML 文档中，如例程 6 所示。

例程 6 ：保存书籍信息的 XML 文档

XML/HTML代码

<?
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 文档内容

XML/HTML代码

<
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 获取服务器的响应数据

XML/HTML代码

<
script
 
language
=”javascript” 
type
=”text/javascript”
>
/*Ajax.Update 类体验 */
function doAjaxUpdate() {
    var 
url
 = 
"response.php"
;
    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 所请求的 PHP 文件，其简单的打印出加粗后的“ Ajax.Update ”字样。

PHP代码

<?php
echo
 
'<strong>Ajax.Update</strong>'
;
?>