JavaScript 框架比较(5)

除了 DOM 操作函数，JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如，假设您有一个表，您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类，并且您想要将这个类动态添加到行中。在 YUI 中，可以使用以下代码检查行中是否已经具有 hover 类，如果已经有的话，则删除它，如果没有的话，则添加它： if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');

而且，大多数 JavaScript 框架都有内置的 CSS 操作函数。

回页首

实用函数

很多 JavaScript 框架提供了大量实用函数，可使 JavaScript 开发变得很容易。由于这些函数非常多，因此本文无法一一介绍。我将只讨论大多数框架都具备的一些比较重要的函数。

如果您曾经使用 JavaScript 处理过数组，你应该熟悉使用 for 循环来遍历数组以处理数组值。例如，看一下清单 2 的代码：

清单 2. 遍历 JavaScript 数组的传统方法
var fruit = ['apple', 'banana', 'orange'];
for(var i = 0; i < fruit.length; i++) {
alert(fruit[i]);
}

清单 2 中的代码没有问题，但有些冗长。大多数 JavaScript 框架包含 each 函数，它会对数据组的每个元素调用一个指定的函数。使用 MooTools，可以用清单 3 的代码执行与清单 2 相同的操作。

清单 3. 使用 MooTools 中的 each 函数
['apple', 'banana', 'orange'].each(function(item) {
alert(item);
});

清单 3 中的语法与 Prototype 和 jQuery 中的语法相同，而与 YUI 和 ExtJS 中的语法有细微差异。然而，当用于 hash 映射或对象而不是数组时，各框架的语法都不一样。例如在 MooTools 中，将用到清单 4 的代码：

清单 4. 在 MooTools 中对基于键/值对的对象使用 each
var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(value, key) {
alert(key + ": " + value);
});

在 Prototype 中，将用到清单 5 中的代码。

清单 5. 在 Prototype 中对基于键/值对的对象使用 each
var hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(pair) {
alert(pair.key + ": " + pair.value);
});

每个框架都包含很多有用的函数，通常划分为 String 函数、Number 函数、Array 函数、Hash 函数、Date 函数等等。更多信息，请查阅相关 JavaScript 框架的 API 参考资料。

回页首

事件处理

每个 JavaScript 框架都实现了跨浏览器事件处理支持，鼓励您从旧式的内联事件连接转向一种流线化方法。看一下清单 6 中的 jQuery 示例，其中在 hover 事件中高亮显示 div 元素。

清单 6. 使用 jQuery 连接 hover Event
$('the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
});

这是一个由 jQuery 实现的特殊事件，请注意它有两个函数，触发 onMouseOver 事件时调用第一个，触发 onMouseOut 事件时调用第二个。这是因为 hover 没有标准的 DOM 事件。让我们查看一个更典型的事件，例如 click（查看清单 7）。

清单 7. 使用 jQuery 连接 click Event
$('the-button').click(function() {