javascript框架比较（三）

实用函数

　　很多 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()　{　
　　alert('You　pushed　the　button!');　
});　

　　如您所见，本例中只有一个函数参数。jQuery 使用这种方式处理大多数 JavaScript 事件。在 jQuery 中使用事件处理函数时，上下文变量是指触发事件的元素。有些框架并不使用这种处理方式。以 Prototype 为例，清单 8 显示了用 Prototype 实现的与清单 7 等价的代码。

清单 8. 使用 Prototype 连接 click Event

$('the-button').observe('click',　function(e)　{　
　　alert('You　pushed　the　button!');　
});　

　　您首先将注意到没有 click 函数，而是使用了 observe 函数，该函数在引用它自身之前将事件作为参数。您还可能注意到该函数的参数 e。这就是指向触发事件的元素的上下文变量。为了探究其工作原理，让我们针对 Prototype 重写 清单 6 的代码（请看清单 9）。

清单 9. 使用 Prototype 连接 hover Event

$('the-box').observe('mouseover',　function(e)　{　
　　var　el　=　Event.element(e);　
　　el.addClassName('highlight');　
});　
$('the-box').observe('mouseout',　function(e)　{　
　　var　el　=　Event.element(e);　
　　el.removeClassName('highlight');　
});　

　　与 jQuery 中使用美元符号函数获取上下文变量不同的是，在 Prototype 中需要使用 Event.element() 函数。并且，您需要对 mouseover 和 mouseout 使用不同的函数。

　　在阅读本文的过程中，您也许会注意到函数使用内联方式创建且都没有命名。这意味着它们无法被重用。Prototype 的 hover 例子展示了如何使用已命名的函数作为替代方法。如清单 10 所示。

清单 10. Prototype 中改进的 hover 例子

function　toggleClass(e)　{　
　　var　el　=　Event.element(e);　
　　if(el.hasClassName('highlight'))　
　　　　row.removeClassName('highlight');　
　　else　
　　　　row.addClassName('highlight');　
}　
　
$('the-box').observe('mouseover',　toggleClass);　
$('the-box').observe('mouseout',　toggleClass);　

　　您会注意到，这次只定义了一个函数供 mouseover 和 mouseout 事件调用。该函数会判断元素是否已经高亮显示了类名，并根据查找结果执行添加或删除。您也许会注意到 e 参数是隐式传递的。换句话说，不需要在 observe 函数中以参数形式显式传递事件。

　　Ajax

　　使用 JavaScript 框架的另一个有说服力的理由是标准化的跨浏览器 Ajax 请求。Ajax 请求是一个异步 HTTP 请求，通常发送给服务器端脚本，后者返回 XML、JSON、HTML 或普通文本格式的响应。大多数 JavaScript 框架都有某种形式的 Ajax 对象，以及一个以参数形式接受一组选项的请求方法。这些选项通常包含 callback 函数，当脚本一接收到来自 Web 服务器的响应时，就会调用此函数。让我们看一下 ExtJS、MooTools 和 Prototype 中的 Ajax 请求的样子。

　　首先，看一下典型的 ExtJS Ajax 请求（请看清单 11）。

清单 11. 一个 ExtJS Ajax 请求

Ext.Ajax.request({　
　　url:　'server_script.php',　
　　params:　{　
　　　　name1:　'value1',　
　　　　name2:　'value2'　
　　},　
　　method:　'POST',　
　　success:　function(transport)　{　
　　　　alert(transport.responseText);　
　　}　
});　

　　ExtJS 中的 request 方法只有一个参数，这是一个包含 url、params、method 和 success 等不同字段的对象。url 字段包含服务器端脚本的 URL，该脚本将被 Ajax 请求调用。params 字段本身就是一个对象，包含有将被传递给服务器端脚本的键/值对。method 字段可以取两个值：GET 或 POST。它的默认值为未定义，但如果请求中有 params，将会默认作为 POST 处理。最后一个字段 success 是 Web 服务器返回成功响应时调用的函数。在本例中，假设服务器端脚本返回普通文本，并且文本会通过警告框显示给用户。

　　下一步，我们看看同样的请求在 MooTools 中是什么样子（请看清单 12）。

清单 12. 一个 MooTools Ajax 请求

new　Request({　
　　url:　'server-script.php',　
　　data:　{　
　　　　name1:　'value1',　
　　　　name2:　'value2'　
　　},　
　　method:　'post',　
　　onComplete:　function(response)　{　
　　　　alert(response);　
　　}　
}).send();　

　　如您所见，MooTools 与 ExtJS 非常相似。你也许注意到，与使用 params 不同，这里使用 data 字段传递变量，而且必须使用小写指定方法。还有，没有使用 success callback 函数，MooTools 使用了一个 onComplete 函数。最后，与 ExtJS 不同的是，在 MooTools 中，您需要使用 Request 对象的 send() 函数发送请求。