原型 - 快速指南

原型 - 概述

什么是原型？

Prototype 是一个 JavaScript 框架，旨在简化动态 Web 应用程序的开发。原型由萨姆·斯蒂芬森开发。

Prototype 是一个 JavaScript 库，它使您能够以一种非常简单、有趣且安全的方式操作 DOM（跨浏览器）。

Scriptaculous和其他库（例如Rico）构建在 Prototype 的基础上，用于创建小部件和其他最终用户的东西。

原型-

使用有用的方法扩展 DOM 元素和内置类型。
具有对类风格 OOP（包括继承）的内置支持。
具有对事件管理的高级支持。
具有强大的Ajax功能。
不是一个完整的应用程序开发框架。
不提供小部件或全套标准算法或 I/O 系统。

如何安装原型？

原型作为一个名为prototype.js 的单个文件分发。按照下面提到的步骤设置原型库 -

转到下载页面(http://prototypejs.org/download/)以方便的包形式获取最新版本。
现在，将prototype.js 文件放入您网站的目录中，例如/javascript。

您现在可以在网页中使用强大的 Prototype 框架了。

如何使用原型库？

现在，您可以包含原型脚本，如下所示 -

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

例子

下面是一个简单的示例，展示了如何使用 Prototype 的 $() 函数在 JavaScript 中获取 DOM 元素 -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

输出

为什么这个教程？

prototypejs.org上提供了一份非常好的原型框架文档，那么为什么要参考本教程呢！

答案是，我们在本教程中将所有最常用的功能放在一起。其次，我们解释了所有有用的方法以及合适的示例，这些方法在官方网站上没有提供。

如果您是Prototype Framework的高级用户，那么您可以直接跳转到官方网站，否则本教程对您来说可能是一个很好的开始，您可以像参考手册一样使用它。

原型 - 有用的功能

现在让我们看看 Prototype 可以专门为我们开发动态 Web 应用程序做什么。

跨浏览器支持

在进行 JavaScript 编程时，需要对不同的 Web 浏览器进行不同的处理。原型库的编写方式可以解决所有兼容性问题，您可以毫无麻烦地进行跨浏览器编程。

文档对象模型

Prototype 提供了帮助方法，可以减轻 DOM 编程的一些压力。使用Prototype，您可以非常轻松地操作DOM。

HTML 表单

通过 Ajax，其他输入机制（例如拖放）可以用作浏览器和服务器之间对话的一部分。使用传统的 JavaScript 编程，很难捕获这些输入并将其传递到服务器。Prototype 提供了一组用于处理 HTML 表单的实用程序。

JavaScript 事件

Prototype 在编码事件时提供了一些出色的跨浏览器支持，并且还扩展了 Function 对象，以便轻松处理事件。

AJAX实用程序

Prototype 最重要的特性是它对 Ajax 的支持。所有主流浏览器都支持 XMLHttpRequest 对象的某个版本，该版本使 Ajax 成为可能，无论是作为 ActiveX 组件还是作为本机 JavaScript 对象。

然而，XMLHttpRequest 在非常低的级别公开了 HTTP 协议，这给了开发人员很大的权力，但也要求她编写大量代码才能完成简单的事情。

Prototype 使用它自己的对象继承系统来提供 Ajax 帮助程序对象的层次结构，更通用的基类由更集中的帮助程序进行子类化，这些帮助程序允许在一行中对最常见的 Ajax 请求类型进行编码。

原型 - 实用方法

Prototype 库附带了许多预定义的对象和实用函数。您可以直接在 JavaScript 编程中使用这些函数和对象。

这些方法是高效的基于原型的 JavaScript 编码的基石之一。花一些时间研究它们以适应这些方法。

本章通过示例详细介绍了所有这些有用的方法。

编号	方法及说明
1.	$() 如果提供了字符串，则返回文档中具有匹配 ID 的元素；否则返回传递的元素。
2.	$$() 获取任意数量的 CSS 选择器（字符串）并返回与其中任何一个匹配的扩展 DOM 元素的文档顺序数组。
3.	$A() 将其接收到的单个参数转换为 Array 对象。
4.	$F() 返回表单控件的值。这是 Form.Element.getValue 的方便别名。
5.	$H() 将对象转换为类似于关联数组的可枚举哈希对象。
6.	$R() 创建一个新的 ObjectRange 对象。
7.	$w() 将字符串拆分为数组，将所有空格视为分隔符。
8.	试试这些接受任意数量的函数并返回第一个不抛出错误的函数的结果。

document.getElementsByClassName

此方法检索（并扩展）具有 CSS 类名称className的所有元素。

但是，该方法在最新版本的 Prototype 中已被弃用。

原型 - 元素对象

Element对象提供了各种实用函数来操作 DOM 中的元素。

以下是所有实用函数的列表以及示例。此处定义的所有方法都会自动添加到使用 $() 函数访问的任何元素。

因此，编写 Element.show('firstDiv'); 与编写 $('firstDiv').show(); 相同

原型元素法

注意- 确保您至少拥有 prototype.js 版本 1.6。

编号	方法及说明
1.	绝对化() 将元素转换为绝对定位元素，而不更改其在页面布局中的位置。
2.	添加类名() 将给定的 CSS 类名添加到元素的类名中。
3.	添加方法() 可以将您自己的方法混合到 Element 对象中，稍后您可以将其用作扩展元素的方法。
4.	邻近的（）查找当前元素与给定选择器匹配的所有同级元素。
5.	祖先（）收集所有元素的祖先并将它们作为扩展元素数组返回。
6.	子元素() 收集该元素的所有子元素并将它们作为扩展元素数组返回。
7.	类名() 已弃用。返回 ClassNames 的新实例，这是一个 Enumerable 对象，用于读取和写入元素的 CSS 类名。
8.	干净的空白（）删除元素的所有文本节点，其中仅包含空格。返回元素。
9.	克隆位置() 将源的位置和/或尺寸克隆到由可选参数选项定义的元素上。
10.	累积偏移量() 返回元素距文档左上角的偏移量。
11.	累积滚动偏移() 计算嵌套滚动容器中元素的累积滚动偏移量。
12.	后代（）检查元素是否是祖先的后代。
13.	后人（）收集元素的所有后代并将它们作为扩展元素数组返回。
14.	向下（）返回元素的第一个与 cssRule 匹配的后代。如果未提供 cssRule，则考虑所有后代。如果没有后代符合这些条件，则返回 undefined。
15.	空的（）测试元素是否为空（即仅包含空格）。
16.	延长（）使用 Element.Methods 和 Element.Methods.Simulated 中包含的所有方法扩展元素。
17.	火（）触发以当前元素为目标的自定义事件。
18.	第一个后代（）返回作为元素的第一个子元素。这与firstChild DOM 属性相反，后者将返回任何节点。
19.	获取尺寸() 查找元素的计算宽度和高度，并将它们作为对象的键/值对返回。
20.	按类名获取元素已弃用。获取所有元素的后代，这些后代具有 className 的 CSS 类，并将它们作为扩展元素的数组返回。请使用$$()。
21.	通过选择器获取元素已弃用。获取任意数量的 CSS 选择器（字符串）并返回与其中任何一个匹配的元素的扩展子元素的数组。请使用$$()。
22.	获取高度() 查找并返回元素的计算高度。
23.	getOffsetParent() 返回元素最近定位的祖先。如果没有找到，则返回 body 元素。
24.	获取样式() 返回元素的给定 CSS 属性值。属性可以以其 CSS 或驼峰形式指定。
25.	获取宽度() 查找并返回元素的计算宽度。
26.	有类名() 检查元素是否具有给定的 CSS className。
27.	隐藏（）隐藏并返回元素。
28.	确认（）返回元素的 id 属性（如果存在），或者设置并返回唯一的自动生成的 id。
29.	直接后代() 已弃用。收集该元素的所有直接后代（即子元素）并将它们作为扩展元素数组返回。请使用childElements()。
30.	插入（）在元素之前、之后、顶部或底部插入内容。
31.	检查（）返回元素的面向调试的字符串表示形式。
32.	makeClipping() 通过将元素的溢出值设置为“隐藏”来模拟支持不佳的 CSS 剪辑属性。返回元素。
33.	使定位（）如果元素的初始位置是“静态”或未定义，则可以通过将元素的 CSS 位置设置为“相对”来轻松创建 CSS 包含块。返回元素。
34.	匹配（）检查元素是否与给定的 CSS 选择器匹配。
35.	下一个（）返回与给定 cssRule 匹配的元素的下一个同级元素。
36.	下一个兄弟姐妹（）收集元素的所有下一个兄弟元素并将它们作为扩展元素数组返回。
37.	观察（）在元素上注册事件处理程序并返回元素。
38.	定位偏移() 返回元素相对于其最近定位祖先的偏移量。
39.	以前的（）返回与给定 cssRule 匹配的元素的前一个同级元素。
40.	以前的兄弟姐妹（）收集元素之前的所有同级元素并将它们作为扩展元素数组返回。
41.	读取属性() 返回元素属性的值，如果未指定属性，则返回 null。
42.	递归收集() 递归地收集其关系由属性指定的元素。
43.	相对化（）将元素转换为相对定位元素，而不更改其在页面布局中的位置。
44.	消除（）从文档中完全删除元素并返回它。
45.	删除类名() 删除元素的 CSS className 并返回元素。
46.	代替（）用 html 参数的内容替换 element 并返回删除的元素。
47.	滚动到() 滚动窗口，使元素出现在视口的顶部。返回元素。
48.	选择（）接受任意数量的 CSS 选择器（字符串）并返回与其中任何一个匹配的元素的扩展后代数组。
49.	设置不透明度() 设置元素的视觉不透明度，同时解决各种浏览器中的不一致问题。
50.	设置样式() 修改元素的 CSS 样式属性。
51.	展示（）显示并返回元素。
52.	兄弟姐妹（）收集元素的所有兄弟元素并将它们作为扩展元素数组返回。
53.	停止观察() 取消注册处理程序并返回元素。
54.	切换（）切换元素的可见性。
55.	切换类名() 切换元素的 CSS className 并返回元素。
56.	撤消剪辑() 将元素的 CSS 溢出属性设置回应用 Element.makeClipping() 之前的值。返回元素。
57.	撤消定位() 将元素设置回应用 Element.makePositioned 之前的状态。返回元素。
58.	向上（）返回与给定 cssRule 匹配的元素的第一个祖先。
59.	更新（）用提供的 newContent 参数替换元素的内容并返回元素。
60.	视口偏移() 返回元素相对于视口的 X/Y 坐标。
61.	可见的（）返回一个布尔值，指示元素是否可见。
62.	裹（）将一个元素包装在另一个元素中，然后返回包装器。
63.	写属性() 添加、指定或删除作为散列或名称/值对传递的属性。

原型 - 数字处理

原型扩展了原生 JavaScript 数字以提供 -

ObjectRange 兼容性，通过 Number#succ。
类似 Ruby 的带有 Number#times 的数字循环。
简单的实用方法，例如 Number#toColorPart 和 Number#toPlatedString。

以下是所有函数的列表以及处理数字的示例。

原型编号法

注意- 确保您的prototype.js版本为1.6。

编号	方法及说明
1.	绝对值() 返回数字的绝对值。
2.	天花板（）返回大于或等于该数字的最小整数。
3.	地面（）返回小于或等于该数字的最大整数。
4.	圆形的（）将数字四舍五入到最接近的整数。
5.	成功（）返回当前 Number 的后继，由 current + 1 定义。用于使数字与 ObjectRange 兼容。
6.	次() 封装常规的 [0..n] 循环，Ruby 风格。
7.	toColorPart() 生成数字的 2 位十六进制表示形式（因此假定在 [0..255] 范围内）。对于编写 CSS 颜色字符串很有用。
8.	toJSON() 返回 JSON 字符串。
9.	填充字符串() 将数字转换为用 0 填充的字符串，以使字符串的长度至少等于 length。

原型 - 字符串处理

Prototype 通过一系列从简单到复杂的有用方法增强了 String 对象。

以下是所有函数的列表以及处理字符串的示例。

原型字符串方法

注意- 确保您的prototype.js版本为1.6。

编号	方法及说明
1.	空白的（）检查字符串是否为“空白”，即为空或仅包含空格。
2.	Camel化（）将由破折号分隔的字符串转换为等效的驼峰命名法。例如，“foo-bar”将转换为“fooBar”。
3.	大写（）将字符串的第一个字母大写，并将所有其他字母小写。
4.	达舍尔化（）将下划线字符 ("_") 的每个实例替换为破折号 ("-")。
5.	空的（）检查字符串是否为空。
6.	以。。结束（）检查字符串是否以子字符串结尾。
7.	转义 HTML() 将 HTML 特殊字符转换为其实体等效字符。
8.	evalJSON() 评估字符串中的 JSON 并返回结果对象。
9.	evalScripts() 评估字符串中存在的任何脚本块的内容。返回一个数组，其中包含每个脚本返回的值。
10.	提取脚本() 提取字符串中存在的任何脚本块的内容并将它们作为字符串数组返回。
11.	gsub() 返回字符串，其中给定模式的每次出现都替换为常规字符串、函数的返回值或模板字符串。
12.	包括（）检查字符串是否包含子字符串。
13.	检查（）返回字符串的面向调试的版本。
14.	插（）将字符串视为模板并用对象的属性填充它。
15.	isJSON() 使用正则表达式检查字符串是否为有效的 JSON。该安全方法在内部调用。
16.	解析查询() 解析类似 URI 的查询字符串并返回由参数/值对组成的对象。
17.	扫描（）允许迭代给定模式的每次出现。
18.	以。。开始（）检查字符串是否以子字符串开头。
19.	条（）从字符串中去除所有前导和尾随空格。
20.	stripScripts() 删除字符串中任何看起来像 HTML 脚本块的内容。
21.	剥离标签() 去除字符串中的任何 HTML 标记。
22.	子() 返回一个字符串，其中第一个出现的模式被替换为常规字符串、函数的返回值或模板字符串。
23.	成功（）由 ObjectRange 内部使用。将字符串的最后一个字符转换为 Unicode 字母表中的下一个字符。
24.	次() 连接字符串 count 次。
25.	toArray() 逐个字符拆分字符串并返回包含结果的数组。
26.	toJSON() 返回 JSON 字符串。
27.	toQueryParams() 解析类似 URI 的查询字符串并返回由参数/值对组成的对象。
28.	截短（）将字符串截断为给定长度并向其附加后缀（表明它只是摘录）。
29.	下划线() 将驼峰字符串转换为一系列由下划线（“_”）分隔的单词。
30.	unescapeHTML() 剥离标签并将特殊 HTML 字符的实体形式转换为其正常形式。
31.	取消过滤JSON () 去除 Ajax JSON 或 JavaScript 响应周围的注释分隔符。该安全方法在内部调用。

原型 - 数组处理

Prototype 使用许多强大的方法扩展了所有原生 JavaScript 数组。

这是通过两种方式完成的 -

它混合在 Enumerable 模块中，该模块已经引入了大量方法。
它添加了很多额外的方法，这些方法都记录在本节中。

使用迭代器

Prototype 提供的一项重要支持是您可以在 JavaScript 中使用类似 java 的迭代器。请参阅下面的区别 -

编写for循环的传统方式 -

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

现在，如果您使用 Prototype，那么您可以按如下方式替换上面的代码 -

myArray.each(function(item) {
   // Your code working on item here...
});

以下是所有函数的列表以及处理数组的示例。

原型数组方法

注意- 确保您的prototype.js版本为1.6。

编号	方法及说明
1.	清除（）清除数组（使其为空）。
2.	克隆（）返回数组的副本，保持原始数组不变。
3.	袖珍的（）返回数组的新版本，没有任何 null/未定义值。
4.	每个（）按数字索引升序迭代数组。
5.	第一的（）返回数组中的第一项，如果数组为空则返回未定义。
6.	展平（）返回数组的“平面”（一维）版本。
7.	从（）克隆现有数组或从类似数组的集合创建新数组。
8.	指数（）返回参数在数组中第一次出现的位置。
9.	检查（）返回数组的面向调试的字符串表示形式。
10.	最后的（）返回数组中的最后一项，如果数组为空则返回未定义。
11.	减少（）减少数组：单元素数组被转换为其唯一元素，而多元素数组则原封不动地返回。
12.	撤销（）返回数组的反转版本。默认情况下，直接反转原来的。如果 inline 设置为 false，则使用原始数组的克隆。
13.	尺寸（）返回数组的大小。
14.	toArray() 这只是 Enumerable 中混合的 toArray 的局部优化。
15.	toJSON() 返回 JSON 字符串。
16.	唯一性（）生成数组的无重复版本。如果没有找到重复项，则返回原始数组。
17.	没有（）生成不包含任何指定值的数组的新版本。

原型 - 哈希处理

哈希可以被认为是一个将唯一键绑定到值的关联数组。唯一的区别是您可以使用任何字符串作为索引，而不仅仅是使用数字作为索引。

创建哈希

有两种方法可以构造 Hash 实例 -

使用 JavaScript 关键字new。
使用原型实用程序函数$H。

要创建空哈希，您也可以调用任何不带参数的构造函数方法。

以下示例展示了如何以简单的方式创建哈希、设置值和获取值 -

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype 提供了多种方法来轻松评估 Hash。本教程将通过适当的示例详细解释每种方法。

以下是与 Hash 相关的所有方法的完整列表。

原型哈希方法

注意- 确保至少有 prototype.js 版本 1.6。

编号	方法及说明
1.	克隆（）返回哈希的克隆。
2.	每个（）迭代哈希中的名称/值对。
3.	得到（）返回哈希键的属性值。
4.	检查（）返回哈希的面向调试的字符串表示形式。
5.	键() 提供哈希的键数组（即属性名称）。
6.	合并（）将对象合并到哈希并返回合并结果。
7.	消除（）从哈希中删除键并返回它们的值。该方法在 1.6 版本中已被弃用。
8.	放（）将哈希键的属性设置为 value 并返回 value。
9.	toJSON() 返回 JSON 字符串。
10.	反对（）返回一个克隆的普通对象。
11.	toQueryString() 将哈希值转换为其 URL 编码的查询字符串表示形式。
12.	取消设置() 删除哈希键的属性并返回其值。
13.	更新（）使用对象的键/值对更新哈希。原始哈希值将被修改。
14.	值（）收集哈希值并将它们返回到数组中。

原型 - 基本对象

Prototype 使用Object作为命名空间，并使用Object对象调用相关函数。这有以下两种使用方式 -

如果您是一个简单的开发人员，那么您可以使用现有的功能，例如检查或克隆。
如果您希望像 Prototype 一样创建自己的对象，或者像哈希一样探索对象，那么您将转向扩展、键和值。

原型对象方法

注意- 确保至少有 prototype.js 版本 1.6。

编号	方法及说明
1.	克隆（）使用浅复制克隆传递的对象（将原始对象的所有属性复制到结果中）。
2.	延长（）将所有属性从源对象复制到目标对象。
3.	检查（）返回对象的面向调试的字符串表示形式。
4.	是数组() 如果 obj 是数组，则返回 true，否则返回 false。
5.	isElement() 如果 obj 是类型 1 的 DOM 节点，则返回 true，否则返回 false。
6.	isFunction() 如果 obj 是函数类型，则返回 true，否则返回 false。
7.	isHash() 如果 obj 是 Hash 类的实例，则返回 true，否则返回 false。
8.	isNumber() 如果 obj 的类型为数字，则返回 true，否则返回 false。
9.	isString() 如果 obj 是字符串类型，则返回 true，否则返回 false。
10.	未定义() 如果 obj 的类型为未定义，则返回 true，否则返回 false。
11.	键() 将任何对象视为哈希并获取其属性名称列表。
12.	toHTML() 如果存在，则返回 obj 的 toHTML 方法的返回值，否则通过 String.interpret 运行 obj。
13.	toJSON() 返回 JSON 字符串。
14.	toQueryString() 将对象转换为其 URL 编码的查询字符串表示形式。
15.	值（）将任何对象视为哈希并获取其属性值的列表。

原型 - 模板化

模板用于格式化相似对象组并为这些对象生成格式化输出。

Prototype 提供了一个Template类，它有两个方法 -

Template() - 这是一个构造函数方法，用于创建模板对象并调用evaluate()方法来应用模板。
evaluate() - 此方法用于应用模板来格式化对象。

创建格式化输出涉及三个步骤。

创建模板- 这涉及创建预先格式化的文本。此文本包含格式化内容以及#{fieldName}值。当使用实际值调用evaluate()方法时，这些#{fieldName}值将被实际值替换。
定义实际值- 这涉及以键和值的形式创建实际值。这些Key将被映射到模板中，并被相应的值替换。
映射键和替换值- 这是最后一步，将调用评估（）并且格式化对象中的所有可用键将被定义的值替换。

示例1

步骤1

创建一个模板。

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

第2步

准备我们的值集，这些值将传递到上述对象中以获得格式化输出。

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

步骤3

最后一步是填写模板中的所有值并生成最终结果，如下所示 -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

因此，让我们将这三个步骤放在一起 -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

这将产生以下结果 -

输出

原型 - 枚举

Enumerable 类提供了大量有用的枚举方法。枚举是充当值集合的对象。

枚举方法主要用于枚举数组和散列。还有其他对象，例如ObjectRange和各种 DOM 或 AJAX 相关对象，您可以在其中使用枚举方法。

上下文参数

每个采用迭代器的 Enumerable 方法也将上下文对象作为下一个（可选）参数。上下文对象是迭代器将要绑定的对象，因此其中的this关键字将指向该对象。

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

这将产生以下结果 -

输出

{ foo: 0, bar: 1, baz: 2}

有效地使用它

当您需要对所有元素调用相同的方法时，请使用invoke()方法。
当您需要在所有元素上获取相同的属性时，请使用pluck()方法。
findAll /select方法检索与给定谓词匹配的所有元素。相反，reject()方法检索所有与谓词不匹配的元素。在需要这两个集合的特定情况下，您可以避免循环两次：只需使用partition()方法。

这是与 Enumerable 相关的所有方法的完整列表。

原型枚举方法

注意- 确保您至少拥有 prototype.js 版本 1.6。

编号	方法及说明
1.	全部（）直接或通过提供的迭代器计算确定所有元素是否布尔值等于 true。
2.	任何（）直接或通过提供的迭代器计算确定至少一个元素是否布尔值等于 true。
3.	收集（）返回将迭代器应用于每个元素的结果。别名为map()。
4.	探测（）查找迭代器返回 true 的第一个元素。由 find() 方法别名。
5.	每个（）它允许您以通用方式迭代所有元素，然后返回 Enumerable，从而允许链调用。
6.	每个切片() 根据给定大小将项目分组为块，最后一个块可能更小。
7.	条目（）更通用的 toArray 方法的别名。
8.	寻找（）查找迭代器返回 true 的第一个元素。detector() 的便捷别名。
9.	找到所有（）返回迭代器返回 true 的所有元素。别名为 select()。
10.	grep() 返回与过滤器匹配的所有元素。如果提供了迭代器，它将用于为每个选定元素生成返回值。
11.	inGroupsOf() 将项目分组为固定大小的块，如有必要，使用特定值填充最后一个块。
12.	包括（）根据 == 比较运算符确定给定对象是否在 Enumerable 中。别名为member()。
13.	注入（）根据迭代器的连续结果增量构建结果值。
14.	调用() 针对each() 或collect() 的常见用例进行优化：使用相同的潜在参数对所有元素调用相同的方法。
15.	地图（）返回将迭代器应用于每个元素的结果。collect() 的便捷别名。
16.	最大限度（）返回最大元素（或基于元素的计算），如果枚举为空，则返回未定义。元素可以直接比较，也可以首先应用迭代器并比较返回值。
17.	成员（）根据 == 比较运算符确定给定对象是否在 Enumerable 中。include() 的便捷别名。
18.	分钟（）返回最小元素（或基于元素的计算），如果枚举为空，则返回未定义。元素可以直接比较，也可以首先应用迭代器并比较返回值。
19.	分割（）将元素分为两组：被视为 true 的元素和被视为 false 的元素。
20.	采摘（）对collect()常见用例的优化：为所有元素获取相同的属性。返回属性值。
21.	拒绝（）返回迭代器返回 false 的所有元素。
22.	选择（） findAll() 方法的别名。
23.	尺寸（）返回枚举的大小。
24.	排序方式（）根据迭代器为每个元素计算的标准，提供元素的自定义排序视图。
25.	toArray() 返回枚举的数组表示形式。别名为entries()。
26.	压缩（）拉链在一起（想想一条裤子上的拉链）2 + 序列，提供元组数组。每个元组包含每个原始序列的一个值。

原型 - 事件处理

事件管理是实现跨浏览器脚本编写的最大挑战之一。每个浏览器都有不同的方法来处理击键。

Prototype Framework 处理所有跨浏览器兼容性问题，让您摆脱与事件管理相关的所有麻烦。

Prototype Framework 提供了Event命名空间，其中充满了方法，所有方法都将当前事件对象作为参数，并在所有主要浏览器中愉快地生成您所请求的信息。

事件命名空间还提供了可与键盘相关事件一起使用的标准化按键代码列表。以下常量在命名空间中定义 -

编号	关键常量和描述
1.	KEY_BACKSPACE 代表退格键。
2.	键标签代表tab键。
3.	回车键代表返回键。
4.	KEY_ESC 代表esc键。
5.	左键代表左键。
6.	按键_UP 代表向上键。
7.	KEY_RIGHT 代表右键。
8.	按键_向下代表向下键。
9.	KEY_DELETE 代表删除键。
10.	KEY_HOME 代表主页键。
11.	KEY_END 代表结束键。
12.	KEY_PAGEUP 代表向上翻页键。
13.	KEY_PAGEDOWN 代表向下翻页键。

如何处理事件

在开始之前，让我们看一个使用事件方法的示例。此示例演示如何捕获发生事件的 DOM 元素。

例子

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

输出

这是与Event相关的所有方法的完整列表。您最有可能经常使用的函数是observe、element和stop。

原型事件方法

注意- 确保您至少拥有 prototype.js 版本 1.6。

编号	方法及说明
1.	元素（）返回发生事件的 DOM 元素。
2.	延长（）使用 Event.Methods 中包含的所有方法扩展事件。
3.	查找元素() 返回具有给定标签名称的第一个 DOM 元素，从事件发生的元素开始向上。
4.	isLeftClick() 确定与按钮相关的鼠标事件是否与“左”（实际上是主）按钮有关。
5.	观察（）在 DOM 元素上注册事件处理程序。
6.	指针X() 返回鼠标事件的绝对水平位置。
7.	指针Y() 返回鼠标事件的绝对垂直位置。
8.	停止（）停止事件的传播并防止最终触发其默认操作。
9.	停止观察() 注销事件处理程序。
10.	卸载缓存() 注销所有通过观察注册的事件处理程序。自动为您接线。自 1.6 起不再可用。

原型 - 表单管理

Prototype 提供了一种管理 HTML 表单的简单方法。Prototype 的 Form 是一个命名空间和一个模块，用于所有与表单相关的事物，包含表单操作和序列化优点。

虽然它拥有处理整个表单的方法，但它的子模块Form.Element处理特定的表单控件。

以下是与Form Element相关的所有方法的完整列表。

原型形式方法

注意- 确保您至少拥有 prototype.js 版本 1.6。

编号	方法及说明
1.	禁用（）禁用整个表单。表单控件将可见但不可编辑。
2.	使能够（）启用完全或部分禁用的表单。
3.	查找第一个元素() 查找第一个非隐藏、非禁用的表单控件。
4.	焦点第一元素() 将键盘焦点赋予表单的第一个元素。
5.	获取元素() 返回表单中所有表单控件的集合。
6.	获取输入() 返回表单中所有 INPUT 元素的集合。使用可选的类型和名称参数来限制对这些属性的搜索。
7.	要求（）一种通过 Ajax.Request 序列化表单并将其提交到表单操作属性 URL 的便捷方法。options 参数被传递到 Ajax.Request 实例，允许覆盖 HTTP 方法并指定其他参数。
8.	重置（）将表单重置为其默认值。
9.	连载（）将表单数据序列化为适合 Ajax 请求的字符串（默认Behave），或者，如果可选 getHash 计算结果为 true，则为一个对象哈希，其中键是表单控件名称，值是数据。
10.	序列化元素() 将表单元素数组序列化为适合 Ajax 请求的字符串（默认Behave），或者，如果可选 getHash 计算结果为 true，则将对象哈希序列化，其中键是表单控件名称，值是数据。

原型和 JSON 教程

JSON简介

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式。

JSON 易于人类阅读和编写。
JSON 很容易被机器解析和生成。
JSON 基于 JavaScript 编程语言的子集。
JSON 尤其被整个 Web 上的 API 使用，是 Ajax 请求中 XML 的快速替代方案。
JSON 是一种完全独立于语言的文本格式。

Prototype 1.5.1及更高版本，具有JSON编码和解析支持。

JSON 编码

原型提供了以下编码方法 -

注意- 确保至少有 prototype.js 版本 1.6。

编号	方法及说明
1.	Number.toJSON() 返回给定 Number 的 JSON 字符串。
2.	字符串.toJSON(