在這篇文章中，我們將介紹15個讓你的jQuery更加有效的技巧，大部分關於效能提升的，希望大家能夠喜歡！
1. 儘量使用最新版本的jQuery類庫
jQuery專案中使用了大量的創新。最好的方法來提高效能就是使用最新版本的jQuery。每一個新的版本都包含了優化的bug修復。對我們來說唯一要乾的就是修改tag，何樂而不為呢？
我們也可以使用免費的CDN服務，例如， Google來存放jQuery類庫。
|
1 2 3 4 5 |
<!-- 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. 使用簡單的選擇器
直 到最近，返回DOM元素的方式都是解析選擇器字串，javascript迴圈和內建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三種 方式的整合使用。但是現代瀏覽器都開始支援querySelectorAll()，這個方法能夠理解CSS查詢器，而且能帶來顯著的效能提升。
然而，我們應該避免使用複雜的選擇器返回元素。更不用說很多使用者使用老版本的瀏覽器，強迫jQuery去處理DOM樹。這個方式非常慢。
|
1 2 3 |
$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best |
選擇id是最快速的方式。如果你需要使用class名稱， 那麼你最好帶上tag名稱，這樣會更快些。特別是在老瀏覽器和移動裝置上。
訪問DOM是javascript應用最慢的方式 ，因此儘量少使用。使用變數去儲存選擇器，這樣會使用cache來儲存。效能更好。
|
1 2 |
var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $: var $buttons = $('#navigation a.button'); |
另 外一個值得做的是jQuery給了你很多的額外便利選擇器 ，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結果是你使用這些類庫就不能有效地利用 querySelectorAll()方法。為了彌補這個問題，你需要先選擇元素，再過濾，如下：
|
1 2 |
$('a.button:animated'); // Does not use querySelectorAll() $('a.button').filter(':animated'); // Uses it |
3. 陣列方式使用jQuery物件
執行選擇器的結果是一個jQuery物件。然而，jQuery類庫讓你感覺你正在使用一個定義了index和長度的陣列。
|
1 2 3 4 5 6 7 8 9 10 |
// 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是否含有元素的方式。
|
1 2 3 4 5 6 7 |
if(buttons){ // This is always true // Do something } if(buttons.length){ // True only if buttons contains elements // Do something } |
4. 選擇器屬性
jQuery提供了一個屬性，這個屬性顯示了用來做鏈式的選擇器。
|
1 2 |
$('#container li:first-child').selector // #container li:first-child $('#container li').filter(':first-child').selector // #container li.filter(:first-child) |
雖然上面的例子針對同樣的元素，選擇器則完全不一樣。第二個實際上是非法的，你不可以使用它來建立一個物件。只能用來顯示filter方法是用來縮小collection。
5. 建立一個空的jQuery物件
建立一個新的jQuery空間能極大的減小開銷。有時候，你可能需要建立一個空的物件，然後使用add()方法新增物件。
|
1 2 |
var container = $([]); container.add(another_element); |
這也是quickEach方法的基礎，你可以使用這種更快的方式而非each()。
6. 選擇一個隨機元素
上面我提到過，jQuery新增它自己的選擇器過濾。除了類庫，你可以新增自己的過濾器。只需要新增一個新的方法到$.expr[‘:’]物件。一個非常棒的使用方式是Waldek Mastykarz的部落格中提到的：建立一個用來返回隨機元素的選擇器。你可以修改下面程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(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是提供開發人員得到和設定特定的CSS數值的方法。使用它，你可以隱藏瀏覽器特定的執行並且使用一個統一的介面來存取特定的屬性。、
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.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類庫
8. 使用自定義的刪除方法
你可能聽到過jQuery的刪除外掛，它能夠允許你給你的動畫新增特效。唯一的缺點是你的訪問者需要載入另外一個javascript檔案。幸運的是，你可以簡單的從外掛拷貝效果，並且新增到jQuery.easing物件中，如下：
|
1 2 3 4 5 6 7 |
$.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方法的缺點之一是當執行類庫中的方法後，context被設定到另外一個元素，例如：
|
1 2 3 |
<div id="panel" style="display:none"> <button>Close</button> </div> |
執行下面程式碼：
|
1 2 3 4 5 6 7 |
$('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); }); }); |
你將遇到問題，button會消失，不是panel。使用$.proxy方法，你可以這樣書寫程式碼：
|
1 2 3 4 5 6 7 8 |
$('#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.。
10. 判斷頁面是否太過複雜
一個非常簡單的道理，約複雜的頁面，載入的速度越慢。你可以使用下面程式碼檢查一下你的頁面內容：
|
1 |
console.log( $('*').length ); |
以上程式碼返回的數值越小，網頁載入速度越快。你可以考慮通過刪除無用多餘的元素來優化你的程式碼
11. 將你的程式碼轉化成jQuery外掛
如果你要花一定得時間去開發一段jQuery程式碼，那麼你可以考慮將程式碼變成外掛。這將能夠幫助你重用程式碼，並且能夠有效的幫助你組織程式碼。建立一個外掛程式碼如下：
|
1 2 3 4 5 6 |
(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery); |
你可以在這裡閱讀更多開發教程。
12. 設定全域性AJAX為預設
如果你開發ajax程式的話，你肯定需要有”載入中“之類的顯示告知使用者，ajax正在進行，我們可以使用如下程式碼統一管理，如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 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. 在動畫中使用delay()方法
鏈式的動畫效果是jQuery的強大之處。但是有一個忽略了的細節就是你可以在動畫之間加上delays，如下：
|
1 2 3 4 5 6 7 8 9 |
// 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動畫幫了我們大忙，否則我們得自己處理一堆的細節，設定timtout，處理屬性值，跟蹤動畫變化等等。
大家可以參考這個文章：jQuery animations
14. 合理利用HTML5的Data屬性
HTML5的data屬性可以幫助我們插入資料。特別合適前後端的資料交換。jQuery近來發布的data()方法，可以有效的利用HTML5的屬性，來自動得到資料。下面是個例子：
|
1 2 3 |
<div id="d1" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'> </div> |
為了存取資料你需要呼叫如下程式碼：
|
1 2 3 4 |
$("#d1").data("role"); // "page" $("#d1").data("lastValue"); // 43 $("#d1").data("hidden"); // true; $("#d1").data("options").name; // "John"; |
data()的jQuery文件：data() in the jQuery docs
15. 本地儲存和jQuery
本地儲存是一個超級簡單的API。簡單的新增你的資料到localStorage全域性屬性中:
|
1 |
localStorage.someData = "This is going to be saved across page refreshes and browser restarts"; |
但是對於老的瀏覽器來說，這個不是個好訊息。因為他們不支援。但是我們可以使用jQuery的外掛來提供支援一旦本地儲存不能用的話。這種方式可以使得本地儲存功能正常工作。
以上是我們介紹的15個jQuery的開發技巧，如果你有更多的技巧和評論，請在下面給我們留言， 謝謝支援！