Prototype 1.6 边学边译 -- 工具函数 $A

最新推荐文章于 2009-01-07 16:55:00 发布

翻译最新推荐文章于 2009-01-07 16:55:00 发布 · 708 阅读

文章标签：

#prototype #扩展 #function #join #each #null

Prototype 1.6 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Prototype库中的$A函数，它能将类似数组的集合转换为真正的Array对象，适用于NodeList、HTMLCollection及arguments对象等。文章通过示例展示了如何利用$A提升DOM操作效率及函数参数处理。

$A

$A(iterable) -> actualArray

接受一个类似于数组的集合（可以使用数字进行索引）作为参数，返回与之等同的 Array 对象。该函数是 Array.from 方法的简称，但在将集合转换为 Array 时，应优先使用它。

$A 主要是用来将可当作数组使用的任意集合转换为一个实质的 Array 对象，例如： NodeList 或是通过各种 DOM 方法返回的 HTMLCollection 集合，还有在自定义的函数中使用到的 arguments 对象。

使用 Array 对象的理由很简单：Prototype 扩展了 Array，使其增加了大量额外的方法，并且还混入(mix in)了 Enumerable 模块，随之又带进很多强大的方法。因此，在 Prototype 中，Array 相对于其它集合类型，更像是一张王牌。

集合到 Array 的转换规则非常简单：null，undefined 和 false 转换为一个空的Array；任何具有显式的 toArray 方法的对象（就像许多 Prototype 对象一样），直接调用 toArray 方法进行转换；否则，首先假定参数“看起来像是一个数组”（例如具有 length 属性和 [] 操作符），然后按常规去遍历它的各个组成部分。

样例

大家所熟悉的 DOM 方法 document.getElementsByTagName() 其实并没有返回一个 Array，而是返回一个实现了基本数组“接口”的 NodeList 对象。IE 不允许我们在 NodeList.prototype 上扩展 Enumerable。所以只能先返回 NodeList 对象，再转换为 Array：

var paras = $A(document.getElementsByTagName('p')); 
paras.each(Element.hide);
$(paras.last()).show();

注意上面使用的 each 和 Element.hide 方法，因为数组可以包含任何对象（而不仅只是 DOM 元素），所以 $A 并没有对返回的值进行 DOM 扩展。为使用 hide 实例方法，我们首先要确保对所有的目标元素都进行了 DOM 扩展：

$A(document.getElementsByTagName('p')).map(Element.extend).invoke('hide');

你想用一种简单的方法显示出你函数里的参数吗？Array 有一个很好用的方法 join。但是存在于所有函数对象中的 arguments 对象与 Array 并没有继承关系。那么，该如何做呢？你会选择复杂的方法还是简单的方法：

// 复杂的方法...
function showArgs() { alert(Array.prototype.join.call(arguments, ', ')); } 
// 简单的方法... 
function showArgs() { alert($A(arguments).join(', '));}