jQuery的編碼標准和最佳實踐

不知道在哪里看到了這篇關於jQuery編碼的文章，挺實用的，恰好最近在研究jQuery的基礎知識，今天打開收藏夾來翻譯一下，原文的英語不難，但是內容很實用，可能有大神已經翻譯過了，大家看精華就行了。

加載jQuery

1. 盡量在頁面上使用CDN來加載jQuery。 CDN Benefits，一些流行的CDN地址

<script type="text/javascript" 
src="//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. 使用 protocol-relative/protocol-independent 的url(去掉http:和https:)，就像上面那樣。

4. 盡可能的保持你的javascript和jQuery代碼放在頁面的底部。更多信息和HTML5的樣本文件的一些例子。

5. 該用哪個版本？

• 如果支持IE6/7/8，那就不要使用版本2.x
• 對於新的web-apps來說，如果你沒有插件兼容性的問題，那么強烈建議你使用最新版本的jQuery。
• 當你加載來自CDN上的jQuery時，你要指定你要加載的jQuery的完整版本號(像　　1.11.0不要寫成1.11或者1)。
• 不要加載多個不同版本的jQuery。

6. 如果你想要使用其他的庫，像Prototype，MooTools，Zapto等，它們同樣是使用$符號,那么盡量不要使用$來調用jQuery的函數，使用jQuery來代替$。你也可以通過$.onConfilict()來將$的控制器還給其他的庫。

7. 對瀏覽器的新特性多檢測，使用Modernizr。

jQuery的變量

1. 所有用來存儲/緩存jQuery對象的變量的名字應該有一個前綴$。

2. 在變量中緩存jQuery選擇器返回的內容以便重用。

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

3. 使用駝峰規則命名變量。

選擇器

1. 在任何時候盡可能的使用ID，這是比較快的因為它使用document.getElementById()處理的。

2. 當使用類選擇器的時候，不要在類選擇器中指定元素的類型。性能比較

var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST

3. 對於id->child這種嵌套的選擇器要使用find來查找。find()方法比較快是由於第一個選擇符(id)不會通過Sizzle的處理，更多詳情。

// BAD, a nested query for Sizzle selector engine
var $productIds = $("#products div.id");

// GOOD, #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine
var $productIds = $("#products").find("div.id");

4. 在你的選擇器的右側盡量的詳細，左側盡量的簡單，更多信息。

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

// Optimized
$(".data td.gonzalez");

5. 避免過度的詳細，更多詳情，性能比較。

$(".data table.attendees td.gonzalez");
 
// Better: Drop the middle if possible.
$(".data td.gonzalez");

6. 給選擇器一個上下文。

// SLOWER because it has to traverse the whole DOM for .class
$('.class');

// FASTER because now it only looks under class-container.
$('.class', '#class-container');

7. 避免使用通用選擇符*。更多信息

$('div.container > *'); // BAD
$('div.container').children(); // BETTER

8. 避免使用隱式的通用選擇符。當你漏下了一些選擇器,通用選擇器(*)仍然是隱含存在的。更多信息

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

9. 在使用ID時不要指定多個ID，ID選擇器是通過document.getElementById()處理的，所以不要和其他的選擇符混着使用。

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD, only calls document.getElementById()

DOM操作處理

1. 在操作處理DOM之前要先將已經存在的元素卸載分離下來，待操作完之后再將其掛回去。更多詳情

var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");

2. 使用字符串連接或者array.join()不要使用append()。更多詳情，性能比較。

// BAD
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
 
// GOOD
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
 
// EVEN FASTER
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));

3. 不要在不存在的元素上進行操作。更多詳情

// BAD: This runs three functions before it realizes there's nothing in the selection
$("#nosuchthing").slideUp();
 
// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件

1. 每一個頁面上只使用一個文檔的ready事件處理函數。這樣會更容易進行調試和跟蹤動作的流程。

2. 不要使用匿名函數來綁定事件。匿名函數很難進行調試，維護，測試和重用。更多詳情

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

3. 處理文檔ready事件的回調也不要使用匿名函數。在一次強調，匿名函數很難進行調試，維護，測試和重用。

$(function(){ ... }); // BAD: You can never reuse or write a test for this function.
 
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
    // Page load event where you can initialize values and call other initializers.
}

4. 文檔ready事件的處理函數應該包含在外部的javascript文件中，內聯的javascript應該在初始化之后直接調用處理函數。

<script src="my-document-ready.js"></script>
<script>
	// Any global variable set-up that might be needed.
	$(document).ready(initPage); // or $(initPage);
</script>

5. 不要在HTML中寫javascript的內聯代碼，這是調試的噩夢。要使用jQuery來綁定事件這樣很容易動態的添加和移除事件。

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

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

6. 盡可能給事件添加命名空間，這樣就會很容易移除你綁定過的事件而不會影響其他的綁定的事件。

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

// Later on, it's easier to unbind just your click event
$("#myLink").unbind("click.mySpecialClick");

AJAX

1. 避免使用.getJson()和.get()，就簡單的使用$.ajax()，因為這就是.get()內部調用的東西。

2. 不要在https的網站上使用http請求。更好的使用無模式的url(將HTTP或者HTTPS從你的URL中移除)。

3. 不要在URL上發送請求參數，用數據對象來發送它們。

// Less readable...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// More readable...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4. 盡量指定dataType，這樣可以容易的知道你要出來哪種類型的數據(看下面Ajax的模板例子)

5. 使用事件代理來將事件綁定到使用Ajax加載的內容上，事件代理在異步加載上有優勢，它可以處理來自過一段時間之后加載到文檔中的后代元素的事件。

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

6. 使用Promise接口。更多例子

$.ajax({ ... }).then(successHandler, failureHandler);
 
// OR
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. 采取一致的方法來實現動畫功能。

2. 不要過度做動畫效果，要滿足用戶體驗的需求。

• 盡量使用簡單的show/hide, toggle and slideUp/slideDown 來顯示和隱藏一個元素。
• 使用預設值來設置動畫的速度'fast'，'slow'，或者400（medium）

插件

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

2. 檢測所用插件與當前使用的jQuery版本是否兼容。

3. 一些常用功能應該寫成jQuery插件。jQuery插件模板例子

鏈式語法

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"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2. 不要將CSS和jQuery混在一起。

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

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

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

3. 不要使用被棄用的方法，關注每一個新的版本上一些棄用的方法盡量避免使用它們是很重要的。這里有一些被棄用的方法的列表。

4. 需要的話將原生的javascript代碼和jQuery代碼合並。看一下性能的比較。

$("#myId"); // is still little slower than...
document.getElementById("myId");

 

原文地址：http://lab.abhinayrathore.com/jquery-standards/