jQuery編程的最佳實踐

 　　加載jQuery

　　1.堅持使用CDN來加載jQuery，這種別人服務器免費幫你托管文件的便宜干嘛不占呢。點擊查看使用CDN的好處，點此查看一些主流的jQuery CDN地址。

　　2.安全起見，最好還是提供一個本地備份以便在無法從遠程CDN服務器獲取jQuery時網站也能工作，如上面代碼所示。詳情見此。

　　3.使用裸協議的URL(也就是說去掉http:或者https:)，如上面代碼展示的那樣。

　　4.如果可能，盡量將你的JavaScript和jQuery代碼放到頁面底部。詳情移步這裡，或者查看一個HTML5頁面標准模板。

　　5.該使用哪個版本?

　　如果你想兼容IE678請表用2.x的版本

　　針對極少數不用考慮兼容性的幸運兒，極力推薦使用最新版本的jQuery

　　當從CDN服務器加載jQuery時，最好把版本寫全(比如1.11.0而不是1.11或者直接寫個1)

　　千萬莫重復加載

　　6.如果你同時還使用了其他JS框架諸如Prototype, MooTools, Zepto雲雲，因為他們也使用了$符號，所以你就表再用美刀符號來進行jQuery 編碼了，而請用'jQuery'代替。並且調用$.noConflict()保證不會有沖突出現。

　　7.要檢測浏覽器對一些新特性是否支持，請用Modernizr。插播廣告：論為毛不檢測浏覽器

　　關於變量

　　1.jQuery類型的變量最好加個$前綴。

　　2.時常將jQuery選擇器返回的內容存進變量以便重用

　　var $products = $("div.products"); // 慢

　　var $products = $(".products"); // 快

　　3.使用駝峰命名

　　關於選擇器

　　1.盡量ID選擇器。其背後機理其實是調用原生的document.getElementById()，所以速度較其他選擇器快。

　　2.使用類選擇器時表指定元素的類型。不信你看這個性能比較

　　var $products = $("div.products"); // 慢

　　var $products = $(".products"); // 快

　　3.ID父親容器下面再查找子元素請用.find()方法。這樣做快的原因是通過id選擇元素不會使用Sizzle引擎。詳情看這裡

　　4.多級查找中，右邊盡量指定得詳細點而左邊則盡量簡單點。了解更多

　　// 丑陋

　　$("div.data .gonzalez");

　　// 優化後

　　$(".data td.gonzalez");

　　5.避免冗余。詳情或者查看性能比較

　　$(".data table.attendees td.gonzalez");

　　// 好的方式：去掉了中間的冗余

　　$(".data td.gonzalez");

　　6.指定選擇的上下文。

　　// 劣質的代碼：因為需要遍歷整個DOM來找到.class

　　$('.class');

　　// 高品代碼：因為只需在指定容器范圍內進行查找

　　$('.class', '#class-container');

　　7.表使用萬能選擇器。查看具體闡釋

　　$('div.container > *'); // 差

　　$('div.container').children(); // 棒

　　8.警惕隱式的萬能選擇器。省略的情況下其實使用的就是*號通配符。更多信息

　　$('div.someclass :radio'); // 差

　　$('div.someclass input:radio'); // 棒

　　9.ID已經表示唯一了，背後使用的是document.getElementById()，所以表跟其他選擇器混搭了。

　　$('#outer #inner'); // 髒

　　$('div#inner'); // 亂

　　$('.outer-container #inner'); // 差

　　$('#inner'); // 干淨利落，後台只需調用document.getElementById()

　　DOM操作相關

　　1.操作任何元素前先將其從文檔卸載，完了再貼回去。這事兒還能說細點

　　var $myList = $("#list-container > ul").detach();

　　//...一大堆對$myList的處理

　　$myList.appendTo("#list-container");

　　2.代碼裡將HTML組織好後再一次性貼到DOM中去。具體來說，性能比較

　　// 這樣不好

　　var $myList = $("#list");

