译文：JavaScript框架较量（一）

导言：JavaScript是一种面向工具的剧本说话，一向以来用作Web赏识器应用措施客户端剧本接口的选择。JavaScript应承Web开拓职员编程与网页上的工具的事变,为凭空操纵这些工具提供了一个平台。当JavaScript最初推出时，它凡是用来提供一些微不敷道的成果，如时钟、在赏识器状态栏中转动文本。其它一个常用特色就是“rollover link”,即当用户的鼠标滑过工具时，其文本的颜色或配景图片产生改变。然而，连年来Ajax为收集编程带来了全新的互动，JavaScript几经成长变得越发有效。在Ajax之前，任那里事器端处理赏罚或数据库会见都必要整页面被“革新”或由赏识器泛起新的页面。这不只迟钝，令用户扫兴，并且也挥霍了带宽和资源。

Ajax就是异步的JavaScript和XML，固然引用XML不在有用，可是Ajax能对除了XMl的其余几种名目标数据作出相应，如JSON(JavaScript工具暗示法)。 Ajax的事变道理是，以异步的方法提交一个 HTTP哀求提交到web处事器，不革新也不泛起整个页面，仅泛起相应的内容。相反，开拓职员凡是行使DOM（文档工具模子）操纵修改网页的一部门，HTTP相应返回的数据将反应这些改变。

什么是JavaScript框架？

JavaScript自己是一种很是强盛的说话，你不必要任何特另外框架就可以建设由它支持的富互联网应用体系（RIA）。可是，行使JavaScript并不是一件轻易的事，首要是由于在试图提供多种赏识器支持时各类并发症的呈现。和HTML和CSS一样，差异的赏识器的JavaScript执行方法差异，那么确保您的JavaScript代码跨赏识器兼容可以说是一个噩梦。

一个JavaScript框架或库现实上是一系列器材和函数，它能更轻易发生跨赏识器兼容的JavaScript代码。每个库在很多风行的最新版本的Web赏识器颠末尾严酷测试。因此，您完全可以信托，行使这些框架中的任何一个，您的基于JavaScript的RIA在差异的赏识器僻静台中将概略同等。

除了赏识器兼容性题目外，JavaScript框架可以更轻易地编写代码去获取、遍历及哄骗DOM元素。它们不只能提供一个快捷的函数来获取一个DOM元素的引用，并且还应承菊花式的DOM遍历函数链查找怙恃、后世或任何深度的兄弟节点元素。最后，框架提供了一系列的函数，使其更轻易的哄骗这些工具，应承其内容变动、添加、删除，可能哄骗class的样式而影响元素的外面。

JavaScript框架的另一个重要特色就是能更好的支持变乱处理赏罚。因为赏识器之间的差异实现，跨赏识器变乱处理赏罚可以说是一个噩梦。因此，JavaScript框架凡是将赏识器变乱包装起来，并提供一系列有效的跨赏识器函数来处理赏罚它们。一些框架也提供了尺度化的代表键盘键码系列的变乱（如Esc键、Enter键、光标等等）。

全部这些成果长短常有效的，JavaScript框架已在其最近风行Ajax应用中起重要浸染。和JavaScript其他方面一样，每个Web赏识器倾向于支持以差异的方法Ajax，使Ajax支持全部的赏识器将是很沉重的事变。险些全部的JavaScript框架都包罗必然情势的Ajax库，凡是是提供Ajax哀求和相应工具，在对相应作出评价后，更新DOM元素，轮询一个特定的哀求。

一个JavaScript框架的典范特性

此刻让我们看看大大都JavaScript框架都具有的一些成果。这些特色有：

选择器
DOM遍历
DOM操纵
适用函数
变乱处理赏罚
Ajax
为了更好的解释这些特色，我将从下面一个或多个JavaScript框架中罗列一个例子：Prototype, jQuery， YUI，ExtJS和 MooTools。固然每个框架的执行环境和语法差异，但其观念大抵沟通。每个框架有一个具体的API参考，你可以参考它抉择怎样行使这些特定库的特色成果。

选择器

大大都JavaScript框架可实现某种情势的快速元素选择。一样平常来说，这些选择器使获取一个元素的引用越发快捷，并应承你通过ID、class、元素范例或一些伪类选择符来选取元素。

譬喻，行使凡是的JavaScript，你可以行使下面的代码借助ID来取得DOM元素。

var theElement = document.getElementById('the_element');
与其他几个框架一样，MooTools提供了一个执行该操纵的快捷要领。除了选择元素，MooTools通过本身一系列的成果函数扩展了元素。

var theElement = $('the_element');
$函数在几个风行的框架（并非所有）中可用，其语法大抵沟通。Prototype更深一层，通过ID在任何时辰可以选择多个元素，返回的是一个元素数组。与

MooTools一样，这些元素操作Prototype的适用函数扩展。操作Prototype库在任何时辰选择多个元素的语法是这样的：

var elementArray = $('element_one', 'element_two', 'element_three');
在适用函数这一部门，你将相识到JavaScript框架提供的一些函数迭代我们的荟萃越发轻易。

在前面的例子，你必需提供你欲选择元素的ID。可是，你要选择多个元素该怎么办？全部image、拥有特定className的表格的每一行。MooTools（其余的几个库）提供了一个很是简朴的要领来做到这一点－－$$函数。除了元素的ID外，他还可以接管以下参数：元素的名字、类名以及伪类选择器，其事变道理与$函数相似。譬喻，行使MooTools获取页面上全部的图片，你可以行使下面的代码：

var allImages = $$('img');
这将获得文档中全部imag的数组，每一个通过$函数和着适用函数举办扩展。

通过tag标签来选取工具长短常有效的，但假如你只想基于元素的class选取它的部门子集，掩饰怎么办？同样很简朴。在下面的例子中，MooTools将选择table中class为“odd”的行，这在对每行举办操纵时很有效（瓜代调动表格每一行的颜色）。

pre class=”brush:javascript”>
var allOddRows = $$(‘tr.odd’);

究竟上，MooTools提供了一个更好的要领执行行操纵。在前面的例子中，假定table的奇数行授予了类名“odd”。那么下面的代码不必要在table的每一行上界说任何类名。

var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="http://www.denisdeng.com/wp-includes/images/smilies/icon_surprised.gif"> dd');
这是一个伪类选择器的例子，它返回匹配类型的任何工具。在这个例子中，功效为页面中tbody元素中全部奇数行的子元素。MooTools其余伪类元素的例子包罗：

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!