來源 ： 微信公眾號【前端大全】
鏈接 ： http://dwz.cn/1Bhn6m
==========================
英文：Abhinay Rathore
譯文：劉哇勇（@劉哇勇）
網址：http://lab.abhinayrathore.com/jquery-standards/
==========================
好像是feedly訂閱里看到的文章，讀完后覺得非常不錯，譯之備用，多看受益。
加載jQuery
1.堅持使用CDN來加載jQuery，這種別人服務器免費幫你托管文件的便宜干嘛不占呢。點擊查看使用CDN的好處，點此查看一些主流的jQuery 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.如果可能，盡量將你的JavaScript和jQuery代碼放到頁面底部。詳情移步這里，或者查看一個HTML5頁面標準模板。
5.該使用哪個版本？
如果你想兼容IE678請表用2.x的版本
針對極少數不用考慮兼容性的幸運兒，極力推薦使用最新版本的jQuery
當從CDN服務器加載jQuery時，最好把版本寫全（比如1.11.0而不是1.11或者直接寫個1）
千萬莫重復加載
6.如果你同時還使用了其他JS框架諸如PRototype, MooTools, Zepto云云，因為他們也使用了$符號，所以你就表再用美刀符號來進行jQuery 編碼了，而請用’jQuery’代替。并且調用$.noConflict()保證不會有沖突出現。
7.要檢測瀏覽器對一些新特性是否支持，請用Modernizr。插播廣告：論為毛不檢測瀏覽器
關于變量
1.jQuery類型的變量最好加個$前綴。
2.時常將jQuery選擇器返回的內容存進變量以便重用
var $products = $("div.products"); // 慢var $products = $(".products"); // 快3.使用駝峰命名
關于選擇器
1.盡量ID選擇器。其背后機理其實是調用原生的document.getElementById()，所以速度較其他選擇器快。
2.使用類選擇器時表指定元素的類型。不信你看這個性能比較
var $products = $("div.products"); // 慢var $products = $(".products"); // 快3.ID父親容器下面再查找子元素請用.find()方法。這樣做快的原因是通過id選擇元素不會使用Sizzle引擎。詳情看這里
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();//...一大堆對$myList的處理$myList.appendTo("#list-container");2.代碼里將HTML組織好后再一次性貼到DOM中去。具體來說，性能比較
// 這樣不好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.不要處理不存在的元素。詳情
// 無良的做法：jQuery后臺要跑完三個函數后才會知道這個元素其實根本不存在$("#nosuchthing").slideUp();// 應該這樣var $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事件的處理程序放到外部文件中引入到頁面，而頁面中內嵌的代碼只需調用即可。
<script src="my-document-ready.js"></script><script> // 初始化一些必要的全局變量 $(document).ready(initPage); // 抑或 $(initPage);</script>
5.千萬表寫內聯到HTML的JS代碼，這是調試的夢魘！應該總是用jQuery來綁定事件自帶程序，這樣也方便隨時動態地取消綁定。
<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!--不好 -->$("#myLink").on("click", myEventHandler); // GOOD6.如果可能盡量在綁定事件處理程序時使用一個命名空間，這樣可以方便地取消綁定而不會影響其他綁定。
$("#myLink").on("click.mySpecialClick", myEventHandler); // 不錯// 之后，讓我們優雅地解除綁定$("#myLink").unbind("click.mySpecialClick");異步操作
1.直接用$.ajax()而表去用.getJson() 或 .get(),因為jQuery內部還是將其轉為前者
2.表對HTTPS站點使用HTTP去發起請求，最好干脆就表指定（將HTTP或者HTTPS從你的URL中移除）
3.表在鏈接里面嵌參數，請使用專門的參數設置來傳遞
// 不易閱讀的代碼...$.ajax({ url: "something.php?param1=test1¶m2=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");REFERENCE
原文：Coding Standards & Best Practices http://lab.abhinayrathore.com/jquery-standards/
原文的reference
jQuery Performance: http://learn.jquery.com/performance/
jQuery Learn: http://learn.jquery.com
jQuery API Docs: http://api.jquery.com/
jQuery Coding Standards and Best Practice: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
jQuery Plugin Boilerplate: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
新聞熱點
疑難解答
