JavaScript 框架比较

显著加强 JavaScript 开发的框架概览

Joe Lennon, 软件开发人员, 自由职业者

 

简介： 现代 Web 站点和 Web 应用程序倾向于依赖大量客户端 JavaScript 来提供丰富的交互功能，尤为是异步 HTTP 请求的出现使得不刷新页面就能够从服务器端脚本或数据库系统返回数据或响应。在本文中，您将了解如何经过 JavaScript 框架更轻松、更快速地建立具备高度交互性和响应性的 Web 站点和 Web 应用程序。

 

简介

JavaScript 是面向对象的脚本语言，长期以来用做 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象，并提供了一个可以动态操做这些对象的平台。在最初引入 JavaScript 时，一般只用于提供 Web 页面上的一些不重要的特性，如时钟功能和浏览器状态栏中的滚动文本等。另外一个常见的特性是 “rollover link”，就是当用户将鼠标移到图片或文本连接上时，图片或文本连接的颜色会改变。然而，近年来，随着 Asynchronous JavaScript and XML (Ajax) 概念将基于 Web 的编程的交互性提高到一个新高度，JavaScript 也变得愈来愈重要。在出现 Ajax 以前，全部服务器端处理或数据库访问都须要 “刷新” 整个页面或经过浏览器呈现一个新页面。这不只减慢了速度并使用户感到沮丧，并且还浪费带宽和资源。

Ajax 表示 Asynchronous JavaScript and XML，可是将其称为 XML 已再也不合适，由于 Ajax 请求能够返回多种格式的响应，而不限于 XML，例如 JSON (JavaScript Object Notation)。Ajax 的工做方式是容许 JavaScript 异步提交 HTTP 请求到 Web 服务器，而且在不刷新或呈现新页面的状况下呈现响应。相反，开发人员一般使用 DOM (Document Object Model) 操做来修改部分 Web 页面，显示其变化或由 HTTP 响应返回的数据。

 

回页首

什么是 JavaScript 框架？

JavaScript 自己就是一种功能强大的语言，您不须要额外的框架就可建立富互联网应用程序（RIA）。然而使用 JavaScript 并非件容易的事，主要是因为支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS同样，不一样的浏览器有不一样的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。

JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，所以，您能够放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不一样浏览器和平台上以相似的方式工做。

除了解决跨浏览器问题，使用 JavaScript 框架能够更容易地编写检索、遍历、操做 DOM 元素的代码。它们不只提供获取 DOM 元素引用的快捷函数，并且还容许 DOM 遍历函数以菊花链（daisy-chaining）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操做这些对象，能够改变、添加或删除内容自己；或者使用 CSS 样式类来改变元素的外观。

框架的另外一重要特性是其改进的事件处理支持。因为不一样浏览器的实现方式各不相同，跨浏览器事件处理将会很是艰难。所以 JavaScript 框架一般封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。

全部这些特性都很是有用，但 JavaScript 框架有一个特性对于它最近的流行很是重要 — 支持 Ajax。与 JavaScript 的其余许多方面同样，每一个 Web 浏览器每每以不一样方式支持 Ajax，这使得以一种在全部 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎全部 JavaScript 框架都包含某种形式的 Ajax 库支持，一般提供 Ajax 请求和响应对象，以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数（helper）。

 

回页首

JavaScript 框架的典型特性

如今，让咱们看一看大多数 JavaScript 框架都具有的有用特性。包括：

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

在解释每一个特性时，我将会用如下的一个或几个 JavaScript 框架举例说明：Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每一个框架的实现和语法都各不相同，但概念都是相同的。每一个框架都有一个详细的 API 参考，可帮助您理解如何使用该特定库中的特性。

 

回页首

选择器

大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。一般来讲，这些选择器会使得到 HTML 元素引用的过程快不少，并容许经过 ID、类名、元素类型甚至使用一组伪选择器（pseudo-selector）来查找元素。

例如，使用常规 JavaScript，您也许会用如下代码经过 ID 来选择 DOM 元素：

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

 

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

var theElement = $('the_element');

 

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

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

 

在 实用函数 一节中，您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。

