jQuery最佳實踐

本文介紹一些使用jQuery的通用標準和最佳實踐，這些標準不涵蓋Javascript的標準和最佳實踐，英文原文地址是 http://lab.abhinayrathore.com/jquery-standards/。

加載jQuery

1、盡量使用CDN加載：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')</script>

2、就像上面的代碼一樣，在CDN加載失敗時，要回源到本地服務器的同版本jQuery。

3、使用依賴協議的URL（不加http:和https:，直接使用//），參看上面的例子。

4、盡可能在頁面底部加載jQuery和javascript。

5、如何選擇jQuery版本？

• 如果要兼容IE6/7/8，不要使用2.x版本的
• 對于新的應用，如果不考慮一些插件的兼容性問題，盡可能的使用最新版
• 從CDN加載jQuery的時候，使用完整的版本號（例如，使用1.11.0，不用1.11和1）
• 不要加載多個版本的jQuery

6、如果你使用了Prototype, MooTools, Zepto等，嘗試使用jQuery代替$。可以使用$.noConflict()讓出$的控制權。

jQuery變量

1、所有被緩存的jQuery對象，變量名以$開頭。

2、總是緩存jQuery選擇器返回的對象，方便復用：

var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

3、使用駝峰命名。

選擇器

1、盡可能的使用ID選擇器。ID選擇器使用document.getElementById()，所以更快。

2、當使用類選擇器的時候，不要加DOM元素類型：

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

3、使用find查找ID->Child的嵌套查詢，.find()方法更快，因為第一次選擇沒有使用jQuery的選擇器引擎：

// 差, 全部使用jQuery的選擇器引擎
var $productIds = $("#products div.id");

// 好, #products使用document.getElementById(), 只有div.id需要使用jQuery的選擇器引擎
var $productIds = $("#products").find("div.id");

4、越靠右側越具體：

// 差
$("div.data .gonzalez");

// 最佳
$(".data td.gonzalez");

5、選擇器不要太“具體”：

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

// 更好，盡可能省去中間部分
$(".data td.gonzalez");

6、給選擇器指定上下文（限定范圍）：

// 慢，因為它在整個DOM結構中查找
$('.class');

// 快，因為它只查找 class-container 下的.
$('.class', '#class-container');

7、避免使用“*”：

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

8、避免隱式使用“*”：

$('div.someclass :radio'); // 差，還是用了“*”
$('div.someclass input:radio'); // 好

9、不要使用多個ID選擇器，或者嵌套使用ID選擇器，單獨的ID選擇器使用document.getElementById()，速度很快：

$('#outer #inner'); // 差
$('div#inner'); // 差
$('.outer-container #inner'); // 差
$('#inner'); // 好, 調用 document.getElementById()

DOM操作

1、先把元素分離出DOM結構，再進行復雜的操作，之后再附加回DOM中。不明白原因的話，可以了解下.detach()這個方法

var $myList = $("#list-container > ul").detach();
// 對 $myList 執行大量復雜操作
$myList.appendTo("#list-container");

2、使用字符串連接或者array.join()，少用.append()，點擊這里查看性能比較。

// 慢
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

// 快
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

// 更快
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));

3、不要對不存在的元素做操作：

// 差: 在發現該ID不存在之前，已經執行了3個函數
$("#nosuchthing").slideUp();

// 好
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件

1、一個頁面只使用一個Document ready，便于調試和跟蹤。

2、不要使用匿名函數綁定事件，匿名函數不利于調試，復用，測試，debug：

$("#myLink").on("click", function(){...}); // 差

// 好
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

3、Document ready 不要用匿名函數，原因同上：

$(function(){ ... }); // 差: 你沒辦法寫單元測試和復用

// 好
$(initPage); // or $(document).ready(initPage);
function initPage(){
    //...
}

4、Document ready 的處理函數應該寫在外部文件，內聯的javascript可以在一些初始化設置之后調用 ready 函數，例如：

<script src="my-document-ready.js"></script>
<script>
    // 做一些初始化設置.
    $(document).ready(initPage); // or $(initPage); initPage函數在外部文件中
</script>

5、不要把事件直接寫在HTML元素上，這樣不方便調試：

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- 差-->

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

6、盡可能的給事件加上命名空間。這樣方便解除綁定，而不影響該DOM元素的其他事件：

$("#myLink").on("click.mySpecialClick", myEventHandler); // 好
// 之后，很容易的解除綁定
$("#myLink").unbind("click.mySpecialClick");

AJAX

1、使用.ajax()，避免.getJson()或者.get()，它們在內部也是調用.ajax()的。

2、不要在https的站點上請求http，使用依賴協議的URL

3、不要把數據加在url上，使用data屬性。

// 可讀性差
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// 可讀性好
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4、指定dataType屬性，更容易知道數據類型。

5、對于ajax加載的內容，使用委托綁定事件，這樣可以在元素不存在的時候執行綁定。（之后ajax加載進DOM結構中）

$("#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", // default is GET but you can use other verbs based on your needs.
    cache: true, // default is true, but false for dataType 'script' and 'jsonp', so set it on need basis.
    data: {}, // add your request parameters in the data object.
    dataType: "json", // specify the dataType for future reference
    jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
    statusCode: { // if you want to handle specific error codes, use the status code mapping settings.
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

動畫效果

1、Adopt a restrained and consistent approach to implementing animation functionality（大意：采取受限制的和統一的方法來實現動畫功能。）

2、滿足用戶體驗即可，不要做過多的動畫：

• 盡量使用簡單的show/hide，slideUp/slideDown來切換元素
• 盡量使用jQuery預定義的時間間隔（durations），“slow”，“fast”或者400（中等）

插件

1、選擇兼容性好，文檔，測試齊全何社區支持好的插件。

2、檢查插件在不同版本jQuery下的兼容性。

3、任何參加的可復用的組件，都應該以插件的形式實現。

鏈式調用

1、使用鏈式調用代替變量緩存和多次調用選擇器：

$("#myDiv").addClass("error").show();

2、當鏈式調用超過3級的時候，適當的換行增加可讀性：

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

3、鏈太長的時候，緩存中間對象是可以接受的。

其他

1、參數盡量使用對象形式：

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 差, 調用三次attr()
// 好, 調用一次
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2、盡量不要把css混在js中：

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // 差

.error { color: red; font-weight: bold; } /* 好*/

$("#mydiv").addClass("error"); // 好

3、不要使用過時的方法，注意新版更新時棄用的方法，不要使用它們。

4、必要的時候使用原生js，這里看查看性能對比 http://jsperf.com/document-getelementbyid-vs-jquery/3

$("#myId"); // 還是有一點點點點慢...
document.getElementById("myId");

就這么多，技術有限，翻譯的不妥的地方，歡迎留言指出！

原文鏈接：jQuery最佳實踐