jquery高級程式設計的最佳實踐詳解

載入jQuery

1.堅持使用CDN來載入jQuery，這種別人伺服器免費幫你寄存文件的便宜幹嘛不佔。點擊查看使用CDN的好處，點此查看一些主流的jQuery CDN位址。

<script>window.jQuery || document.write('<script src=" js/jquery-1.11.0.min.js" type="text/javascript"></script>')

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 = $products = $products = var "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.指定選擇的上下文。

複製程式碼

程式碼如下:

// 劣質的程式碼：因為需要整個過程找到.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 $myList.append("" i "");
}

// 這樣好
var $myList = $("#list");
var list = "";
for(var i = 0; i list = "

" i "

";
}
$myList.html(list);

// 但這樣更好
var array = [];
for(var i = 0; 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事件的處理程序放到外部文件中引入到頁面，而頁面中內嵌的程式碼只需呼叫即可。

複製程式碼程式碼如下:

<script><BR> // 初始經一些必要的全域變數<BR> $(document).ready(initPage); // 抑或$(initPage);<BR></ script><BR></script>

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: test1, 2 }
});

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 jajaxhr = $. >    url: url,
    type: "GET", // 預設為GET,你可以依需求改變
    cache: true, // 預設為true,但對script,jsonp類型為false,可以自行設定
    data: {}, // 將請求參數放在這裡.
    dataType: "json", // 指定想要的資料型別
    jsonp: "callback", // 指定回呼處理JSONPSONPSON OSONPSON2請求
    statusCode: { // 如果你想處理各狀態的錯誤的話
        404: handler404,
   qxhr.done(successHandler) ;
jqxhr.fail(failureHandler);




動畫與特效


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

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

使用簡潔的顯示隱藏，狀態切換，滑入滑出等效果來展示元素

使用預設值來設定動畫的速度'fast'，'slow'，或400（中等速度）

插件相關

1.始終選擇一個有良好支持，完善文檔，全面測試過並且社區活躍的插件

2.注意所使用外掛程式與目前使用的jQuery版本是否相容

3.一些常用功能應該寫成jQuery插件。一分jQuery外掛的編寫模板

鍊式句法

1.除了用變數將jQuery選擇器傳回的結果保存，還可以利用好鍊式呼叫。

複製程式碼

程式碼如下:$("#myDiv").addClass("error ").show();

2.當鍊式呼叫多達3次以上或程式碼因綁定回呼略顯複雜時，使用換行和適當的縮進來提高程式碼的可讀性。