在前面的例子中，必须提供须要选取的元素的 ID。然而，若是要选取多个元素（例如，全部图片）或是具备特定 CSS 类名的全部表行，那又怎么办呢？MooTools（还有其余库）提供了一个简单的方法来实现此功能 — 双美圆符号（dollar-dollar）函数。它的工做方式与单美圆符号函数相同，不一样之处在于它接受 CSS 元素名、类名、伪选择器做为参数，而不是接受元素 ID 做为参数。例如，要使用 MooTools 选取 Web 页面上的全部图片，将用如下代码：

var allImages = $$('img');

 

这将返回一个包含文档中的全部图片的数组，其中每个图片都使用单美圆符号函数进行扩展，以包含 MooTools 实用函数。

根据标记名选取元素很是有用，但若是只是想根据 CSS 类选择一个元素子集，该怎么办呢？这也很简单。在下面的例子中，MooTools 将会选择 CSS 类名为 “odd” 的全部表行。这在实现表行条状化（在表行之间交替变化背景色）时将很是有用：

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

 

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

var allOddRows = $$('tbody:odd');

 

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

 

回页首

DOM 遍历

根据 ID、元素类型或 CSS 类名查找元素很是有用，但如何根据元素在 DOM 树中的位置执行查找呢？换而言之，根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如，看一下清单 1 的 HTML 片断。

清单 1. HTML 片断（一个 HTML 表）

<table> <thead> <tr> <th>Name</th> <th>Email Address</th> <th>Actions</th> </tr> </thead> <tbody> <tr id="row-001"> <td>Joe Lennon</td> <td>joe@joelennon.ie</td> <td><a href="#">Edit</a>&nbsp; <a href="#">Delete</a></td> </tr> <tr id="row-002"> <td>Jill Mac Sweeney</td> <td>jill@example.com</td> <td><a href="#">Edit</a>&nbsp; <a href="#">Delete</a></td> </tr> </tbody> </table>

 

清单 1 用缩进表示每一个元素在 DOM 节点树中的位置。在该例中，table 元素是根元素，它有两个子节点，thead 和 tbody。thead 元素只有一个子节点 tr，后者有三个子节点 — 全部 th 元素。tbody 元素有两个子节点，均为 tr 元素，每一个 tr 元素又有三个子元素。每行的第三个子元素又有两个子节点，都是 a （锚点）标记。

如您所知，可使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中，有两个元素具备 ID — 均为 tr（表行）元素，ID 分别为 row-001 和 row-002。要使用 Prototype 选取第一个 tr 元素，须要用到如下代码：

var theRow = $('row-001');

 

在前面的小节中，您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中，可使用如下语法选取全部 td 元素。

var allCells = $$('td');

 

这段代码的问题是它将返回 DOM 中的全部 td 元素。可是，若是只但愿获取 ID 为 row-001 的行中的 td 元素，怎么办呢？这时就该使用 DOM 遍历函数了。首先，使用 Prototype 选取 ID 为 row-001 的 tr 元素的全部子节点：

var firstRowCells = theRow.childElements();

 

这将返回 theRow 变量（以前已设为 ID 为 row-001 的元素）的全部子元素的数组。

下一步，假设只但愿取得该行的第一个子节点，在本例中，是内容为 “Joe Lennon” 的 td 元素。应使用如下语句：

var firstRowFirstCell = theRow.down();

 

很简单吧？这种特别的用法等价于：

var firstRowFirstCell = theRow.childElements()[0];

 

也能够表示为：

var firstRowFirstCell = theRow.down(0);

 

JavaScript 索引值从零（0）开始，因此以上语句其实是告诉 JavaScript 选取第一个子元素。要选取第二个子元素（包含 joe@joelennon.ie 邮件地址的单元格），可使用下面的语句：

var firstRowSecondCell = theRow.down(1);

 

或者，能够在 DOM 兄弟节点间导航。本例中，第二个单元格是第一个单元格的下一个兄弟节点，所以可使用如下语句：

var firstRowSecondCell = firstRowFirstCell.next();

 

这与 down() 函数使用了相同的方式，所以可使用下面的语句选择第三个单元格：

var firstRowThirdCell = firstRowFirstCell.next(1);

 

除了使用索引查找特定节点外，Prototype 还容许使用 CSS 选择器语法。考虑 清单 1 的例子，找到包含 Jill Mac Sweeney 的明细的行的第二个连接（“Delete” 连接）：

var secondRowSecondLink = $('row-002').down('a', 1);

 

在本例中，可使用美圆符号函数找到 ID 为 row-002 的元素，而后向下遍历 DOM，直到找到下一个后代 a（锚点）元素。

