知識星球英文：Abhinay Rathore
譯文：劉哇勇（@劉哇勇）
網址：http://lab.abhinayrathore.com/jquery-standards/
好像是feedly訂閱裡看到的文章，讀完後覺得非常不錯，譯之備用，多看受益。
載入jQuery
1.堅持使用CDN來載入jQuery，這種別人伺服器免費幫你託管檔案的便宜幹嘛不佔呢。點選檢視使用CDN的好處，點此檢視一些主流的jQuery CDN地址。
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("
"+i+" ");
}
// 這樣好
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
list += "
"+i+" ";
}
$myList.html(list);
// 但這樣更好
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "
"+i+" ";
}
$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事件的處理程式放到外部檔案中引入到頁面，而頁面中內嵌的程式碼只需呼叫即可。