HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Prototype - 快速指南

Prototype - 概述

什么是 Prototype?

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

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

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

Prototype −

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

  • 具有对类样式 OOP 的内置支持，包括继承。

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

  • 具有强大的 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>

输出

为什么要使用本教程?

在 prototypejs.org 上可以找到关于 Prototype Framework 的非常好的文档，那么为什么要参考本教程呢!

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

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

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 编码的基石之一。花些时间研究它们，熟悉这些方法。

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

S.No. 方法 &描述
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 - 元素对象

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

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

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

Prototype 元素方法

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

S.No. 方法 &描述
1. absolutize()

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

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

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

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

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

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

classNames()

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

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

根据可选参数选项的定义，将源的位置和/或尺寸克隆到元素上。
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 属性相反，后者将返回任何节点。
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()

模拟效果不佳的通过将元素的溢出值设置为"隐藏"，支持 CSS 剪辑属性。返回元素。
33. makePositioned()

如果元素的初始位置为"静态"或未定义，则允许通过将元素的 CSS 位置设置为"相对"，轻松创建包含块的 CSS。返回元素。
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 数字方法

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

S.No. 方法 &描述
1. abs()

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

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

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

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

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

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

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

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

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

Prototype - 字符串处理

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

以下是所有处理字符串的函数列表，其中包含示例。

Prototype 字符串方法

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

S.No. 方法 &描述
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];
    // 您的代码在此处处理 item...
}

现在，如果您使用的是 Prototype，则可以按如下方式替换上述代码 −

myArray.each(function(item) {
    // 您的代码在此处处理 item...
});

以下是所有函数的列表，其中包含处理数组的示例。

Prototype数组方法

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

S.No. 方法和说明
1. clear()

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

返回数组的副本，使原始数组保持完整。
3. compact()

返回数组的新版本，不包含任何空值/未定义值。
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。

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

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

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

// 根据键和值设置值。
myhash.set('name', 'Bob');

// 按照以下方式获取键"name"的值。
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// 取消设置键和值
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

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

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

Prototype哈希方法

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

S.No. 方法 &描述
1. clone()

返回哈希的克隆。
2. each()

遍历哈希中的名称/值对。
3. get()

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

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

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

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

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

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

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

返回克隆的 vanilla对象。
11. toQueryString()

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

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

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

收集哈希的值并将它们返回到数组中。

Prototype - 基本对象

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

  • 如果您是一名普通开发人员，则可以使用现有函数，如 inspect 或 clone。

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

Prototype 对象方法

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

S.No. 方法和描述
1. clone()

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

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

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

如果 obj 是数组，则返回 true，否则返回 false。
5. isElement()

如果 obj 是类型 1 的 DOM 节点，则返回 true，否则返回 false。
6. isFunction()

如果 obj 是函数类型，则返回 true，否则返回 false否则返回 true。
7. isHash()

如果 obj 是 Hash 类的实例，则返回 true，否则返回 false。
8. isNumber()

如果 obj 是数字类型，则返回 true，否则返回 false。
9. isString()

如果 obj 是字符串类型，则返回 true，否则返回 false否则。
10. isUn​​defined()

如果 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 director 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( "格式化输出:" + myTemplate.evaluate(conv) );
});

那么，让我们将这三个步骤放在一起 −

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            // 创建带有格式化内容和占位符的模板。
            var myTemplate = new Template('The \ TV show #{title} was director by #{author}.');
            
            // 创建带有占位符所需值的哈希
            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 ];
            
            // 现在应用模板以生成所需的格式化输出
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>单击按钮查看结果。</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); // 我们已经指定了上下文

myObject;

这将产生以下结果 −

输出

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

高效使用

  • 当需要对所有元素调用相同的方法时，请使用 invoke() 方法。

  • 当需要在所有元素上获取相同的属性时，请使用 pluck() 方法。

  • findAll/select 方法检索与给定谓词匹配的所有元素。相反，reject() 方法检索与谓词不匹配的所有元素。在需要这两个集合的特定情况下，您可以避免循环两次:只需使用 partition() 方法即可。

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