有些框架可使用 “菊花链” 遍历函数，表示能够将遍历命令互相链接。在 Prototype 中实现前一个例子的另外一种方法是：

var secondRowSecondLink = $('row-002').down('a').next();

 

考虑下面的例子：

var domTraversal = $('row-001').down().up().next().previous();

 

如您所见，菊花链方式能够将几个 DOM 遍历语句链接起来。实际上，上例实际上选择 tr 元素 row-001，所以菊花链恰好回到了起点！

 

回页首

DOM 操做

上文中，您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍从来简化特定元素的选取。然而，要想改变 Web 页面中的特定元素的外观或内容，须要操做 DOM 并应用改变。若是使用纯 JavaScript 将会很是繁琐，幸运的是，大多数 JavaScript 框架提供了有用的函数，简化了这些操做。

假设您有一个 div 元素，其 id 是 the-box：

<div id="the-box">Message goes here</div>

 

若是要用 jQuery 改变 “Message goes here” 文本，方法以下：

$('the-box').html('This is the new message!');

 

实际上，能够在函数内部使用 HTML 代码，它将由浏览器解析。例如：

$('the-box').html('This is the <strong>new</strong> message!');

 

在本例中，div 元素的内容在 DOM 中呈现为：

<div id="the-box">This is the <strong>new</strong> message!</div>

 

固然，在一些状况下您须要使用特殊字符，如大于号或小于号。能够不指定专门的 HTML 实体代码，而是使用 jQuery 的 text 函数：

$('the-box').text('300 > 200');

 

这将把 div 元素更新为如下代码：

<div id="the-box">300 > 200</div>

 

在上面的例子中，原有内容被新内容取代。若是只是想把消息添加到文本的后面，该怎么作呢？幸亏，jQuery 提供了专门的 append 函数：

$('the-box').append(', here goes message');

 

将这个函数应用到初始的 div 元素，div 元素的内容就变成下面这样：

<div id="the-box">Message goes here, here goes message</div>

 

除了附加之外，您还能够 “前置” 内容，即在已有内容的前面而不是末尾插入新内容。另外，jQuery 提供了在给定元素以外插入内容的函数，无论是在开头仍是在末尾。这类函数能够替换内容、清空内容、从 DOM 移除全部元素、克隆元素等等。

