15個(gè)值得開(kāi)發(fā)者關(guān)注的jQuery開(kāi)發(fā)技巧和心得

作者：GBin1.com 2011-11-17 17:35:12

在這篇文章中，我們將介紹15個(gè)讓你的jQuery更加有效的技巧，大部分關(guān)于性能提升的，希望大家能夠喜歡!

1. 盡量使用***版本的jQuery類庫(kù)

jQuery項(xiàng)目中使用了大量的創(chuàng)新。***的方法來(lái)提高性能就是使用***版本的jQuery。每一個(gè)新的版本都包含了優(yōu)化的bug修復(fù)。對(duì)我們來(lái)說(shuō)唯一要干的就是修改tag，何樂(lè)而不為呢?

我們也可以使用免費(fèi)的CDN服務(wù)，例如， Google來(lái)存放jQuery類庫(kù)。

<!-- 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>

2. 使用簡(jiǎn)單的選擇器

直到最近，返回DOM元素的方式都是解析選擇器字符串，javascript循環(huán)和內(nèi)建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三種方式的整合使用。但是現(xiàn)代瀏覽器都開(kāi)始支持querySelectorAll()，這個(gè)方法能夠理解CSS查詢器，而且能帶來(lái)顯著的性能提升。

然而，我們應(yīng)該避免使用復(fù)雜的選擇器返回元素。更不用說(shuō)很多用戶使用老版本的瀏覽器，強(qiáng)迫jQuery去處理DOM樹(shù)。這個(gè)方式非常慢。

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

選擇id是最快速的方式。如果你需要使用class名稱，那么你***帶上tag名稱，這樣會(huì)更快些。特別是在老瀏覽器和移動(dòng)設(shè)備上。

訪問(wèn)DOM是javascript應(yīng)用最慢的方式，因此盡量少使用。使用變量去保存選擇器，這樣會(huì)使用cache來(lái)保存。性能更好。

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

另外一個(gè)值得做的是jQuery給了你很多的額外便利選擇器，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結(jié)果是你使用這些類庫(kù)就不能有效地利用 querySelectorAll()方法。為了彌補(bǔ)這個(gè)問(wèn)題，你需要先選擇元素，再過(guò)濾，如下：

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

3. 數(shù)組方式使用jQuery對(duì)象

運(yùn)行選擇器的結(jié)果是一個(gè)jQuery對(duì)象。然而，jQuery類庫(kù)讓你感覺(jué)你正在使用一個(gè)定義了index和長(zhǎng)度的數(shù)組。

// 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);

如果性能是你關(guān)注的，那么使用簡(jiǎn)單for或者while循環(huán)來(lái)處理，而不是$.each()，這樣能使你的代碼更快。

檢查長(zhǎng)度也是一個(gè)檢查你的collection是否含有元素的方式。

if(buttons){    // This is always true  
    // Do something  
}  
 
if(buttons.length){ // True only if buttons contains elements  
    // Do something  
}

4. 選擇器屬性

jQuery提供了一個(gè)屬性，這個(gè)屬性顯示了用來(lái)做鏈?zhǔn)降倪x擇器。

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

雖然上面的例子針對(duì)同樣的元素，選擇器則完全不一樣。第二個(gè)實(shí)際上是非法的，你不可以使用它來(lái)創(chuàng)建一個(gè)對(duì)象。只能用來(lái)顯示filter方法是用來(lái)縮小collection。

5. 創(chuàng)建一個(gè)空的jQuery對(duì)象

創(chuàng)建一個(gè)新的jQuery空間能極大的減小開(kāi)銷。有時(shí)候，你可能需要?jiǎng)?chuàng)建一個(gè)空的對(duì)象，然后使用add()方法添加對(duì)象。

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

這也是quickEach方法的基礎(chǔ)，你可以使用這種更快的方式而非each()。

6. 選擇一個(gè)隨機(jī)元素

上面我提到過(guò)，jQuery添加它自己的選擇器過(guò)濾。除了類庫(kù)，你可以添加自己的過(guò)濾器。只需要添加一個(gè)新的方法到$.expr[':']對(duì)象。一個(gè)非常棒的使用方式是Waldek Mastykarz的博客中提到的：創(chuàng)建一個(gè)用來(lái)返回隨機(jī)元素的選擇器。你可以修改下面代碼：

(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');

7. 使用CSS Hooks

CSS hooks API是提供開(kāi)發(fā)人員得到和設(shè)置特定的CSS數(shù)值的方法。使用它，你可以隱藏瀏覽器特定的執(zhí)行并且使用一個(gè)統(tǒng)一的界面來(lái)存取特定的屬性。

$.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);

