At the Forge - jQuery 插件
上个月，我们开始研究 jQuery，这是一个开源 JavaScript 库，它为 Web 开发人员提供了大量功能，并且在客户端应用程序开发中越来越受欢迎。我们看到 jQuery 对 CSS 样式选择器的使用，以及它的“链式”语法，使得入门该库并为页面元素附加行为变得容易。我们还看到 jQuery 本质上是不引人注目的，事件处理程序通过以下方式分配：$(document).ready()，而不是以内联方式与 HTML 结合。
但归根结底，jQuery 做的事情与 Prototype、YUI 和其他 JavaScript 库所做的许多事情相同。那么，为什么这么多开发人员转向 jQuery 呢？是什么让它如此有吸引力？速度和 API 显然是两个因素，但开发人员使用 jQuery 的一个主要原因是它拥有庞大的插件库。正如 Perl 程序员可以享受名为 CPAN 的庞大模块库一样，jQuery 用户也可以从大量的插件中受益，这些插件适用于从 UI 元素到 AJAX 表单提交的各种任务。安装和使用 jQuery 插件非常简单，并且可以在几分钟内安装（和评估）。
本月，让我们看看过去几年中开发的一些 jQuery 插件，以及如何使用插件来更改我们的 Web 应用程序。
从开发人员的角度来看，jQuery 插件只不过是一个额外的 JavaScript 文件，您可以下载该文件，将其安装在 Web 应用程序的 JavaScript 目录中，使用 <script> 标签将其包含在您的程序中，然后调用它。通常，插件会向 jQuery 对象添加一个或多个新函数，这意味着如果您安装了一个名为 foo 的插件，您通常可以执行以下操作
$(document).ready(function() {
$('#mybutton').foo();
}
上面的构造告诉 jQuery，当 HTML 文档下载到足以开始使用 JavaScript 查询和修改它时，您将调用一个函数。该函数反过来查找 ID 为 mybutton 的 HTML 元素，然后在该元素上调用 foo() 方法。
以下代码会做什么？$('#mybutton').foo()这取决于插件的作者。通常，插件会向元素或元素类添加功能，很可能会修改该元素周围的 HTML——添加插件完成其工作所需的新元素，或添加导致调用一个或多个 CSS 声明的类。
由于 jQuery 插件通常会修改文档的 HTML，因此查看插件的文档以了解它期望接收的 HTML 结构至关重要。也许它期望有一个无序列表 (<ul>)，其中包含列表项 (<li>)。也许它期望有 <div> 标签，其中包含 <span> 标签。也许它期望其他的东西。如果插件似乎没有达到您的预期效果，请仔细检查您的 HTML 是否与示例和/或文档中的内容匹配。
jQuery 插件还在很大程度上依赖于 CSS 提供的强大可视化效果。安装 jQuery 插件通常不仅意味着使用 JavaScript 代码，还意味着使 CSS 样式生效——通过将插件的 CSS 文件合并到您的应用程序中，或者通过将声明复制到现有的 CSS 文件中。正如许多插件要求您的 HTML 结构必须符合特定方式才能工作一样，有些插件要求您在 HTML 元素上设置某些类或 ID。
jQuery 插件修改 HTML 和/或 CSS 的事实意味着您可能需要一些额外的工具来了解和调试浏览器中发生的事情。我通常在 Firefox 中进行开发，并且我发现 Firebug 扩展是一个很棒的工具，可以识别问题并尝试替代方案，包括 JavaScript 和 CSS。同样非常有价值的是 Firefox 的 Web Developer 扩展，它的“查看生成的 HTML”与“查看源代码”执行相同的操作，但向您显示 HTML 的当前状态，而不是 JavaScript 修改之前最初从服务器下载的 HTML。
最后，一些插件附带图像，以增强插件的工作方式。
到目前为止，我所描述的方式可能会让人觉得 jQuery 插件很难使用，或者它们会迫使您以多种方式更改和扭曲您的 HTML。但是，事实并非如此。恰恰相反，我对 jQuery 插件的主要问题是它们种类繁多且范围广泛，迫使我在 20 种不同的菜单插件或 10 种不同的模态对话框插件中进行选择。比较和评估这些插件可能很困难，其中许多插件都相互借用了代码。但是，当您找到合适的插件时，通常很容易开始使用它。
如果您尝试在 jQuery 中做一些其他人可能已经尝试过的事情，您应该始终首先查看主要的插件存储库，网址为 plugins.jquery.com。在 ui.jquery.com 上也有一个大型的用户界面 (UI) 插件库。当然，大量的插件在 jquery.com 以外的网站上被描述、记录和可供下载。
HTML 表格已经存在多年，尽管由于它们被用于和滥用于布局目的（即使在 CSS 引入之后），它们的名声不佳，但在许多情况下，表格是呈现数据的最佳和最符合逻辑的方式。例如，如果您正在运营一家在线商店，并且想要获取近期订单的摘要，那么以表格形式组织数据是有意义的。
用户看到表格后最常想做的事情之一是根据某一列对行进行排序。继续我们的电子商务示例，也许他们想按订单号对列表进行排序。或者，也许他们想按客户姓名、价格或日期对其进行排序。
在服务器端进行这种排序并不难。将表头设置为可点击的链接，当您收到请求时，您可以在输出行之前更改行的顺序。但是，如果数据已经在您的浏览器中，那么能够在 JavaScript 中对行进行排序不是很好吗？这可能不是执行此类排序的最快方法，但对于足够小的数据集，它对于大多数用途来说是可以接受的，并且它给用户一种类似桌面的控制感和响应。
我发现一个不错的 jQuery 插件可以做到这一点，它叫做 DataTable，由 Allan Jardine 编写（请参阅资源）。DataTable 采用现有的 HTML 表格，使其可以按列排序，也可以搜索。
要使其工作，您需要一个 HTML 表格。清单 1 是一个 HTML 文件，它可以很好地用于这些目的，尽管您大概希望将 DataTable 与动态 Web 应用程序一起使用。
清单 1. table.html
<html>
<head>
<title>Testing tables</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#people-table').dataTable();
});
</script>
</head>
<body>
<h1>Testing tables</h1>
<table id="people-table">
<thead>
<tr>
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
<th>City</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lerner</td>
<td>Reuven</td>
<td>Modi'in</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Barack</td>
<td>Obama</td>
<td>Washington</td>
<td>750000000</td>
</tr>
<tr>
<td>3</td>
<td>Bush</td>
<td>George</td>
<td>Dallas</td>
<td>-1000000000</td>
</tr>
</tbody>
</table>
</body>
</html>
正如您所看到的，清单 1 包含一个 ID 为 people-table 的表格。表格的定义与您对 HTML 表格的期望相同，但可能有一个例外（除非您非常迂腐）。表格的标题使用 <thead> 部分定义，而正文在 <tbody> 部分中。根据 HTML 标准，这些标签是可选的，但如果您想使用 DataTable，它们是强制性的。
表格就位后，您现在可以添加 jQuery 和 DataTable 插件。与其他类型的插件不同，除了 JavaScript 文件本身之外，没有什么需要安装的。如果您将 jquery.js 和 dataTable.js 放在与文件相同的目录中（这在生产系统上可能不是一个好主意），您可以编写
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script>
现在一切都准备就绪了，除了一件事。您需要将 DataTable 插件连接到您的表格。您可以通过告诉 JavaScript 在文档准备就绪时，您想要连接两者来做到这一点
$(document).ready(function () {
$('#people-table').dataTable();
});
如果您还不熟悉 jQuery，您很快就会了解到这是使用该库时常用的习惯用法。定义一个在以下情况下触发的函数$(document).ready并让该函数执行和/或定义许多其他项，每个项都在不同的标签、ID 或类上触发。
将 DataTable 连接到表格后，您将看到标题现在是可点击的，并强制表格排序，首先是升序，然后是降序。（DataTable 下载包含适用于查看排序顺序的图标和 CSS。）
DataTable 支持大量选项，所有选项都传递给 dataTable() 函数。例如，DataTable 默认显示当前表格的十行，但它允许您从 10、25、50 和 100 行中选择。如果您希望看到不同的数字，您可以将 iDisplayLength 属性设置为不同的默认值
$(document).ready(function () {
$('#people-table').dataTable({'iDisplayLength': 1});
});
我最近在几个项目中使用过 DataTable，我发现它易于使用、稳定且文档齐全。最大的问题出现在您拥有大型数据集时，但这并非 DataTable 独有。
人们想要在 JavaScript 中完成的另一项常见任务是生成菜单，包括分层菜单。事实上，如果我回想几年前，菜单可能是我的客户最常要求的东西之一。使用 CSS 创建菜单的最著名方法之一被称为 Suckerfish，因为用于显示该技术的示例数据。
有许多基于 jQuery 的菜单库，但我逐渐喜欢上一个名为 Superfish 的菜单库，因为它为 Suckerfish 风格的菜单添加了功能。它处理子菜单，添加阴影，甚至尝试智能地判断您何时计划打开菜单以及鼠标何时经过，使用一个名为 hoverIntent 的单独插件。
要使用 Superfish，您需要下载并安装插件。然后，您需要使用 <ul>、<li> 和 <a> 标签的组合创建菜单。如果您需要菜单的辅助层次结构，您可以在 <li> 标签中使用嵌套的 <ul> 创建一个。在每个 <a> 标签中，href 标识当单击该菜单项时应显示页面上的哪个 div，默认情况下隐藏所有其他 div。
您无疑会希望从插件附带的 Superfish CSS 文件开始。您始终可以修改它以满足您的需求。有大量的定义，我从来没有能够从头开始构建 CSS 文件。相反，我修改了现有的文件，将其更改为适合我的需求。
与 jQuery 中始终一样，您可以通过将其附加到 HTML 页面的元素来使用插件。与使用 DataTable 时使用元素的 ID 不同，这里您将其附加到类为 sf-menu 的 <ul> 标签
<script type="text/javascript">
$(document).ready(function () {
jQuery('ul.sf-menu').superfish();
});
</script>
如果有多个带有该类的 <ul>，Superfish 将在所有这些 <ul> 上创建菜单。请记住，jQuery 对象可以返回任意数量的页面元素：零个、一个或大量。示例的完整 HTML 如清单 2 所示。
清单 2. menu.html
<html>
<head>
<title>Testing menus</title>
<link rel="stylesheet" type="text/css" media="screen"
href="superfish.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="superfish.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery('ul.sf-menu').superfish();
});
</script>
</head>
<body>
<h1>Testing menus</h1>
<div>
<ul class="sf-menu sf-navbar">
<li>
<a href="">Account</a>
<ul>
<li><a id="checking-menu" href="#checking-div">Checking</a>
</li>
<li><a id="savings-menu" href="#savings-div">Savings</a>
</li>
<li><a id="credit-card-menu" href="#credit-card-div">
Credit card
</a>
</li>
</ul>
</li>
<li><a id="profile-menu" href="#profile-div">Profile</a>
</li>
<li><a id="help-menu" href="#help-div">Help</a>
</li>
</ul>
</div>
</body>
</html>
插件是 jQuery 成功的秘诀，jQuery 的插件太多了，这里不可能全部描述。但是，正如您从这两个示例中看到的，使用插件通常只需要很少的努力。一旦您掌握了窍门，下载、安装和使用插件就会成为第二天性。我发现创建一个带有虚拟数据的简单、小型 HTML 文件，并将 jQuery 插件与该文件一起使用，以了解如何使用插件的基础知识非常有用。
有时插件会相互冲突，因为它们都试图重写 HTML，有时以冲突的方式进行。例如，我最近将 DataTable 与 jQuery 选项卡小部件一起使用，并且我花了一段时间才能确保所有内容都在页面上可见。随着 jQuery 插件变得越来越复杂，我们可能需要越来越担心这个问题。
但是现在，jQuery 插件是一种有趣且简单的方式来美化您的 Web 应用程序。下个月，我将解释如何设计您自己的插件，更深入地研究 jQuery 的内部结构，并了解 jQuery 如何利用 JavaScript 的怪癖为我们提供客户端程序的可扩展平台。
资源
jQuery 主页位于 www.jquery.com，它包含大量指向有关该库的教程和文章的链接。
DataTables 插件的主页是 www.sprymedia.co.uk/article/DataTables。
介绍 CSS Suckerfish 下拉菜单的原始文章位于 www.alistapart.com/articles/dropdowns。Superfish jQuery 插件位于 www.alistapart.com/articles/dropdowns。
如果您是 Ruby on Rails 开发人员，并且有兴趣使用 jQuery（而不是默认的 Prototype 和 Script.aculo.us），您可以通过阅读 errtheblog.com/posts/73-the-jskinny-on-jquery 了解更多信息。
Reuven M. Lerner，一位长期的 Web/数据库开发人员和顾问，是西北大学学习科学专业的博士候选人，研究在线学习社区。在芝加哥地区生活四年后，他最近（与他的妻子和三个孩子）返回他们在以色列莫迪因的家。
