翻譯人員：前端開發whqet，意譯為主，不當之處敬請指正。

譯者說：臨近期末，大部分的基礎教學內容已經講解完畢，在進行比較大型的專案訓練之前，如果能讓學生了解甚至遵循一些前端開發的編碼規範將會是一件非常有意義的事情。因此，本部落格準備於近期整理一個編碼規範與最佳實踐的系列文章，包括html、css、javascript、jquery、php等，希望能對大家有所幫助。

------------------------------------------------------------

-----------------------------------------------------------------------------------------

本文給大家呈現的如何書寫更好的jQuery程式碼的相關規範和最佳實踐，不包括javascript方面的規範，有好的意見和建議請大家到我的部落格留言賜教，或者看看jQuery API的速查表（cheat sheet）。

載入jQuery

1. 在您的頁面中優先使用CDN的方式，CDN方式的優點在這裡，這裡有比較流行的jQueryCDN列表清單（由於國內goolge限制問題，建議使用國內的CDN，例如百度的CDN）。

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

jQuery變數

1. 所有用於儲存、快取jQuery物件的變數應該以$字首命名。
2. 最好把使用選擇器返回的jQuery物件快取到變數裡，以便重用。

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

選擇器

1. 儘可能的使用效率更高的ID選擇器，因為僅僅使用“document.getElementById()”實現。
2. 使用類（Class）選擇器時，不要使用元素型別（Element Type），看看績效差異。

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

// 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");

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

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

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

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

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

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

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

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

DOM操作

1. 處理現存元素之前，先剝離，處理之後再附加，更多資訊。

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

// 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(''));

// 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. 每個頁面只使用一次document的ready事件，這樣便於除錯與行為流跟蹤。
2. 儘量不要使用匿名函式繫結事件，因為匿名函式不利於除錯、維護、測試、重用，更多資訊。

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

$(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.
}

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

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->
 
$("#myLink").on("click", myEventHandler); // GOOD

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

$("#list a").on("click", myClickHandler); // BAD, you are attaching an event to all the links under the list.
$("#list").on("click", "a", myClickHandler); // GOOD, only one event handler is attached to the parent.	

Ajax

1. 避免使用.getJson()和.get(), 像它的名字昭示的那樣使用$.ajax()。
2. 不要在https站點上使用http請求，最好使用獨立性URL（不包含http:和https:，直接以//開頭）。
3. 不要在請求URL上放置引數，使用data物件傳遞引數。

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

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

$.ajax({ ... }).then(successHandler, failureHandler);
 
// OR
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);	

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，slideUp/slideDown等方法切換物件，嘗試使用‘fast’,'slow'和‘medium’。

外掛

1. 優先選用具有良好支援、測試、社群支援的外掛。
2. 檢查該外掛與您所用jQuery版本的相容性。
3. 任意可複用元件都應該形成外掛，看看jQuery外掛的樣本程式碼。

鏈式操作

1. 將鏈式操作看成變數快取和多選擇器請求的替代方式。

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

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

雜項

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"
});

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

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

參考文獻

Enjoy it.

----------------------------------------------------------

前端開發whqet，關注web前端開發，分享相關資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------