關於jquery的程式碼規範，書寫標準和最佳實踐，是我近期看到的國外的一篇文章，感覺很受益！網上搜索了一下，果然被網友翻譯過，但是檢視翻譯時間是2014年3月份左右，我又查看了該文章的更新時間是2014年10月14號。想必該文章很久之前就問世，但是作者又更改了不少問題吧，因此還是決定自己重新翻譯一下！原文地址 ，文章翻譯也是一件耗時耗力的事情，網友轉載還請註明出處！加個連結！

jQuery的載入

1、我們經常用CDN來載入網頁，我之前的文章中也多次提及，點選檢視使用CDN的好處，

<scripttype="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>

2、最好在本地備份一個相同版本的程式碼，以防萬一，不能連結遠端服務，詳情見此。

3、使用裸協議的URL（去掉http:或者https:），如上面程式碼展示的那樣，我在之前的文章中也提到過，載入CDN可以省掉http,見文章：http://www.haorooms.com/post/web_qd_html_leng

5.該使用哪個版本？

如果你想相容IE678請不要用2.x的版本

針對極少數不用考慮相容性問題的，極力推薦使用最新版本的jQuery

當從CDN伺服器載入jQuery時，最好把版本寫全（比如1.11.0而不是1.11或者直接寫個1）

不要重複載入和多次載入

不要從jquery CDN中載入 jquery-latest.js，具體請看

6、如果你同時還使用了其他JS框架諸如Prototype, MooTools, Zepto等等，這些框架中，有的也用了$符號，所以你就不要再用$來進行jQuery 編碼了，而請用'jQuery'代替。並且呼叫$.noConflict()保證不會有衝突出現。

7、要檢測瀏覽器對一些新特性是否支援，請用

關於變數

1、jQuery型別的變數最好加個$字首。

2、時常將jQuery選擇器返回的內容存進變數以便重用

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

3、使用 駝峰法則 命名

關於選擇器

1.儘量ID選擇器。實際運用的是js的document.getElementById()，所以速度較其他選擇器快。

2.使用類選擇器時表指定元素的型別。請看效能比較

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

3.ID父親容器下面查詢子元素請用.find()方法。這樣做快的原因是通過id選擇元素不會使用Sizzle引擎。詳情看這裡

// BAD, a nested query for Sizzle selector enginevar $productIds = $("#products div.id");// GOOD, #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector enginevar $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');// 高品程式碼：因為只需在指定容器範圍內進行查詢
$('.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();//...a lot of complicated things on $myList
$myList.appendTo("#list-container");

2、使用連線字串或陣列join()，然後再append()。請看

// 不好var $myList = $("#list");for(var i =0; i <10000; i++){
    $myList.append("<li>"+i+"</li>");}// GOODvar $myList = $("#list");var list ="";for(var i =0; i <10000; i++){
    list +="<li>"+i+"</li>";}
$myList.html(list);// EVEN FASTERvar 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();// GOODvar $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事件的處理程式放到外部檔案中引入到頁面，而頁面中內嵌的程式碼只需呼叫即可。

<scriptsrc="my-document-ready.js"></script><script>// 初始化一些必要的全域性變數
    $(document).ready(initPage);// 抑或 $(initPage);</script>

5.千萬表寫內聯到HTML的JS程式碼，這是除錯的噩夢！應該總是用jQuery來繫結事件自帶程式，這樣也方便隨時動態地取消繫結。

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

6.如果可能儘量在繫結事件處理程式時使用一個名稱空間，這樣可以方便地取消繫結而不會影響其他繫結。

$("#myLink").on("click.mySpecialClick", myEventHandler);// 不錯// 之後，讓我們優雅地解除繫結
$("#myLink").unbind("click.mySpecialClick");

7.當選擇某個元素的子元素的時候，儘量在後面選擇，不要在前面選擇其中選擇。如下：

$("#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() ，因為jQuery內部還是將前者轉化為$.ajax()

2.表對HTTPS站點使用HTTP去發起請求，最好乾脆就表指定（將HTTP或者HTTPS從你的URL中移除）

3.表在連結裡面嵌引數，請使用專門的引數設定來傳遞

// 不易閱讀的程式碼...
$.ajax({
    url:"something.php?param1=test1&param2=test2",....});// 更易閱讀...
$.ajax({
    url:"something.php",
    data:{ param1: test1, param2: test2 }});

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 jqxhr = $.ajax({
    url: url,
    type:"GET",// 預設為GET,你可以根據需要更改
    cache:true,// 預設為true,但對於script,jsonp型別為false,可以自行設定
    data:{},// 將請求引數放這裡.
    dataType:"json",// 指定想要的資料型別
    jsonp:"callback",// 指定回撥處理JSONP型別的請求
    statusCode:{// 如果你想處理各狀態的錯誤的話404: handler404,500: handler500
    }});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

動畫與特效

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

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

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

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

外掛相關

1.始終選擇一個有良好支援，文件完善，全面測試過並且社群活躍的外掛

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

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

鏈式結構

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

$("#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// 不錯，只調用了一次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;}
$("#mydiv").addClass("error");

3.時刻關注官方Changelog，不要使用摒棄了的方法。點此檢視所有廢棄的方法

4.適時地使用原生JavaScript。原生的效能肯定相當好一些，檢視效能比較

$("#myId");// 多少還是會遜色於...
document.getElementById("myId");

譯者小結

上面的好的寫法，感覺寫的真的很不錯，多看幾遍，絕對有好處！關於jquery新版本廢除了好多的用法，至今我還經常使用live()方法，有時候在動態呼叫click的時候管用，但是儘量不要用廢棄了的方法！新版jquery不支援！