除了 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() { 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() 函数发送请求。

最后，让咱们看看 Prototype 中的请求是否具备显著的不一样（请看清单 13）。

清单 13. 一个 Prototype Ajax 请求

new Ajax.Request('server-script.php', { params: { name1: 'value1', name2: 'value2' }, method: 'post', onSuccess: function(transport) { alert(transport.responseText); } });

 

一样，Prototype 的工做方式基本一致，只是有些句法上的小差异。首先，Prototype 的 Request 对象为其构造函数获取两个参数。第一个参数是请求将被发送到的 URL，第二个参数是一个具备典型 Ajax 选项的对象，如前两个例子所见。固然，因为 URL 如今做为单独的参数传递，它没有出如今选项列表中。一样须要注意，与 MooTools 不一样，Prototype Ajax Request 对象构造函数隐式地发送请求，所以不须要调用任何方法来实际发起 HTTP 请求。

大多数 JavaScript 框架中的 Ajax 支持要比此处演示的内容更加深刻。重要的加强功能包括使用接收到的响应自动更新元素，而不须要任何特殊的 onSuccess 函数。一些库甚至包含预建的自动完成功能，如您在 Google 搜索引擎中所看到的，在输入时会出现常见搜索项。

在下一节中，您将学习 JavaScript 框架为 Web 开发人员提供的用户体验（UX）加强功能。

 

回页首

UX 加强功能

到目前为止，本文所有关注的是使用 JavaScript 框架的编程优点以及它们如何简化交互式应用程序的编写。然而，对于大多数框架，还有另一个更吸引人的方面：用户界面（UI）组件以及用户体验加强，这些在之前须要付出很大努力构建的工做如今能够轻松完成。

本节将分别介绍如下框架的 UX 加强功能：Prototype、jQuery、YUI、ExtJS 和 MooTools。

Prototype

Prototype 是少数几个不提供开箱即用 UI 组件和 UX 加强功能的 JavaScript 框架之一。它将这些内容转移到其姊妹库 script.aculo.us（最新版本是 Scripty2）中。Script.aculo.us 还添加了对 Prototype 中的各类效果和行为的支持。包括 highlighting、morphing、folding、shaking、sliding、puffing 等等。Script.aculo.us 还提供拖放支持，例如滑块、in-place Ajax 编辑器和 autocompleters。与其余框架不一样，Script.aculo.us 将全部控件（例如滑块和 autocompleters）的设计留给开发人员，而且未提供标准界面。

jQuery

与 Prototype 不一样，jQuery 核心库中包含一些基本的 UX 加强。这些加强与 script.aculo.us 中的一些基本效果相似。例如 sliding 和 fading。然而，要得到更高级的 UX 特性，就须要下载 jQuery UI 库，它包含比 jQuery 核心库更多的效果，以及交互特性，如拖放、调整大小和排序。与 script.aculo.us 不一样的是，jQuery UI 还包含一些小部件或组件，它们使开发具备吸引力的界面变得更加容易。目前，这些组件包括 Accordion、Datepicker、Dialog、Progressbar、Slider 和 Tabs。这些小部件均可以划分主题，而且 jQuery UI 包含各类各样的主题，能够适合您本身的特定 Web 站点或 Web 应用程序的组件。图 1 演示了 jQuery UI Datepicker 小部件的例子，该小部件的主题为 Cupertino。

图 1. jQuery UI Datepicker Widget
 

YUI

Prototype 和 jQuery 不包含开箱即用的 UI 小部件，可是 Yahoo! User Interface 库 (YUI) 包含一个 bucketload。除了支持拖放和调整大小外，YUI 第二版还包含 autocompleters、calendar 控件、carousel 组件、绘图、对话框、进度条、富文本编辑器（所见即所得文本区）、滑块、选项卡、树等等。在撰写本文时，上述小部件都没有包含在 YUI 第三版中。图 2 是结合使用这些组件的一个例子。

图 2. 复杂的 YUI 应用程序示例
 

ExtJS

和 YUI 同样，ExtJS 包含大量开箱即用的组件，其中有不少功能强大的网格控件，支持内联编辑、分页、筛选、分组、汇总、缓冲和数据绑定。ExtJS 组件具备很是专业的外观，而且分门别类。其余小部件包括选项卡、图表、窗口（对话框）、树、布局管理器、加强的表单控件、工具栏和菜单、拖放操做和直接远程功能（direct remoting）。这仅仅是 ExtJS 所提供的一小部分，若是要查找更多 RIA 组件，请登陆 ExtJS 网站。图 3 是用 ExtJS 开发的 Web 桌面程序示例，展现了这个库的丰富特性。

图 3. ExtJS 桌面应用程序示例 
 

MooTools

MooTools 和 Prototype、jQuery 同样，也不包含开箱即用的 UI 控件和小部件。与 jQuery 同样，它包含一组有限的效果。其更高级的 UX 加强包含在 MooTools.More.js 扩展中。这个扩展不只仅是简单的 UX/UI 插件，而是包含对 Array、Date、Hash 和 String 类以及额外的 Element 扩展的一些有趣的附加功能。至于 UX 加强功能，MooTools.More.js 包含拖放支持以及一些其余效果。这些附加功能还包括一些 UI 控件，如 accordion、可排序的 HTML 表、scroller、工具提示和 Ajax spinner overlays。然而，与 script.aculo.us 同样，您须要本身设计这些控件。

 

回页首

Framework 比较

表 1 是本文介绍的五个框架所含特性的详细比较。

表 1. 框架特性比较

	Prototype	jQuery	YUI	ExtJS	MooTools
最新版本	1.6.1	1.3.2	3.00	3.1	1.2.4
许可证	MIT	MIT & GPL	BSD	Commercial & GPL v3	MIT
			浏览器兼容性
支持 IE	6.0+	6.0+	6.0+	6.0+	6.0+
支持 Firefox	1.5+	2.0+	3.0+	1.5+	2.0+
支持 Safari	2.0.4+	3.0+	4.0+	3.0+	2.0+
支持 Opera	9.25+	9.0+	10.0+	9.0+	9.0+
支持 Chrome	1.0+	1.0+	未验证	未验证	未验证
			核心特性
支持 Ajax	是	是	是	是	是
DOM 操做	是	是	是	是	是
DOM 遍历	是	是	是	是	是
事件处理	是	是	是	是	是
JSON	是	是	是	是	是
选择器	是	是	是	是	是
			UX/UI 加强功能
Accordion	否	jQuery UI	否	是	MooTools More
动画	scriptaculous	是	是	是	是
自动完成	scriptaculous	否	是	否	否
浏览器历史	scriptaculous	否	是	是	否
日历	否	jQuery UI	是	是	否
绘图	否	否	是	是	否
拖拽	scriptaculous	jQuery UI	是	是	MooTools More
网格	否	否	是	是	MooTools More
进度条	否	jQuery UI	是	是	否
从新调整大小	否	jQuery UI	是	是	否
富文本编辑器	否	否	是	是	否
滑块	scriptaculous	jQuery UI	是	是	MooTools More
选项卡	否	jQuery UI	是	是	否
主题	否	jQuery UI	是	是	MooTools More
树视图	否	否	是	是	否

 

回页首

其余重要框架

限于篇幅，本文只介绍了五个比较常见的 JavaScript 框架。这并不表示它们是最流行的、最好的或是功能最多的框架。

其余一些 JavaScript 框架也值得注意，包括：

• Cappuccino
• Dojo
• Glow
• GWT
• MochiKit
• Qooxdoo
• Rialto
• Rico
• SproutCore
• Spry
• UIZE

 

回页首

结束语

本文向您介绍了 JavaScript 框架的概念以及它为何会给 Web 网站和 Web 应用程序开发带来好处。本文对这些框架的常见功能做了简要描述，并举例说明在较常见的库中如何实现这些特性。本文还分别讲解了做为这五个框架的一部分或做为单独的附加功能的 UI 和 UX 加强。最后，还提供了一个直观的特性对比图表，其中列出了各个框架各自具有和缺少的选项。有了这些知识，您应该就能够进行更深刻的研究，而后明智地选择适合您及您的开发团队的框架。

 

参考资料

学习

• “使用 AJAX 构建应用程序：学习用 AJAX 构建支持实时验证的 Web 应用程序”（developerWorks，2005 年 11 月）讲解了如何构造基于 Ajax 的 Web 应用程序。 
  
  
• 参阅 “使用 Ajax 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机”（developerWorks，2005 年 10 月）学习如何使用 Ajax 设计模式实现基于 Web 浏览器的 SOAP Web 服务客户端。 
  
  
• “征服 Ajax 应用程序的安全威胁”（developerWorks，2007 年 6 月）讨论了与 Ajax 技术有关的威胁以及避免发生这些威胁的最佳实践。 
  
  
• “掌握 Ajax，第 1 部分: Ajax 入门简介”（developerWorks，2005 年 12 月）讲解如何联合使用 HTML、JavaScript、DHTML 和 DOM，提升 Web 开发的效率。 
  
  
• “使用 jQuery 简化 Ajax 开发”（developerWorks，2007 年 4 月）分析 jQuery 原理，讲解它的特性和功能，并给出一些常见 Ajax 任务。 
  
  
• “结合使用 Ajax 与 DB2”（developerWorks，2007 年 8 月）描述的是 IBM Information on Demand 2006 Conference Personal Planner 如何结合使用 Ajax 和 DB2®。 
  
  
• 要收听针对软件开发人员的有趣访谈和讨论，请查看 developerWorks podcasts。 
  
  
• developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。 
  
  

得到产品和技术

• 获取 Prototype Javascript 框架。 
  
  
• 获取 jQuery。
  
  
• jQuery User Interface 提供底层交互和动画的抽象，高级效果和可分类的小部件，这些都基于 jQuery JavaScript Library。 
  
  
• 获取 script.aculo.us。 
  
  
• 获取 MooTools。 
  
  
• 下载并学习 Yahoo! YUI Library。 
  
  
• 获取 ExtJS。 
  
  
• 下载 IBM 产品评估版，开始使用来自 DB二、Lotus®、Rational®、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。 
  
  

关于做者

Joe Lennon 是一位来自爱尔兰科克市的软件开发人员，他今年 24 岁。Joe 是 Apress 即将发行的 Beginning CouchDB 一书的做者，而且为 IBM developerWorks 撰写了许多技术文章和教程。在业余时间里，Joe 喜欢踢足球，改进一些小玩意以及玩他的 Xbox 360 游戏机。