jQuery最佳实践

　　昨天临下班时，在CodeProject上看到了这篇文章的英文版，觉得不错。然后，昨晚就加把劲把它翻译出来。初次翻译，水平有限，难免出错，敬请指正。

介绍

　　我发现，jQuery真是一个伟大的框架，它可以非常容易而轻松地扩展了我们可以做的客户端代码程序。在这篇文章中，我将重点介绍一些使用jQuery的技巧，给你开一个高效使用jQuery框架的好头。即使你已经对jQuery比较熟悉，但是其中的一些技巧依然可以帮助你更有效而恰当地使用jQuery。

第一条：使用最新版的jQuery

　　jQuery库的每个稳定发布版都会引入性能优化，同时修复一下Bug。大多数情况下，升级仅仅涉及到脚本版本标记的修改。提升网站性能最简单的方式莫过于使用最新版的jQuery。你可以使用Google CDN服务提供的jQuery，Google服务器上托管了很多JavaScript库。使用方式如下：

1. 引入特定版本的jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

1. 引入1.6分支的最新版

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>

　　下面的例子将默认使用1.6分支的最新版。不过，需要指出的是，据Css-Tricks的介绍，使用分支最新版的方式只能缓存几个小时，所以最好不要在生产环境中使用。

第二条：使用简单的选择器

　　早期的jQuery获取DOM元素，使用的是getElementById(), getElementsByTagName() 和 getElementsByClassName()等方法。目前，所有主流浏览器都支持querySelectorAll()方法，这个方法可以使用CSS选择器。不过，你还是应该优化获取元素的方式。

$('li[data-selected="true"] a') // Looks good, but slow
$('li.selected a') // Better
$('#ElementID) // Best

　　使用ID获取元素最快！

第三条：缓存查询元素的结果

　　如果你没有别的选择，只能使用DOM选择器时，应该将查询结果缓存起来。例如：

var selectedListItem = $('li[data-selected="true"]a')

　　现在，这个结果被缓存到了变量"selectedListItem"，这个变量可以被多次使用，而且不会对性能有任何影响。

第四条：使用jQuery扩展的选择器

　　jQuery为了便于使用，给出了很多扩展的选择器，例如 :visible, :hidden, :animated等等，这些选择器还不符合CSS3规范。这样导致的结果是，如果你使用这些选择器，jQuery库将不能使用querySelectorAll()方法。为了补救这个损失，你可以首先使用规范的选择器获取想匹配的元素，然后使用这些扩展的选择器筛选出想要的元素。例如：

$('a.button:hidden'); //Does not use querySelectorAll()
$('a.button').filter(':hidden'); //Uses it

　　上面的结果是一样的，但是第二行的例子会更快。

第五条：jQuery对象可以当成数组来使用

　　选择器运行后获得的结果就是jQuery对象。然后，jQuery库使得jQuery对象可以当成数组来使用，你可以使用下标来获取元素，还可以获取数组长度。

var buttons = $('#navigation a.button'); //Selecting all the navigation b //Selecting all the navigation buttons
// We can loop though the collection:
for(var i=0;i<buttons.length;i++) {
   console.log(buttons[i]); // A DOM element, not a jQuery object
}

　　如果你追求的是性能，你可以使用简单数组代替$.each()，这样可以使你的代码运行得更快。

第六条：检查元素是否存在

　　检查元素长度是确定你获取的元素是否存在或元素集合是否包含元素的唯一方法。

If (buttons.length) { // True only if buttons contains elements
   // Do something 
}

第七条：创建jQuery空对象

　　创建一个新的jQuery对象可能涉及重大的开销。有时，你可能需要创建一个空的对象，然后使用add()方法填充这个空对象。

var container = $([]);
container.add(another_element);

第八条：检查页面大小

　　浏览器渲染包含大量DOM元素或者大量文本的页面时，需要消耗大量的时间。为了查看网页中DOM元素的数量，你可以在控制台中执行如下代码：

console.log($('*').length);

　　如果这个数字很小的话，网页的渲染会很快。否则，你可以通过删除多余的标签和不必要的包装元素来优化网页性能。

第九条：将diamond封装成jQuery插件

　　如果你写了一些jQuery代码，你可以将这些代码封装成jQuery插件。这样可以提高代码重用性，同时减少依赖，更容易组织代码。创建jQuery插件其实很简单。如下：

function($) {
   $.fn.yourPluginName = function() {
      // Your code goes here
      return this;
   };
})(jQuery);

第十条：本地存储（Local Storage）

　　本地存储（Local storage）是一组为了在客户端存储信息而定义的API。如果你向增加数据，你只需要向全局对象localStorage中增加一个属性即可。例如：

localStorage.someData = "This data is going to persist across page refreshes and browser restarts";

　　不爽的是，旧浏览器不支持这个对象。在这种情况下，可以使用一些jQuery的插件达到这个目的。如果localStorage不可用的话，这些插件会有不同的反馈，但是却可以保证客户端存储在任何浏览器中正常工作。下面是一个插件的例子：

// Check if "key" exists in the storage.
var value = $.jStorage.get("key");
if(!value) {
   // if not - load the data from the server
   value = load_data_from_server();
   // and save it
   $.jStorage.set("key",value);
}

第十一条：使用事件委托

　　为任何匹配的元素添加事件处理程序，即使对于在页面初始化后新添加的元素依然生效。

$('button.yourClassName').live('click', yourFunctionName);

　　这样即使你使用Ajax加载元素或者使用JavaScript添加元素，事件处理程序依然可以自动生效。

　　同样，关闭事件处理如下：

$('button.yourClassName').die('click', yourFunctionName);

　　事件委托相比常规事件处理（事件绑定）有一定的限制，但是在大多数情况下还是可以正常工作的。值得注意的是，jQuery 1.3以后才开始支持事件委托。

　　D瓜哥以前写过一篇文章，专门分析事件委托和事件绑定的区别。请移步： “实例分析JavaScript中的事件委托和事件绑定”。

第十二条：对象克隆

　　使用jQuery的.clone()方法可以克隆任意DOM对象。

// Clone the DIV
var cloned = $('#yourdivID').clone();

　　jQuery的.clone()方法不能克隆任意JavaScript对象。如果想克隆JavaScript对象，可以使用如下代码：

// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

第十三条：测试隐藏对象

　　我们可以使用jQuery中的.hide()、 .show() 方法来改变元素的可见状态。使用如下代码来测试元素是否可见：

if($(element).is(":visible") == "true") {
   //The element is Visible
}

第十四条：查找最近的父级DIV标签

　　如果你想查找DIV包装对象（无论该对象是否有ID属性），可以jQuery提供的选择器。代码如下：

$("#yourControl").closest("div");

　

原文作者：S.Kaur（阿三的雌性程序猿，果然不同凡响啊！）
原文链接：http://www.codeproject.com/Tips/573781/jQuery-Best-Practices