更好的在于，人們已經(jīng)創(chuàng)建了一個(gè)支持CSS hooks類庫(kù)

8. 使用自定義的刪除方法

你可能聽(tīng)到過(guò)jQuery的刪除插件，它能夠允許你給你的動(dòng)畫添加特效。唯一的缺點(diǎn)是你的訪問(wèn)者需要加載另外一個(gè)javascript文件。幸運(yùn)的是，你可以簡(jiǎn)單的從插件拷貝效果，并且添加到j(luò)Query.easing對(duì)象中，如下：

$.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');

9. $.proxy()

使用callback方法的缺點(diǎn)之一是當(dāng)執(zhí)行類庫(kù)中的方法后，context被設(shè)置到另外一個(gè)元素，例如：

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

執(zhí)行下面代碼：

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

你將遇到問(wèn)題，button會(huì)消失，不是panel。使用$.proxy方法，你可以這樣書(shū)寫代碼：

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

這樣才正確的執(zhí)行。$.proxy方法接受兩個(gè)參數(shù)，你最初的方法，還有context。這里閱讀更多$.proxy in the docs.。

10. 判斷頁(yè)面是否太過(guò)復(fù)雜

一個(gè)非常簡(jiǎn)單的道理，約復(fù)雜的頁(yè)面，加載的速度越慢。你可以使用下面代碼檢查一下你的頁(yè)面內(nèi)容：

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

以上代碼返回的數(shù)值越小，網(wǎng)頁(yè)加載速度越快。你可以考慮通過(guò)刪除無(wú)用多余的元素來(lái)優(yōu)化你的代碼

11. 將你的代碼轉(zhuǎn)化成jQuery插件

如果你要花一定得時(shí)間去開(kāi)發(fā)一段jQuery代碼，那么你可以考慮將代碼變成插件。這將能夠幫助你重用代碼，并且能夠有效的幫助你組織代碼。創(chuàng)建一個(gè)插件代碼如下：

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

你可以在這里閱讀更多開(kāi)發(fā)教程。

12. 設(shè)置全局AJAX為缺省

如果你開(kāi)發(fā)ajax程序的話，你肯定需要有”加載中“之類的顯示告知用戶，ajax正在進(jìn)行，我們可以使用如下代碼統(tǒng)一管理，如下：

// 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();  
*/

13. 在動(dòng)畫中使用delay()方法

鏈?zhǔn)降膭?dòng)畫效果是jQuery的強(qiáng)大之處。但是有一個(gè)忽略了的細(xì)節(jié)就是你可以在動(dòng)畫之間加上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動(dòng)畫幫了我們大忙，否則我們得自己處理一堆的細(xì)節(jié)，設(shè)置timtout，處理屬性值，跟蹤動(dòng)畫變化等等。

大家可以參考這個(gè)文章：jQuery animations

14. 合理利用HTML5的Data屬性

HTML5的data屬性可以幫助我們插入數(shù)據(jù)。特別合適前后端的數(shù)據(jù)交換。jQuery近來(lái)發(fā)布的data()方法，可以有效的利用HTML5的屬性，來(lái)自動(dòng)得到數(shù)據(jù)。下面是個(gè)例子：

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

為了存取數(shù)據(jù)你需要調(diào)用如下代碼：

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

15. 本地存儲(chǔ)和jQuery

本地存儲(chǔ)是一個(gè)超級(jí)簡(jiǎn)單的API。簡(jiǎn)單的添加你的數(shù)據(jù)到localStorage全局屬性中:

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

但是對(duì)于老的瀏覽器來(lái)說(shuō)，這個(gè)不是個(gè)好消息。因?yàn)樗麄儾恢С帧５俏覀兛梢允褂胘Query的插件來(lái)提供支持一旦本地存儲(chǔ)不能用的話。這種方式可以使得本地存儲(chǔ)功能正常工作。

以上是我們介紹的15個(gè)jQuery的開(kāi)發(fā)技巧，如果你有更多的技巧和評(píng)論，請(qǐng)?jiān)谙旅娼o我們留言，謝謝支持!

原文：http://www.gbin1.com/technology/jquery/20111116jquery15tips/

【編輯推薦】

使用HTML 5、CSS3和jQuery增強(qiáng)網(wǎng)站用戶體驗(yàn)
使用jQuery設(shè)計(jì)數(shù)據(jù)表格之設(shè)計(jì)表格基類
自己動(dòng)手開(kāi)發(fā)jQuery插件
jQuery插件開(kāi)發(fā)實(shí)戰(zhàn)場(chǎng)
50個(gè)必備的實(shí)用jQuery代碼段

責(zé)任編輯：陳貽新來(lái)源： GBin1.com

jQuery