Prototype 可枚举方法

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

S.No. 方法 &描述
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()

返回最大元素(或基于元素的计算)，如果枚举为空，则返回未定义。元素可以直接比较，也可以先应用迭代器并比较返回的值。
17. member()

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

返回最小元素(或基于元素的计算)，如果枚举为空，则返回未定义。元素可以直接进行比较，也可以先应用迭代器并比较返回的值。
19. partition()

将元素分成两组:一组被视为真，一组被视为假。
20. pluck()

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

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

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

返回枚举。
24. sortBy()

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

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

将 2 个 + 序列拉在一起(想象一下裤子上的拉链)，提供一个元组数组。每个元组包含每个原始序列的一个值。

Prototype - 事件处理

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

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

Prototype Framework 提供 Event 命名空间，其中包含各种方法，所有方法均以当前事件对象为参数，并在所有主流浏览器中愉快地生成您请求的信息。

Event 命名空间还提供了可用于键盘相关事件的标准化键代码列表。命名空间 − 中定义了以下常量

S.No. 键常量 &描述
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

代表删除键。
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>
         // 注册事件"click"及相关回调。
         Event.observe(document, 'click', respondToClick);
  
         // 回调函数来处理事件。
         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事件方法

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

S.No. 方法 &描述
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()

取消注册所有通过观察注册的事件处理程序。自动为您连接。自 1.6 版起不可用。

Prototype - 表单管理

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

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

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

Prototype 表单方法

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

S.No. 方法和说明
1. disable()

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

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

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

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

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

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

一种便捷方法，用于通过 Ajax.Request 将表单序列化并提交到表单操作属性的 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 在整个 Web 上被 API 广泛使用，是 Ajax 请求中 XML 的快速替代方案。

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

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

JSON 编码

Prototype 提供以下方法编码 −

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

S.No. 方法 &描述
1. Number.toJSON()

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

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

返回给定数组。
4. Hash.toJSON()

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

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

返回给定Object.

如果您不确定需要编码的数据类型，最好的办法是使用 Object.toJSON，因此 −

var data = {name: 'Violet', employment: '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);

这将产生以下结果 −

'"我的名字是约翰，我今年 49 岁。"'

解析 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同步 JavaScript 和 XML。AJAX 是一种借助 XML、HTML、CSS 和 Java Script 创建更好、更快、更具交互性的 Web 应用程序的新技术。

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

Prototype 对 AJAX 的支持

Prototype 框架使您能够以非常简单、有趣且安全(跨浏览器)的方式处理 Ajax 调用。 Prototype 还以智能方式处理从服务器返回的 JavaScript 代码，并提供用于轮询的辅助类。

Ajax 功能包含在全局 Ajax 对象 中。此对象提供了所有必要的方法，可轻松处理 AJAX 请求和响应。

AJAX 请求

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

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

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

AJAX 响应回调

Ajax 请求默认是异步的，这意味着您必须有回调来处理来自响应的数据。在发出请求时，回调方法在选项哈希中传递 −

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! 

" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

此处，两个回调在哈希 − 中传递

  • onSuccess
  • onFailure

上述两个调用中的任何一个都会根据响应的状态进行相应调用。传递给两者的第一个参数是本机 xmlHttpRequest 对象，您可以分别从该对象中使用其 responseText 和 responseXML 属性。

您可以指定两个回调，一个或一个都不指定 - 这取决于您。其他可用的回调函数有 −

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

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

注意 − 并非所有浏览器都一致地实现了 onUninitialized、onLoading、onLoaded 和 onInteractive 回调函数。一般来说，最好避免使用这些回调函数。

原型 AJAX 方法

Ajax 对象 提供了所有必要的方法，可轻松处理 AJAX 请求和响应。以下是与 AJAX 相关的所有方法的完整列表。

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

S.No. 方法 &描述
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>单击按钮查看结果。</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>

输出

❮ 上一节 下一节 ❯