值得開發人員關注的jQuery開發技巧和心得具體有哪些

這期內容當中小編將會給大家帶來有關值得開發人員關注的jQuery開發技巧和心得具體有哪些，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

我們將介紹15個讓你的jQuery更加有效的技巧，大部分關于性能提升的。

1. 盡量使用最新版本的jQuery類庫

jQuery項目中使用了大量的創新。最好的方法來提高性能就是使用最新版本的jQuery。每一個新的版本都包含了優化的bug修復。對我們來說唯一要干的就是修改tag，何樂而不為呢？

我們也可以使用免費的CDN服務，例如， Google來存放jQuery類庫。

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

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的屬性，來自動得到數據。下面是個例子：

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

為了存取數據你需要調用如下代碼：

$("#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全局屬性中:

// 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); } // Use value

但是對于老的瀏覽器來說，這個不是個好消息。因為他們不支持。但是我們可以使用jQuery的插件來提供支持一旦本地存儲不能用的話。這種方式可以使得本地存儲功能正常工作。

以上就上有關15個值得開發人員關注的jQuery開發技巧和心得的全部內容，億速云全面介紹編程技術、操作系統、數據庫、web前端技術等內容。

上述就是小編為大家分享的值得開發人員關注的jQuery開發技巧和心得具體有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。