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/