JavaScript 框架比较（2）JavaScript 框架的典型特性

look_w

JavaScript 框架的典型特性现在，让我们看一看大多数 JavaScript 框架都具备的有用特性。包括：

• 选择器（Selector）
• DOM 遍历
• DOM 操作
• 实用（Utility）函数
• 事件处理
• Ajax

在解释每个特性时，我将会用以下的一个或几个 JavaScript 框架举例说明：Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每个框架的实现和语法都各不相同，但概念都是相同的。每个框架都有一个详细的 API 参考，可帮助您理解如何使用该特定库中的特性。        
选择器大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。通常来说，这些选择器会使获得 HTML 元素引用的过程快很多，并允许通过 ID、类名、元素类型甚至使用一组伪选择器（pseudo-selector）来查找元素。        
例如，使用常规 JavaScript，您也许会用以下代码通过 ID 来选择 DOM 元素：        

1	var theElement = document.getElementById('the_element');

与其他框架一样，MooTools 提供了执行此操作的快捷方法。除了选取该元素，MooTools 还可通过一系列实用函数扩展此元素。其语法如下：        

1	var theElement = $('the_element');

如上所示的单美元符号（dollar）函数，在很多（但不是所有）流行的 JavaScript 框架中都可用，而且语法也大体一致。Prototype 库则更进一步，允许通过 ID 一次选取多个元素，并返回元素数组。和 MooTools 一样，可用 Prototype 实用函数扩展这些元素。用 Prototype 一次选取多个元素的语法是：        

1	var elementArray = $('element_one', 'element_two', 'element_three');

在  一节中，您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。        
在前面的例子中，必须提供需要选取的元素的 ID。然而，如果要选取多个元素（例如，所有图片）或是具有特定 CSS 类名的所有表行，那又怎么办呢？MooTools（还有其他库）提供了一个简单的方法来实现此功能 — 双美元符号（dollar-dollar）函数。它的工作方式与单美元符号函数相同，不同之处在于它接受 CSS 元素名、类名、伪选择器作为参数，而不是接受元素 ID 作为参数。例如，要使用 MooTools 选取 Web 页面上的所有图片，将用以下代码：              

1	var allImages = $$('img');

这将返回一个包含文档中的所有图片的数组，其中每一个图片都使用单美元符号函数进行扩展，以包含 MooTools 实用函数。
根据标记名选取元素非常有用，但如果只是想根据 CSS 类选择一个元素子集，该怎么办呢？这也很简单。在下面的例子中，MooTools 将会选择 CSS 类名为 “odd” 的所有表行。这在实现表行条状化（在表行之间交替变化背景色）时将非常有用：        

1	var allOddRows = $$('tr.odd');

实际上，MooTools 提供了实现表行条状化（row striping）的更好方法。在上面的例子中，假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名：

1	var allOddRows = $$('tbodydd');

这是一个伪选择器的例子，将会返回所有符合条件的对象，在本例中为页面中的 tbody（表主体）的所有奇数子元素。MooTools 伪选择器的其他例子包括：        

• checked— 选取所有选中的元素（例如，选中的复选框）
• enabled— 选取所有启用的元素
• contains— 选取所有包含作为参数传递给选择器的文本的元素（例如，contains('this text')）

如前所述，并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo! User Interface) 库第 3 版中，用以下代码根据 ID 选取元素（请注意 YUI 3 要求在 ID 前传递 ID 选择器符号 #）：        

1	var theElement = Y.one('#the_element');

同样，与使用双美元符号函数根据标记或类名检索元素不同的是，YUI 使用了 Y.all 函数：        

1	var allOddRows = Y.all('tr.odd');

ExtJS 使用类似的方式，用以下语法根据 ID 选取元素：

1	var theElement = Ext.get('the_element');

以下语法用于根据标记和类名选取元素：

1	var allOddRows = Ext.select('tr.odd');

在下一节中，您将看到 JavaScript 框架如何轻松遍历 DOM，换句话说，就是查找选定元素的父元素、子元素、兄弟元素。您还会学到如何使用库操作 DOM 以修改元素。