Prototype - 快速指南

上一页
下一页

Prototype - 概述

什么是 Prototype？

Prototype 是一个 JavaScript 框架，旨在简化动态 Web 应用程序的开发。Prototype 由 Sam Stephenson 开发。

Prototype 是一个 JavaScript 库，它使您可以非常轻松有趣的方式操作 DOM，并且安全（跨浏览器）。

Scriptaculous 和其他库，例如 Rico，建立在 Prototype 的基础上，用于创建小部件和其他最终用户内容。

Prototype −

  • 扩展 DOM 元素和内置类型，提供有用的方法。

  • 内置支持类风格的面向对象编程，包括继承。

  • 具有高级的事件管理支持。

  • 拥有强大的 Ajax 功能。

  • 不是一个完整的应用程序开发框架。

  • 不提供小部件或完整的标准算法或 I/O 系统集。

如何安装 Prototype？

Prototype 以单个文件（名为 prototype.js）的形式分发。请按照以下步骤设置 Prototype 库：

  • 访问下载页面 (http://prototypejs.org/download/) 获取最新版本的便捷安装包。

  • 现在，将 prototype.js 文件放在网站目录下，例如 /javascript。

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

如何使用 Prototype 库？

现在，您可以按如下方式包含 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>

输出

为什么需要本教程？

Prototype 框架的非常好的文档可在 prototypejs.org 上找到，那么为什么要参考本教程呢！

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

如果您是 Prototype 框架的高级用户，则可以直接跳转到官方网站，否则本教程可以作为您的良好起点，并且您可以将其用作参考手册。

Prototype - 有用功能

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

跨浏览器支持

在进行 JavaScript 编程时，需要以不同的方式处理不同的 Web 浏览器。Prototype 库的编写方式使其能够处理所有兼容性问题，并且您可以毫无困难地进行跨浏览器编程。

文档对象模型

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 - 实用方法

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

这些方法是基于 Prototype 的高效 JavaScript 编码的基石之一。花一些时间学习它们，以便熟悉这些方法。

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

序号 方法及说明
1. $()

如果提供字符串，则返回文档中具有匹配 ID 的元素；否则返回传递的元素。
2. $$()

获取任意数量的 CSS 选择器（字符串），并返回与其中任何一个匹配的扩展 DOM 元素的文档顺序数组。
3. $A()

将接收到的单个参数转换为 Array 对象。
4. $F()

返回表单控件的值。这是 Form.Element.getValue 的便捷别名。
5. $H()

将对象转换为类似于关联数组的可枚举 Hash 对象。
6. $R()

创建一个新的 ObjectRange 对象。
7. $w()

将字符串拆分为数组，将所有空格视为分隔符。
8. Try.these

接受任意数量的函数，并返回第一个不抛出错误的函数的结果。

document.getElementsByClassName

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

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

Prototype - 元素对象

Element 对象提供各种用于操作 DOM 中元素的实用程序函数。

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

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

Prototype 元素方法

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

序号 方法及说明
1. absolutize()

将元素转换为绝对定位的元素，而不会更改其在页面布局中的位置。
2. addClassName()

将给定的 CSS 类名添加到元素的类名中。
3. addMethods()

使您可以将自己的方法混合到 Element 对象中，以后可以将其用作扩展元素的方法。
4. adjacent()

查找与给定选择器匹配的当前元素的所有兄弟元素。
5. ancestors()

收集元素的所有祖先，并将它们作为扩展元素的数组返回。
6. childElements()

收集元素的所有子元素，并将它们作为扩展元素的数组返回。
7.

classNames()

已弃用。返回 ClassNames 的新实例，这是一个用于读取和写入元素 CSS 类名的 Enumerable 对象。
8. cleanWhitespace()

删除元素的所有仅包含空格的文本节点。返回元素。
9. clonePosition()

根据可选参数 options 将源的位置和/或尺寸克隆到元素上。
10. cumulativeOffset()

返回元素相对于文档左上角的偏移量。
11. cumulativeScrollOffset()

计算嵌套滚动容器中元素的累积滚动偏移量。
12. descendantOf()

检查元素是否是祖先的后代。
13. descendants()

收集元素的所有后代，并将它们作为扩展元素的数组返回。
14. down()

返回与 cssRule 匹配的元素的第一个后代。如果未提供 cssRule，则会考虑所有后代。如果没有后代匹配这些条件，则返回 undefined。
15. empty()

测试元素是否为空（即仅包含空格）。
16. extend()

使用 Element.Methods 和 Element.Methods.Simulated 中包含的所有方法扩展元素。
17. fire()

使用当前元素作为其目标触发自定义事件。
18. firstDescendant()

返回第一个是元素的子元素。这与 firstChild DOM 属性相反，firstChild DOM 属性将返回任何节点。
19. getDimensions()

查找元素的计算宽度和高度，并将它们作为对象的键/值对返回。
20.

getElementsByClassName

已弃用。获取元素的所有具有 CSS 类 className 的后代，并将它们作为扩展元素的数组返回。请使用 $$()。
21.

getElementsBySelector

已弃用。获取任意数量的 CSS 选择器（字符串），并返回与其中任何一个匹配的元素扩展子元素的数组。请使用 $$()。
22. getHeight()

查找并返回元素的计算高度。
23. getOffsetParent()

返回元素最接近的定位祖先。如果未找到，则返回 body 元素。
24. getStyle()

返回元素的给定 CSS 属性值。属性可以用其 CSS 或驼峰式形式指定。
25. getWidth()

查找并返回元素的计算宽度。
26. hasClassName()

检查元素是否具有给定的 CSS className。
27. hide()

隐藏并返回元素。
28. identify()

如果存在，则返回元素的 id 属性，否则设置并返回唯一的自动生成的 id。
29.

immediateDescendants()

已弃用。收集元素的所有直接后代（即子元素），并将它们作为扩展元素的数组返回。请使用 childElements()。
30. insert()

在元素之前、之后、顶部或底部插入内容。
31. inspect()

返回元素的调试导向字符串表示形式。
32. makeClipping()

通过将元素的 overflow 值设置为 'hidden' 来模拟支持不佳的 CSS clip 属性。返回元素。
33. makePositioned()

允许轻松创建 CSS 包含块，如果元素的初始位置为 'static' 或未定义，则将其 CSS position 设置为 'relative'。返回元素。
34. match()

检查元素是否与给定的 CSS 选择器匹配。
35. next()

返回与给定 cssRule 匹配的元素的后续兄弟元素。
36. nextSiblings()

收集元素的所有后续兄弟元素，并将它们作为扩展元素的数组返回。
37. observe()

在元素上注册事件处理程序并返回元素。
38. positionedOffset()

返回元素相对于其最近的定位祖先的偏移量。
39. previous ()

返回与给定cssRule匹配的元素的前一个兄弟元素。
40. previousSiblings()

收集所有元素的前一个兄弟元素，并将其作为扩展元素数组返回。
41. readAttribute()

返回元素属性的值，如果属性未指定则返回null。
42. recursivelyCollect()

递归收集其关系由属性指定的元素。
43. relativize()

将元素转换为相对定位的元素，而不更改其在页面布局中的位置。
44. remove ()

完全从文档中删除元素并返回它。
45. removeClassName()

删除元素的CSS className并返回元素。
46. replace ()

用html参数的内容替换元素，并返回已删除的元素。
47. scrollTo ()

滚动窗口，使元素出现在视口顶部。返回元素。
48. select()

接受任意数量的CSS选择器（字符串），并返回与其中任何一个匹配的元素的扩展后代数组。
49. setOpacity()

设置元素的视觉不透明度，同时解决各种浏览器中的不一致性。
50. setStyle()

修改元素的CSS样式属性。
51. show()

显示并返回元素。
52. siblings()

收集所有元素的兄弟元素，并将其作为扩展元素数组返回。
53. stopObserving()

取消注册处理程序并返回元素。
54. toggle()

切换元素的可见性。
55. toggleClassName()

切换元素的CSS className并返回元素。
56. undoClipping()

将元素的CSS overflow属性设置回应用Element.makeClipping()之前的值。返回元素。
57. undoPositioned()

将元素恢复到应用Element.makePositioned之前的状态。返回元素。
58. up()

返回与给定cssRule匹配的元素的第一个祖先。
59. update()

用提供的newContent参数替换元素的内容并返回元素。
60. viewportOffset()

返回元素相对于视口的X/Y坐标。
61. visible()

返回一个布尔值，指示元素是否可见。
62. wrap()

将一个元素包装在另一个元素内部，然后返回包装器。
63. writeAttribute()

添加、指定或删除作为哈希或名称/值对传递的属性。

Prototype - 数字处理

Prototype扩展了原生JavaScript数字，以便提供−

  • 通过Number#succ实现ObjectRange兼容性。

  • 使用Number#times实现类似Ruby的数值循环。

  • 简单的实用程序方法，例如Number#toColorPart和Number#toPaddedString。

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

Prototype Number 方法

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

序号 方法及说明
1. abs()

返回数字的绝对值。
2. ceil()

返回大于或等于数字的最小整数。
3. floor()

返回小于或等于数字的最大整数。
4. round()

将数字四舍五入到最接近的整数。
5. succ()

返回当前数字的后继，定义为current + 1。用于使数字与ObjectRange兼容。
6. times()

封装常规[0..n]循环，Ruby风格。
7. toColorPart()

生成数字的两位十六进制表示形式（因此假定数字在[0..255]范围内）。用于组合CSS颜色字符串。
8. toJSON()

返回JSON字符串。
9. toPaddedString()

将数字转换为用0填充的字符串，使字符串的长度至少等于length。

Prototype - 字符串处理

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

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

Prototype String 方法

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

序号 方法及说明
1. blank()

检查字符串是否为空白，这意味着它为空或仅包含空格。
2. camelize()

将用连字符分隔的字符串转换为camelCase等价物。例如，“foo-bar”将转换为“fooBar”。
3. capitalize()

将字符串的第一个字母大写，并将其他所有字母小写。
4. dasherize()

将每个下划线字符（“_”）替换为连字符（“-”）。
5. empty()

检查字符串是否为空。
6. endsWith()

检查字符串是否以子字符串结尾。
7. escapeHTML()

将HTML特殊字符转换为其实体等价物。
8. evalJSON()

评估字符串中的JSON并返回结果对象。
9. evalScripts()

评估字符串中存在的任何脚本块的内容。返回一个包含每个脚本返回的值的数组。
10. extractScripts()

提取字符串中存在的任何脚本块的内容，并将其作为字符串数组返回。
11. gsub()

返回字符串，其中给定模式的每次出现都被替换为常规字符串、函数的返回值或模板字符串。
12. include()

检查字符串是否包含子字符串。
13. inspect()

返回字符串的调试版本。
14. interpolate()

将字符串视为模板并用对象的属性填充它。
15. isJSON()

通过使用正则表达式检查字符串是否为有效的JSON。此安全方法在内部调用。
16. parseQuery()

解析类似URI的查询字符串，并返回由参数/值对组成的对象。
17. scan()

允许迭代给定模式的每次出现。
18. startsWith()

检查字符串是否以子字符串开头。
19. strip()

去除字符串中所有前导和尾随空格。
20. stripScripts()

从字符串中删除任何看起来像HTML脚本块的内容。
21. stripTags()

从字符串中删除任何HTML标签。
22. sub()

返回一个字符串，其中模式的前count次出现被替换为常规字符串、函数的返回值或模板字符串。
23. succ()

由ObjectRange在内部使用。将字符串的最后一个字符转换为Unicode字母表中的下一个字符。
24. times()

将字符串连接count次。
25. toArray()

逐字符分割字符串，并返回包含结果的数组。
26. toJSON()

返回JSON字符串。
27. toQueryParams()

解析类似URI的查询字符串，并返回由参数/值对组成的对象。
28. truncate()

将字符串截断到给定长度，并在其后附加后缀（表示它只是一个摘录）。
29. underscore()

将驼峰式字符串转换为用下划线（“_”）分隔的一系列单词。
30. unescapeHTML()

去除标签并将特殊HTML字符的实体形式转换为其正常形式。
31. unfilterJSON ()

去除Ajax JSON或JavaScript响应周围的注释分隔符。此安全方法在内部调用。

Prototype - 数组处理

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 Array 方法

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

序号 方法及说明
1. clear()

清空数组（使其为空）。
2. clone()

返回数组的副本，保持原始数组不变。
3. compact()

返回数组的新版本，不包含任何null/undefined值。
4. each()

按升序数字索引顺序迭代数组。
5. first()

返回数组中的第一个项目，如果数组为空则返回undefined。
6. flatten()

返回数组的“扁平”（一维）版本。
7. from()

克隆现有数组或从类似数组的集合中创建一个新数组。
8. indexOf()

返回参数在数组中第一次出现的索引位置。
9. inspect()

返回数组的调试字符串表示形式。
10. last()

返回数组中的最后一个项目，如果数组为空则返回undefined。
11. reduce()

减少数组：单元素数组将转换为其唯一元素，而多元素数组将保持不变。
12. reverse()

返回数组的反向版本。默认情况下，直接反转原始数组。如果inline设置为false，则使用原始数组的副本。
13. size()

返回数组的大小。
14. toArray()

这只是从Enumerable混合的toArray的本地优化。
15. toJSON()

返回JSON字符串。
16. uniq()

生成数组的无重复版本。如果未找到重复项，则返回原始数组。
17. without()

生成数组的新版本，不包含任何指定的元素。

Prototype - 哈希处理

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

创建哈希

有两种方法可以构造哈希实例−

  • 使用JavaScript关键字new。
  • 使用Prototype实用程序函数$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提供了广泛的方法来轻松评估哈希。本教程将详细解释每种方法并提供合适的示例。

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

Prototype Hash 方法

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

序号 方法及说明
1. clone()

返回哈希的副本。
2. each()

迭代哈希中的名称/值对。
3. get()

返回哈希键属性的值。
4. inspect()

返回哈希的调试字符串表示形式。
5. keys()

提供哈希的键（即属性名称）数组。
6. merge()

将对象合并到哈希中，并返回合并结果。
7. remove()

从哈希中删除键并返回其值。此方法在1.6版本中已弃用。
8. set()

将哈希键的属性设置为value并返回value。
9. toJSON()

返回JSON字符串。
10. toObject()

返回一个克隆的、原始的对象。
11. toQueryString()

将哈希转换为其 URL 编码的查询字符串表示形式。
12. unset()

删除哈希键的属性并返回其值。
13. update()

使用对象的键/值对更新哈希。原始哈希将被修改。
14. values()

收集哈希的值并将其存储在一个数组中返回。

Prototype - 基本对象

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

  • 如果你是简单的开发者，那么你可以使用现有的函数，比如 inspect 或 clone。

  • 如果你希望像 Prototype 一样创建自己的对象，或者像处理哈希一样探索对象，则会转向 extend、keys 和 values。

Prototype 对象方法

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

序号 方法及说明
1. clone()

使用浅拷贝克隆传递的对象（将所有原始对象的属性复制到结果中）。
2. extend()

将所有属性从源对象复制到目标对象。
3. inspect()

返回对象的调试导向字符串表示形式。
4. isArray ()

如果 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. isUndefined()

如果 obj 的类型是 undefined，则返回 true，否则返回 false。
11. keys()

将任何对象视为哈希并获取其属性名称列表。
12. toHTML()

如果存在，则返回 obj 的 toHTML 方法的返回值，否则通过 String.interpret 运行 obj。
13. toJSON()

返回JSON字符串。
14. toQueryString()

将对象转换为其 URL 编码的查询字符串表示形式。
15. values()

将任何对象视为哈希并获取其属性值列表。

Prototype - 模板

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

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

  • Template() - 这是一个构造方法，用于创建一个模板对象并调用 evaluate() 方法来应用模板。

  • evaluate() - 此方法用于应用模板以格式化对象。

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

  • 创建模板 - 这涉及创建预格式化的文本。此文本包含格式化的内容以及 #{fieldName} 值。当 evaluate() 方法使用实际值调用时，这些 #{fieldName} 值将被实际值替换。

  • 定义实际值 - 这涉及以键值对的形式创建实际值。这些键将在模板中映射，并将被相应的数值替换。

  • 映射键和替换值 - 这是最后一步，其中将调用 evaluate()，并且格式化对象中所有可用的键都将被定义的值替换。

示例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>

这将产生以下结果 -

输出

Prototype - 枚举

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 Enumerable 方法

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

序号 方法及说明
1. all()

确定所有元素是否都与 true 布尔等效，无论是直接还是通过提供的迭代器进行计算。
2. any()

确定至少一个元素是否与 true 布尔等效，无论是直接还是通过提供的迭代器进行计算。
3. collect()

返回将迭代器应用于每个元素的结果。作为 map() 的别名。
4. detect()

查找迭代器返回 true 的第一个元素。由 find() 方法别名。
5. each()

它允许您以通用方式迭代所有元素，然后返回 Enumerable，从而允许链式调用。
6. eachSlice()

根据给定的大小将项目分组为块，最后一个块可能更小。
7. entries()

更通用 toArray 方法的别名。
8. find()

查找迭代器返回 true 的第一个元素。detect() 的便捷别名。
9. findAll()

返回迭代器返回 true 的所有元素。作为 select() 的别名。
10. grep()

返回与过滤器匹配的所有元素。如果提供了迭代器，则将其用于为每个选定元素生成返回值。
11. inGroupsOf()

将项目分组为固定大小的块，如果必要，使用特定值填充最后一个块。
12. include()

根据 == 比较运算符确定给定对象是否在 Enumerable 中。作为 member() 的别名。
13. inject()

基于迭代器连续结果递增地构建结果值。
14. invoke()

each() 或 collect() 的常见用例的优化：为所有元素调用相同的方法，并使用相同的潜在参数。
15. map()

返回将迭代器应用于每个元素的结果。collect() 的便捷别名。
16. max()

返回最大元素（或基于元素的计算），如果枚举为空则返回 undefined。元素要么直接比较，要么先应用迭代器然后比较返回值。
17. member()

根据 == 比较运算符确定给定对象是否在 Enumerable 中。include() 的便捷别名。
18. min()

返回最小元素（或基于元素的计算），如果枚举为空则返回 undefined。元素要么直接比较，要么先应用迭代器然后比较返回值。
19. partition()

将元素划分为两组：那些被视为 true 的和那些被视为 false 的。
20. pluck()

collect() 的常见用例的优化：为所有元素获取相同的属性。返回属性值。
21. reject()

返回迭代器返回 false 的所有元素。
22. select()

findAll() 方法的别名。
23. size()

返回枚举的大小。
24. sortBy()

根据为每个元素计算的标准提供元素的自定义排序视图，由迭代器计算。
25. toArray()

返回枚举的数组表示形式。作为 entries() 的别名。
26. zip()

将 2+ 个序列压缩在一起（想想裤子上的拉链），提供一个元组数组。每个元组包含每个原始序列的一个值。

Prototype - 事件处理

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

Prototype 框架处理所有跨浏览器兼容性问题，让您免受所有与事件管理相关的麻烦。

Prototype 框架提供 Event 命名空间，该命名空间包含许多方法，所有这些方法都将当前事件对象作为参数，并很乐意提供您在所有主要浏览器中请求的信息。

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

序号 键常量和描述
1.

KEY_BACKSPACE

表示退格键。
2.

KEY_TAB

表示 Tab 键。
3.

KEY_RETURN

表示回车键。
4.

KEY_ESC

表示 Esc 键。
5.

KEY_LEFT

表示左箭头键。
6.

KEY_UP

表示上箭头键。
7.

KEY_RIGHT

表示右箭头键。
8.

KEY_DOWN

表示下箭头键。
9.

KEY_DELETE

表示 Delete 键。
10.

KEY_HOME

表示 Home 键。
11.

KEY_END

表示 End 键。
12.

KEY_PAGEUP

表示 Page Up 键。
13.

KEY_PAGEDOWN

表示 Page Down 键。

如何处理事件

在开始之前，让我们看看使用事件方法的示例。此示例显示如何捕获发生事件的 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 事件方法

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

序号 方法及说明
1. element()

返回发生事件的 DOM 元素。
2. extend()

使用 Event.Methods 中包含的所有方法扩展 event。
3. findElement()

返回具有给定标签名称的第一个 DOM 元素，从发生事件的元素向上。
4. isLeftClick()

确定与按钮相关的鼠标事件是否与“左”（实际上是主要）按钮有关。
5. observe()

在 DOM 元素上注册事件处理程序。
6. pointerX()

返回鼠标事件的绝对水平位置。
7. pointerY()

返回鼠标事件的绝对垂直位置。
8. stop()

停止事件的传播并阻止其默认操作最终被触发。
9. stopObserving()

注销事件处理程序。
10. unloadCache()

注销通过 observe 注册的所有事件处理程序。自动为您连接。从 1.6 版开始不可用。

Prototype - 表单管理

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

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

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

Prototype 表单方法

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

序号 方法及说明
1. disable()

禁用整个表单。表单控件将可见但不可编辑。
2. enable()

启用完全或部分禁用的表单。
3. findFirstElement()

查找第一个非隐藏、非禁用的表单控件。
4. focusFirstElement()

将键盘焦点赋予表单的第一个元素。
5. getElements()

返回表单内所有表单控件的集合。
6. getInputs()

返回表单中所有 INPUT 元素的集合。使用可选的 type 和 name 参数来限制对这些属性的搜索。
7. request()

一种用于通过 Ajax.Request 将表单序列化并提交到表单 action 属性的 URL 的便捷方法。options 参数传递给 Ajax.Request 实例，允许覆盖 HTTP 方法并指定其他参数。
8. reset()

将表单重置为其默认值。
9. serialize()

将表单数据序列化为适合 Ajax 请求的字符串（默认行为），或者，如果可选的 getHash 评估为 true，则序列化为一个对象哈希，其中键是表单控件名称，值是数据。
10. serializeElements()

将表单元素数组序列化为适合 Ajax 请求的字符串（默认行为），或者，如果可选的 getHash 评估为 true，则序列化为一个对象哈希，其中键是表单控件名称，值是数据。

Prototype 和 JSON 教程

JSON 简介

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

  • JSON 易于人类阅读和编写。

  • JSON 易于机器解析和生成。

  • JSON 基于 JavaScript 编程语言的一个子集。

  • JSON 尤其被网络上的所有 API 使用，并且是 Ajax 请求中 XML 的快速替代方案。

  • JSON 是一种完全独立于语言的文本格式。

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

JSON 编码

Prototype 提供以下用于编码的方法：

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

序号 方法及说明
1. Number.toJSON()

返回给定数字的 JSON 字符串。
2. String.toJSON()

返回给定字符串的 JSON 字符串。
3. Array.toJSON()

返回给定数组的 JSON 字符串。
4. Hash.toJSON()

返回给定哈希的 JSON 字符串。
5. Date.toJSON()

将日期转换为 JSON 字符串（遵循 JSON 使用的 ISO 格式）。
6. Object.toJSON()

返回给定对象的 JSON 字符串。

如果您不确定需要编码的数据类型，最好的方法是使用 Object.toJSON，例如：

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

这将产生以下结果 -

'{"name": "Violet", "occupation": "character", "age": 25}'

此外，如果您使用自定义对象，您可以设置自己的 toJSON 方法，该方法将由 Object.toJSON 使用。例如：

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

这将产生以下结果 -

'"My name is John and I am 49 years old."'

解析 JSON

在 JavaScript 中，解析 JSON 通常通过评估 JSON 字符串的内容来完成。Prototype 引入了 String.evalJSON 来处理此问题。例如：

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

这将产生以下结果 -

"Violet"

将 JSON 与 Ajax 结合使用

将 JSON 与 Ajax 结合使用非常简单。只需在传输的 responseText 属性上调用 String.evalJSON 即可：

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

如果您的数据来自不受信任的来源，请务必对其进行清理：

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

Prototype 和 AJAX 教程

AJAX 简介

AJAX 代表 **A**synchronous **Ja**vaScript and **X**ML。AJAX 是一种创建更好、更快和更具交互性的 Web 应用程序的新技术，它借助 XML、HTML、CSS 和 Java Script。

要全面了解 AJAX，请参阅我们简单的 AJAX 教程。

Prototype 对 AJAX 的支持

Prototype 框架使您可以非常轻松有趣的方式处理 Ajax 调用，并且也很安全（跨浏览器）。Prototype 还以智能的方式处理从服务器返回的 JavaScript 代码，并提供用于轮询的辅助类。

Ajax 功能包含在全局 Ajax 对象中。此对象提供处理 AJAX 请求和响应所需的所有方法，以简便的方式。

AJAX 请求

实际请求是通过创建 Ajax.Request() 对象的实例来进行的。

new Ajax.Request('/some_url', { method:'get' });

第一个参数是请求的 URL；第二个是 options 哈希。method 选项指的是要使用的 HTTP 方法；默认方法是 POST。

AJAX 响应回调

默认情况下，Ajax 请求是异步的，这意味着您必须拥有处理响应数据的回调。在发出请求时，回调方法将传递到 options 哈希中：

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

这里，两个回调传递到哈希中：

  • onSuccess
  • onFailure

根据响应的状态，将相应地调用上述两个回调中的一个。传递给这两个回调的第一个参数是本机 xmlHttpRequest 对象，您可以分别使用其 responseText 和 responseXML 属性。

您可以指定两个回调、一个回调或都不指定 - 由您决定。其他可用的回调包括：

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

它们都与 xmlHttpRequest 传输的某个状态匹配，除了 onException，它在调度其他回调时发生异常时触发。

注意 - onUninitialized、onLoading、onLoaded 和 onInteractive 回调并非所有浏览器都一致地实现。通常，最好避免使用这些。

Prototype AJAX 方法

Ajax 对象提供处理 AJAX 请求和响应所需的所有方法，以简便的方式。以下是所有与 AJAX 相关的方法的完整列表。

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

序号 方法及说明
1. Ajax 选项

这不是一种方法，而是详细说明了所有 AJAX 请求者和回调共享的核心选项。
2. Ajax.PeriodicalUpdater()

定期执行 AJAX 请求并根据响应文本更新容器的内容。
3. Ajax.Request()

启动和处理 AJAX 请求。
4. Ajax.Responders()

一个全局监听器的存储库，通知 Prototype 基于 AJAX 请求的每个步骤。
5. Ajax.Response()

作为所有 Ajax 请求回调的第一个参数传递的对象。
6. Ajax.Updater()

执行 AJAX 请求并根据响应文本更新容器的内容。

Prototype - 表达范围

Prototype 范围表示值的区间。获取范围的首选方法是使用 **$R** 实用程序函数。

您可以使用简单的语法创建一大范围的值，如下所示：

$R(1, 10).inspect();

$R('a', 'e').inspect();

这将产生以下结果 -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

include() 方法

此方法确定值是否包含在范围内：

语法

Range.include(value);

返回值

如果包含值，则返回 true，否则返回 false。

示例

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

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

输出

Prototype - 定期执行

很多时候需要在一段时间后多次执行某个函数。例如，您可能希望在给定时间后刷新屏幕。Prototype 提供了一种简单的机制来使用 PeriodicalExecuter 对象实现它。

PeriodicalExecuter 提供的优势在于，它可以防止回调函数的多个并行执行。

创建 PeriodicalExecuter

构造函数接受两个参数：

  • 回调函数。
  • 执行之间的时间间隔（以秒为单位）。

启动后，PeriodicalExecuter 将无限期触发，直到页面卸载或使用 stop() 方法停止执行程序。

示例

以下示例将在每 5 秒后弹出一个对话框，直到您按下“取消”按钮停止它。

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

输出

打印页面
上一页
下一页
广告