高级jQuery：让好的应用程序变成强大的应用程序

高级jQuery：让好的应用程序变成强大的应用程序2010-12-15 IBM Michael Abernethy简介

这个关于 jQuery 的系列文章帮助您提高了创建基于 JavaScript 的 Web 应用程序的能力。即使您在阅读这些文章之前从未听说过 jQuery，但是您应该已经具备了使用 jQuery 构建良好的 Web 应用程序所需的语言技能和背景知识。但是，有时候良好的应用程序还不能满足需求，这时您将需要一个强大的 Web 应用程序。这就需要通过几个步骤修改现有的应用程序，让它能够在各种场合中顺利运行，并且适合所有用户。这些步骤是优化您的 Web 应用程序的最后绝招。

在本文中，我将讨论代码的性能改进，同时也谈及一些关于 jQuery 库的容易被忽视的问题。有些东西对于复杂的应用程序而言至关重要，即对所有应用程序都非常关键的插件，以及使应用程序的编写更加容易的良好设计技巧。在最后一个小节中，我将讨论 jQuery 1.3 中的一些新特性，它们是最近发布的并且为 jQuery 库添加了一些新特性。

第一个示例应用程序

本文中的大部分技巧都可以从附带的样例应用程序中找到（见下载），这是一个直观的电子邮件 Web 应用程序。您可能对它比较熟悉，因为我在本系列的第一篇文章中使用的就是它。不过，您可以看到它是如何从第一篇文章中发展而来的，它的性能是如何改进的，以及这些最后步骤如何将它转变成强大的 Web 应用程序的。

图 1. 样例应用程序

Bind/Unbind

在 Events 模块中有两个函数，它们是 bind（）和 unbind（），用于完成所有其他事件方法的任务。如果您能够向页面元素添加一个 click（）方法，那么哪还有必要调用 bind（"click"）呢？这仅是浪费时间而已。但是，这些函数在特定情况下是非常方便的，如果正确地使用它们，可以显著提高应用程序的性能。这些函数不仅能够向特定页面元素添加事件（就像该模块中的许多其他事件方法一样），而且还可以从页面元素中删除这些事件。为什么要这样做？下面我们看看这个 Web 应用程序，以及如何在特定情况下使用这些函数。

图 2. Bind/Unbind 示例

清单 1 显示了以上设置的代码，这是未改进之前的原始代码：

清单 1. 未经过优化的小部件

$（document）.ready （function（）{
  // cache this query since it"s a search  by CLASs
  selectable = $（":checked.selectable"）;
   // when the select/deselect all is clicked, do this  function
  $（"#selectall"）.click（selectAll）;
  //  whenever any individual checkbox is checked, change the  text
  // describing how many are checked 
   selectable.click（changeNumFilters）;
  // calculate how many  are initially checked 
  changeNumFilters（）;
}）;

var selectable;

function changeNumFilters（）
{
  // this needs to be checked on every call
   // since the length can change with every click
  var  size = $（":checked.selectable"）.length;
  if （size >  0）
   $（"#selectedCount"）.html（size）;
  else
    $（"#selectedCount"）.html（"0"）;
 }

// handles the  select/deselect of all checkboxes
function selectAll（）
{
  var checked = $（"#selectall"）.attr（"checked"）;
   selectable.each（function（）{
   var subChecked =  $（this）.attr（"checked"）;
   if （subChecked ！= checked）
   {
     $（this）.click（）;
   }
  }）;
  changeNumFilters（）;
  }