15個值得開發人員關注的jQuery開發技巧和心得

在這篇文章中，咱們將介紹15個讓你的jQuery更加有效的技巧，大部分關於性能提高的，但願你們可以喜歡！

　　1. 儘可能使用最新版本的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> 　　2. 使用簡單的選擇器 　　直到最近，返回DOM元素的方式都是解析選擇器字符串，javascript循環和內建的javascript API，例如， getElementbyId()，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 　　3. 數組方式使用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 　　} 　　4. 選擇器屬性 　　jQuery提供了一個屬性，這個屬性顯示了用來作鏈式的選擇器。 　　$('#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()方法添加對象。 　　var container = $([]); 　　container.add(another_element); 　　這也是quickEach方法的基礎，你可使用這種更快的方式而非each()。 　　6. 選擇一個隨機元素 　　上面我提到過，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'); 　　7. 使用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類庫 　　8. 使用自定義的刪除方法 　　你可能聽到過jQuery的刪除插件，它可以容許你給你的動畫添加特效。惟一的缺點是你的訪問者須要加載另一個javascript文件。幸運的是，你能夠簡單的從插件拷貝效果，而且添加到jQuery.easing對象中，以下： 　　$.easing.easeInOutQuad = function (x, t, b, c, d) { 　　if ((t/=d/2) < 1) return c/2tt + b; 　　return -c/2 * ((--t)(t-2) - 1) + b; 　　}; 　　// To use it: 　　$('#elem').animate({width:200},'slow','easeInOutQuad'); 　　9. $.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.。 　　10. 判斷頁面是否太過複雜 　　一個很是簡單的道理，約複雜的頁面，加載的速度越慢。你可使用下面代碼檢查一下你的頁面內容： 　　console.log( $('').length ); 　　以上代碼返回的數值越小，網頁加載速度越快。你能夠考慮經過刪除無用多餘的元素來優化你的代碼 　　11. 將你的代碼轉化成jQuery插件 　　若是你要花必定得時間去開發一段jQuery代碼，那麼你能夠考慮將代碼變成插件。這將可以幫助你重用代碼，而且可以有效的幫助你組織代碼。建立一個插件代碼以下： 　　(function($){ 　　$.fn.yourPluginName = function(){ 　　// Your code goes here 　　return this; 　　}; 　　})(jQuery); 　　你能夠在這裏閱讀更多開發教程。 　　12. 設置全局AJAX爲缺省 　　若是你開發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(); 　　*/ 　　詳細你能夠查看這篇文章jQuery’s AJAX functionality。 　　13. 在動畫中使用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動畫幫了咱們大忙，不然咱們得本身處理一堆的細節，設置timtout，處理屬性值，跟蹤動畫變化等等。 　　你們能夠參考這個文章：jQuery animations 　　14. 合理利用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 　　15. 本地存儲和jQuery 　　本地存儲是一個超級簡單的API。簡單的添加你的數據到localStorage全局屬性中: 　　localStorage.someData = "This is going to be saved across page refreshes and browser restarts"; 　　可是對於老的瀏覽器來講，這個不是個好消息。由於他們不支持。可是咱們可使用jQuery的插件來提供支持一旦本地存儲不能用的話。這種方式可使得本地存儲功能正常工做。 　　以上是咱們介紹的15個jQuery的開發技巧。