After [不推荐]
new Insertion.After(element, html)
将 html 插入到页面中作为 element 的后继兄弟节点。
从 Prototype 1.6 开始,Insertion 类已经完全被 Element#insert 取代。
注意,如果插入的 HTML 包含有 <script> 标签,在插入后标签中的脚本会被自动执行 (Insertion.After 在内部调用 String#evalScripts)。
样例
初始的 HTML
<div>
<p id="animal_vegetable_mineral">
In short, in all things vegetable, animal, and mineral...
</p>
</div>
JavaScript
new Insertion.After(
'animal_vegetable_mineral',
"<p>I am th...
从 Prototype 1.6 开始,Insertion 类已经完全被 Element#insert 取代。
Insertion 用于动态插入 HTML 片断(显然,纯文本也包括在内),它提供了跨浏览器的支持。 可以采用四种方式进行插入:After、Before、Bottom 和 Top,它们所表现出来的行为正如它们的名字一样。
注意,如果插入的 HTML 包含有 <script> 标签,在插入后标签中的脚本会被自动执行 (Insertion 在内部调用 String#evalScripts)。
方法
After [不推荐]
new Insertion.After(element, html)
将 html 插入到页面中作为 element 的后继兄弟节点。
Before [不推荐]
new Insertion.Before(element, html)
将 html 插入...
wrap [1.6.0]
wrap(wrapperFunction[, arg...]) -> Function
将原始函数封装到参数 wrapperFunction 表示的函数中,返回一个新的函数。调用新函数时, 实质是将 wrapperFunction 函数的第一个参数设置为绑定了当前 this 对象的原始函数,然后再调用 wrapperFunction 函数。
Function#wrap 体现了 面向方面的程序设计 的本质,让你能够轻松的为已有的函数指定调用前和调用后的行为,改变返回的结果, 甚至还可以阻止对原始函数的调用。
样例
String.prototype.capitalize = String.prototype.capitalize.wrap(
function(proceed, eachWord) {
if (eachWord && this.include(&...
methodize
someFunction.methodize() -> Function
将原始函数方法化,返回一个新的函数,调用新函数时,实质是将原始函数的第一个参数设置为当前 this 所指向的对象,然后调用原始函数。
methodize 方法对原始函数进行转换,当调用时将原函数中第一个显式的参数设置为 this(当前上下文),成为一个隐含参数。它常用于转换一个函数作为对象或对象原型(prototype 属性)的方法,并简化函数的签名。
样例
// 从一个直接操作目标对象的简单函数开始:
var fn = function(target, foo) {
target.value = foo;
};
var object = {};
// 使用原始函数
fn(object, 'bar');
object.value
//-> 'bar'
// 将 fn 方法...
delay [1.6.0]
delay(seconds[, arg...]) -> Number
延迟参数 seconds 指定的时间段再执行函数,arg 是调用这个函数所需的参数。
该方法的行为非常类似于 window.setTimeout。 该方法返回一个 ID,可以在函数运行前使用 window.clearTimeout 取消函数的运行。
如果希望当 JavaScript 解释器空闲后马上运行函数,请使用 Function#defer 方法。
样例
// 以前:
window.setTimeout(function() {
Element.addClassName('foo', 'bar');
}, 1000);
// 现在:
Element.addClassName.delay(1, 'foo', 'bar');
// 取消函数的延迟执行
var id = Element.hide.delay(5, 'foo');...
defer [1.6.0]
defer(arg...) -> Number
当 JavaScript 解释器空闲后,再运行函数。
译注:其实这个方法是调用 delay,并将 seconds 参数设为 0.01 秒。因为从本质上来说,JavaScript 是单线程的(据说 Google Chrome 的 V8 引擎是多线程的),在 delay 方法中,当代码执行到 window.setTimeout 一句时,程序只是记下当前的时间, 然后继续执行下面的语句,只有当下面的语句都执行完后,才检查此时的时间是否大于 setTimeout 指定的时间间隔,如果大于,则执行 setTimeout 中指定的函数。这就是“解释器空闲后,再运行函数”的由来。
一个“延迟执行”的函数不会立即运...
curry [1.6.0]
curry(arg...) -> Function
返回一个新的函数,该函数是原始函数对象用 arg 指定的值填充了部分参数的版本。
Function#curry 的行为类似于没有初始作用域参数的 Function#bind 方法。
样例
String.prototype.splitOnSpaces = String.prototype.split.curry(" ");
"foo bar baz thud".splitOnSpaces();
//-> ["foo", "bar", "baz", "thud"]
...
bindAsEventListener
bindAsEventListener(thisObj[, arg...]) -> Function
一个专用于事件的 bind 方法的变体, 它确保事件触发后会将当前事件对象作为第一个参数传递给事件处理函数。
如果你不清楚“绑定”是什么,请查阅 Function 概述。如果你不是非常明白 bind() 能够做什么,请查阅它的文档。
假如创建一个用于事件处理的函数,你需要以某种方式获取当前的事件对象,同时还要控制函数运行时所在的 上下文,该怎么办?bindAsEventListener 都为你考虑到了,它将事件处理函数绑定到指定的上下文 (thisObj),并且确保当事件发生时,事件对象会传递到事件处理函数。
对于仅实现了 DOM Level 0 事件...
bind
bind(thisObj[, arg...]) -> Function
用另一个函数来封装原始的函数对象,将函数运行时的作用域限定为 thisObj 所指定的对象。
译注:该方法返回一个新的函数对象,返回的函数是原函数将其 this 关键字指向 thisObj 后的版本,并且,如果指定了可选的 arg 参数,还会将原函数中的部分或全部参数固定为 args 指定的值。该方法不会修改原函数对象。
关于绑定,在 Function 概述中已经作了论述。它对于新手来说,可能是一个难以捉摸的东西, 但事实上它是一个非常简单的概念。当然,这需要对 JavaScript 语言有一定的基础。
在 JavaScript 中,函数通常运行在一个特定的上下文中(通常称为“作用域[scope]”...
argumentNames 【1.6】
someFunction.argumentNames() -> Array
获取函数定义的形参名称列表,并作为一个字符串数组返回。如果函数未定义参数,则返回一个空数组。
样例
var fn = function(foo, bar) {
return foo + bar;
};
fn.argumentNames();
//-> ['foo', 'bar']
Prototype.emptyFunction.argumentNames();
//-> []
...
Prototype 对于函数的绑定(binding)提出了一些看法。
什么是绑定?
“绑定”最基本的用途是保证函数运行时,this 关键字会指向正确的对象。 虽然通常会有一个恰当的默认绑定(默认情形下 this 指向该方法所属的对象),但有时 this 会丢失它所应指向的对象,例如将函数引用作为参数传递时。
如果你不清楚 JavaScript 中 this 关键字的含义,请跳到 bind() 方法的文档,这篇文档中的样例将这个关键字的含义阐释得非常清楚。
Prototype 的补救措施!
Prototype 解决了 this 的指向问题。在 Prototype 中,对于任意一个函数,均能够找到两个新的方法: 一个用来确保正确的绑定(它甚至可以提前将参数进行绑定!),另一个专...
partition
partition([iterator = Prototype.K[, context]]) -> [TrueArray, FalseArray]
把元素分为两组:一组为 true,一组为 false。默认情形下使用 Javascript 标准规范判断元素等价的 bool 值,如果指定了 iterator 参数,根据 iterator 定义的函数判断元素等价的 bool 值。
相对于同时使用 findAll/select 和 reject 这两个方法来获取 Enumerable 的分组,partition 是一个更好的解决办法:它只需要对元素进行一次遍历。
可选的 context 参数是 iterator 要绑定的对象,若设定该参数,iterator 中的 this 关键字将指向 context 对象。
样例
['hello', null, 42, false, true, , 17].partition()
// -> [['hel...
undoPositioned
undoPositioned(element) -> HTMLElement
设置 element 返回到在元素上应用 Element.makePositioned 方法之前的状态,返回元素本身。
对于 element 内具有绝对定位属性的子元素,调用该方法后,它们定位的基准位置将会更改为 element 最近的 CSS position 属性为 'absolute'、'relative' 或 'fixed' 的那个先代节点。
样例
<p>lorem […]</p>
<div id="container">
<div id="element" style="position: absolute; top: 20px; left: 20px;"></div>
</div>
$('container').makePositioned();
// -> HTMLElem...
previousSiblings
previousSiblings(element) -> [HTMLElement...]
返回 element 的所有前导兄弟节点,结果为一个数组,数组元素已经过 扩展。
如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和 body 是兄弟节点(它们的父节点都是 html)。前导兄弟节点可简单的看作文档中排在 elemnet 之前的兄弟节点。
返回的数组成员按照元素在页面中的顺序 反序 进行排列(例如:索引 0 表示距 element 最近的前导兄弟节点)。
注意:所有 Prototype 的 DOM 扩展方法均忽略文本节点,仅返回元素节点。
样例
<ul>
<li id="golden-delicious">Golden Delicious</li>
&...
previous
previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined
返回匹配 cssRule 指定规则的 element 的前一个兄弟节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule 参数,则默认匹配所有前导兄弟节点。 如果没有符合条件的节点,返回 undefined。
Element.previous 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.up、 Element.down 和 Element.next,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的前导兄弟节点进行精确选择。 (注意:如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和...
positionedOffset [1.6]
positionedOffset(element) -> [Number, Number] 或 { left: Number, top: Number }
以 element 的容器块(Containing Block)节点(译注:距离元素最近的 CSS position 属性为 relative 或 absolute 的先代节点)为坐标原点,返回 element 的坐标偏移值(元素的容器块节点可通过 Element#getOffsetParent 方法获取)。
译注:假定返回值为 offset,则 X 轴坐标可通过 offset[0] 获取,也可以通过 offset.left 获取,Y 轴坐标可通过 offset[1] 获取,也可通过 offset.top 获取。
这个方法其实是累加元素及其所有父元素的 offsetLeft 和 offsetTop,直...