　　for(var i = 0; i < 10000; i++){

　　$myList.append("

• "+i+"

");

 

　　}

　　// 這樣好

　　var $myList = $("#list");

　　var list = "";

　　for(var i = 0; i < 10000; i++){

　　list += "

• "+i+"

";

 

　　}

　　$myList.html(list);

　　// 但這樣更好

　　var array = [];

　　for(var i = 0; i < 10000; i++){

　　array[i] = "

• "+i+"

";

 

　　}

　　$myList.html(array.join(''));

　　3.不要處理不存在的元素。詳情

　　// 無良的做法：jQuery後台要跑完三個函數後才會知道這個元素其實根本不存在

　　$("#nosuchthing").slideUp();

　　// 應該這樣

　　var $mySelection = $("#nosuchthing");

　　if ($mySelection.length) {

　　$mySelection.slideUp();

　　}

　　事件相關

　　1.一個頁面只寫一個文檔ready事件的處理程序。這樣代碼既清晰好調試，又容易跟蹤代碼的進程。

　　2.表用匿名函數來做事件的回調。匿名函數不易調試維護測試和復用。或許你想較真，看看這裡吧

　　$("#myLink").on("click", function(){...}); // 表這樣

　　// 這樣

　　function myLinkClickHandler(){...}

　　$("#myLink").on("click", myLinkClickHandler);

　　3.處理文檔ready事件的回調也表用匿名函數，匿名函數不易調試維護測試和復用:(

　　$(function(){ ... }); // 糟糕的做法：無法利用此函數也無法為其寫測試用例

　　// 好的做法

　　$(initPage); // 抑或 $(document).ready(initPage);

　　function initPage(){

　　// 這裡你可以進行程序的初始化了

　　}

　　4.進一步，最好也將ready事件的處理程序放到外部文件中引入到頁面，而頁面中內嵌的代碼只需調用即可。

　　5.千萬表寫內聯到HTML的JS代碼，這是調試的夢魇!應該總是用jQuery來綁定事件自帶程序，這樣也方便隨時動態地取消綁定。

　　my link

　　$("#myLink").on("click", myEventHandler); // GOOD

　　6.如果可能盡量在綁定事件處理程序時使用一個命名空間，這樣可以方便地取消綁定而不會影響其他綁定。

　　$("#myLink").on("click.mySpecialClick", myEventHandler); // 不錯

　　// 之後，讓我們優雅地解除綁定

　　$("#myLink").unbind("click.mySpecialClick");

　　異步操作

　　1.直接用$.ajax()而表去用.getJson() 或 .get(),因為jQuery內部還是將其轉為前者

　　2.表對HTTPS站點使用HTTP去發起請求，最好干脆就表指定(將HTTP或者HTTPS從你的URL中移除)

　　3.表在鏈接裡面嵌參數，請使用專門的參數設置來傳遞

　　// 不易閱讀的代碼...

　　$.ajax({

　　url: "something.php?param1=test1¶m2=test2",

　　....

　　});

　　// 更易閱讀...

　　$.ajax({

　　url: "something.php",

　　data: { param1: test1, param2: test2 }

　　});

　　4.盡量指明數據類型以便你自己清楚要處理什麼樣的數據(見下方會提到的Ajax模板)

　　5.對於異步動態加載的內容，最好使用代理來綁定事件處理程序。這樣的好處是對於之後動態加載的元素事件同樣有效。你或許想了解更多

　　$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

　　6.使用Promise模式。更多例子

　　$.ajax({ ... }).then(successHandler, failureHandler);

　　// 抑或

　　var jqxhr = $.ajax({ ... });

　　jqxhr.done(successHandler);

　　jqxhr.fail(failureHandler);

　　7.標准的Ajax模板一分。追尋根源

　　var jqxhr = $.ajax({

　　url: url,

　　type: "GET", // 默認為GET,你可以根據需要更改

　　cache: true, // 默認為true,但對於script,jsonp類型為false,可以自行設置

　　data: {}, // 將請求參數放這裡.

　　dataType: "json", // 指定想要的數據類型

　　jsonp: "callback", // 指定回調處理JSONP類型的請求

　　statusCode: { // 如果你想處理各狀態的錯誤的話

　　404: handler404,

　　500: handler500

　　}

　　});

　　jqxhr.done(successHandler);

　　jqxhr.fail(failureHandler);

　　動畫與特效

　　1.保持一個始終如一風格統一的動畫實現

　　2.緊遵用戶體驗，表濫用動畫特效

　　使用簡潔的顯示隱藏，狀態切換