jQuery的十五个开发技巧和心得

在本篇文章中，将介绍十五个让你的jQuery更加有效的技巧，大部分是关于性能提升的，希望大家能够喜欢！

 

• 尽量使用最新版本的jQuery类库

 

jQuery项目中使用大量的创新。最好提升性能的方法就是使用最新版本的jQuery。每一个新版本都包含了优化的Bug修复。对于我们来说唯一要干的就是修改Tag，何乐而不为呢？

我们也可以使用免费的CDN服务。例如，Google来存放jQuery类库。

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

 

使用简单的选择器

 

直到最近，返回DOM元素的方式都是解析选择器字符串。JavaScript循环和内建的JavaScript API，例如getElemenbyId()、getElementsByTagName()和getElementsByClassName()三种方式的整合使用。但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。

然而，我们应该避免使用复杂的选择器来返回元素。更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式非常慢。

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

选择id是最快速的方式。如果你需要使用class名称，那么你最好带上Tag名称，这样会更快些。特别是在老浏览器和移动设备上。

访问DOM是JavaScript应用最慢的方式，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。

var buttons = $('#navigation a.button');  // Some prefer prefixing their jQuery variables with $: 
var $buttons = $('#navigation a.button');

另外一个值得做的是jQuery给了您很多的额外便利选择器。例如，:visible、:hidden和:animated还有其它的，但这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用querySelectorAll()方法。为了弥补这个问题，您需要先选择，在过滤，如下：

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

• 数组方式使用jQuery对象

运行选择器的结果是一个jQuery对象。然而，jQuery类库让您感觉您正在使用一个定义了index和长度的数组。

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// 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
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

如果性能是您关注的，那么使用简单for或者while循环来处理，而不是$.each()，这样能是您的代码更快。

检查长度也是一个检查您的collection是否含有元素的方式。

if(buttons){	// This is always true
	// Do something
}

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

• 选择器属性

jQuery提供一个属性，这个属性显示了用来做链式的选择器。

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

虽然上面的例子针对同样的元素，选择器则完全不一样。第二个实际上是非法的，您不可以使用它来创建一个对象。只能用来显示filter方法是来缩小collection。

创建一个空的jQuery对象

创建一个新的jQuery空间能极大的减小开销。有时候，您可以需要创建一个空的对象，然后使用add()方法来添加对象。

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

这也是quickEach方法的基础，您可以使用这种更快的方式而非each()。

选择一个随机元素

上面提到过，jQuery添加自己的选择器过滤。除了类库，您可以添加自己的过滤器。只需要添加一个新的方法到$.expr[':']对象。一个非常棒的使用方式是创建一个用来返回随机元素的选择器（Waldek Mastykarz的博客中提到的）。您可以修改下面代码：

(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');

• 使用CSS Hooks

CSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。使用它，您可以隐藏浏览器特定的执行并且使用一个统一的界面来存取特定的属性。

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

更好的在于，人们已经创建一个支持CSS hooks类库。

• 使用自定义的删除方法

您可能听到过jQuery的删除插件，它能够允许您给您的动画添加特效。唯一的缺点是您的访问者需要加载另外一个JavaScript文件。幸运的是，您可以简单的从拷贝效果，并且添加到jQuery.easing对象中，如下：

$.easing.easeInOutQuad = function (x, t, b, c, d) {
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

• $.proxy()

使用callback方法的缺点之一是当执行类库中的方法后，context被设置到另外一个元素，例如：

<div id="panel" style="display:none">
	<button>Close</button>
</div>

执行下面代码：

$('#panel').fadeIn(function(){
	// this points to #panel
	$('#panel button').click(function(){
		// this points to the button
		$(this).fadeOut();
	});
});

您将遇到问题，button会消失，而不是panel。使用$.proxy方法，你可以这样书写代码：

$('#panel').fadeIn(function(){
	// Using $.proxy to bind this:

	$('#panel button').click($.proxy(function(){
		// this points to #panel
		$(this).fadeOut();
	},this));
});

这样才正确的执行。$.proxy方法接受两个参数，您最初的方法，还有context。这里阅读更多$.proxy in the docs。

• 判断页面是否太过复杂

一个非常简单的道理，约复杂的页面，加载的速度越慢。您可以使用下面代码检查一下您的页面内容：

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

  以上代码返回的数值越小，页面加载速度越快。您可以考虑通过删除无用多余的元素来优化您的代码。

将您的代码转化成jQuery插件

如果您要花一定的时间去开发一段jQuery代码，那么您可以考虑将代码变成插件。这将能够帮助您重用代码，并且更够有效的帮组您组织代码。创建一个插件代码如下:

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

  您可以在这里阅读更多开发教程。

• 设置全局AJAX为缺省

如果您开发AJAX程序的话，您肯定需要有“加载中”之类的显示告诉用户。所以可以使用如下代码统一管理：

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url            : '/ajax/',
    dataType    : 'json'
});

$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});

$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});

/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

  详细您可以查看这些文章：

• 如何快速创建一个AJAX的“加载”的图片效果
• 五个在线AJAX“加载中”旋转图标生成器工具

• 在动画中使用delay()方法

链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是您可以在动画之间加上delays，如下:

// This is wrong:
$('#elem').animate({width:200},function(){
    setTimeout(function(){
        $('#elem').animate({marginTop:100});
    },2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

  jQuery动画帮了我们大忙，否则我们得自己处理一堆的细节，设置timeout，处理属性值，跟踪动画变化等等。大家可以参考这篇文章：jQuery animations。

• 合理利用HTML5的Data属性

HTML5的data属性可以帮助我们插入数据。特别适合前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。如下：

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
    data-options='{"name":"John"}'>
</div>

   为了存取数据您需要调用如下代码：

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;	// "John";

  如果您想看看实际的例子，请参考教程：使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果。

data()的jQuery文档：data() in the jQuery docs。

• 本地存储和jQuery

本地存储是一个超级简单的API。简单的添加您的数据到localStorage全局属性中：

localStorage.someData = "This is going to be saved across page refreshes and browser restarts"

  单数对于旧的浏览器来说，这不是个好消息。因为他们不支持。但是可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。