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.6,其官方网站提供了最新版本的下载,包括 zip 包、 js 文件和 Subvision 源码。不过和其他版本一样, Prototype 官方网站并未提供完整的参考文档,开发者只能通过阅读源码掌握其功能。可喜的是,网上已经流传着不少关于 Prototype 源码解读和使用的文档,这在一定程度上弥补了 Prototype 官方文档不足的遗憾。
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 属性 / 方法中提供自定义的方法对象即可。
在 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">
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()">
我们知道, 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;
}
对集合类的遍历
之前提过, 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);
}
);
}
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 文档内容。
使用 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>
Prototype 官方网站 http://prototype.conio.net/
分享到:
相关推荐
Prototype 对 JavaScript 的基础对象进行了扩展,包括 Object、Function、DOM、String 等,使得这些对象更加易用和强大。此外,它还对 AJAX 应用进行了高度封装,让开发人员可以更快速地构建具有高度交互性的 Web2.0...
《Prototype入门》 Prototype.js 是一个著名的JavaScript库,由Sam Stephenson编写,它极大地扩展了JavaScript的功能,并且对Ajax提供了良好的支持。这个库在Web开发领域具有很高的实用性和学习价值,特别适合B/S...
这个"Prototype Ajax学习范例"提供了一系列实例,旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML),是一种在无需刷新整个网页的情况下...
这个“prototype从入门到精通”的教程涵盖了从基础概念到高级特性的全面学习路径,旨在帮助开发者快速掌握并精通Prototype框架。 一、Prototype基础知识 1. **对象扩展**:Prototype的核心特性之一就是对...
在JavaScript中,Prototype是一个核心概念,它涉及到对象的继承机制。Prototype学习笔记(一)(二...通过阅读Prototype学习笔记和实践相关代码,开发者可以进一步提升自己的技能,为构建复杂的应用程序打下坚实基础。
而`Object.prototype`是最基础的原型对象,所有其他对象都直接或间接地继承自它。 接下来,`prototype`上的方法可以被所有实例共享,这有助于节省内存。例如,如果我们在`Person.prototype`上定义了一个`sayHello`...
### Prototype.js学习从简单开始:元素定位与DOM操作 #### 引言 随着Web开发的不断进化,Ajax技术成为提升用户体验的重要工具。Prototype.js作为一款轻量级的JavaScript框架,以其简洁的API和广泛的适用性,成为了...
同时,尽管Prototype提供了一些基础的DOM操作,但也可以与其他JavaScript库(如jQuery、React等)一起使用,以获取更全面的功能支持。 总的来说,Prototype设计模式和Prototype库是JavaScript开发中非常重要的概念...
Prototype 是一个轻量级的JavaScript框架,它增强了JavaScript的基础功能,简化了DOM操作,并提供了丰富的Ajax工具。其核心理念是通过扩展JavaScript的基本类型和对象,提供更加面向对象的编程体验。 2. **DOM ...
1. **Prototype库基础**:Prototype库提供了一系列的JavaScript扩展,包括类、对象、数组、字符串和函数的增强,以及DOM操作、事件处理、Ajax请求等工具。 2. **类与对象**:Prototype通过模拟面向对象编程的概念,...
Prototype是Adam Slovik和Sam Stephenson在2005年开发的,它的目标是通过提供类、对象继承、数组操作、DOM处理等高级功能,来增强JavaScript的基础能力。1.6.0是这个库的一个稳定版本,发布于2007年左右,当时Web...
这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握Prototype框架的开发者们的重要资源。 Prototype 1.6中文手册: 手册详细介绍了Prototype框架的1.6版本,这是一个非常...
这些文件可能按照主题或功能分类,帮助学习者逐步深入,从基础到进阶,全面掌握Prototype的使用。 在学习Prototype时,你可以期待以下内容: 1. **基础概念**:理解Prototype的核心理念,如其对JavaScript原生对象...
这个资源包含了一份PDF格式的"Prototype中文开发手册"和一个CHM格式的"Prototype帮助文档",对于想要深入学习Prototype的人来说,是非常宝贵的参考资料。 首先,我们来探讨Prototype的基础知识。Prototype的核心...
### Prototype框架:深入理解与应用 #### 一、概述 **Prototype**是一个旨在...尽管如此,Prototype在历史上的贡献及其对Web开发领域的影响是不可忽视的,它为后来的框架和技术奠定了基础,推动了Web开发技术的进步。
- **在线教程**:网络上有很多关于Prototype的免费教程,适合初学者快速入门。 - **社区论坛**:参与Prototype社区的讨论,可以解决具体的技术问题。 - **培训课程**:Marty Hall提供的定制化Java EE培训课程,涵盖...
这个压缩包包含的“prototype.js”文件就是Prototype.js的核心库,它是开发者在网页应用中引入Prototype功能的基础。 首先,Prototype.js 提供了强大的DOM操作接口。它通过扩展JavaScript的原生Array、String、...
《Prototype 1.5.1使用...总结,Prototype 1.5.1使用手册涵盖了该库的主要特性和用法,对于前端开发者来说,是一个不可或缺的学习和参考资料。通过深入学习和实践,可以极大地提升开发效率,创造出更优秀的Web应用。
虽然Prototype.js的最新稳定版本已经更新到1.x系列,但1.6仍然是许多项目的基础。开发者可以在开源社区找到相关的教程、问答和示例代码,例如GitHub、Stack Overflow和各种技术博客,以便更好地学习和解决问题。 综...
这样做是为了让Prototype.js更专注于基础功能,而将视觉效果的实现留给专门的库,使得整体库的体积更小,性能更优。 5. **bug修复**:每个版本的更新都伴随着错误的修复,1.3.1版本也不例外。修复的bug可能涉及到...