jQuery--[編碼規範與最佳實踐]

如下是書寫jQuery代碼的基本規範和最佳實踐，這些不包括原生JS規範與最佳實踐。

加載jQuery

一、儘可能使用CDN加載jQuery。

<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>

百度公共CDN庫在國內全部地區速度應該是最快的，js庫也不少，推薦你們使用。

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

又拍雲JS庫加速服務在國內的訪問速度還不錯，惋惜js庫比較少。

<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>

新浪JS/CSS庫又稱新浪SAE公共庫，在國內的訪問速度還不錯，js庫也很全，推薦你們使用。

<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

jQuery變量

• 一、全部使用或緩存jQuery對象的變量應該以$開頭。

• 二、始終將jQuery選擇器返回的對象緩存到本地變量中以複用。

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

• 三、使用峯駝式命名變量。

選擇器

• 一、ID選擇器可用時就使用ID選擇,它在內部使用document.getElementById()。

• 二、當使用類/僞類選擇器時，老是給選擇器附上元素類型來避免掃描整個DOM樹。

 // BAD 在整個DOM樹中掃描"products"類名
var $products = $(".products");

// GOOD 只在DIV元素中掃描"products"類名
var $products = $("div.products");

• 三、在ID > 子節點層級選擇器中使用find()方法。由於前半部分選擇器沒使用到Sizzle選擇器引擎來查找元素。

// BAD, Sizzle選擇器引擎查找層級
var $productIds = $("#products div.id");

// GOOD, 只有div.id走Sizzle選擇器引擎
var $productIds = $("#products").find("div.id");

• 四、選擇器後半部分比前半部分明確。

// 未優化
$("div.data .gonzalez");

// 優化
$(".data td.gonzalez");

• 五、避免冗餘選擇器。

$(".data table.attendees td.gonzalez");

// Better: 有必要時要去掉中間沒必要要的內容
$(".data td.gonzalez");

• 六、給選擇器添加上下文。

// 要掃描整個DOM樹尋找
$('.class');

// 只在#class-container裏掃描
$('.class', '#class-container');

• 七、避免使用通配符選擇器。

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

• 八、避免使用隱式通配選擇器。當省略下面的input時，會隱式的使用通配符選擇器。

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

• 九、ID選擇器使用的是document.getElementById()，ID選擇器無需嵌套ID。

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD

DOM操做

• 一、始終先detach現有DOM元素後進行操做，隨後將其attach到DOM中。

var $myList = $("#list-container > ul").detach();
//...針對$myList的許多DOM操做
$myList.appendTo("#list-container");

• 二、使用字符串鏈接或者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(''));

• 三、不操做未知元素。

// BAD: 這個函數內部要先執行3個函數，才發現選擇器選擇到的多是空內容
$("#nosuchthing").slideUp();

// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件

• 一、每一個頁面只使用一個Document Ready函數。利於調試。

• 二、不要使用匿名函數綁定事件。匿名函數不利於調試、維護、測試和複用。

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

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

• 三、Document ready函數不該該是匿名函數。匿名函數不能複用也沒法對其測試。

$(function(){ .. }); // BAD: 不容易複用也不利於測試

// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready裏能夠初始化變量和調用其餘初始化函數
}

• 四、Document ready函數應該放在外部文件裏，在其餘初始化設置以後，在行內JS裏調用這些函數。

<script src="my-document-ready.js"></script>
<script>
  // 任何其餘須要設置的全局變量
  $(document).ready(initPage); // or $(initPage);
</script>

• 五、不要在HTML文件裏添加行爲（行內JS），這是調試的噩夢。始終使用jQuery綁定事件後面會很容易去解綁事件。

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

• 六、若有須要，對事件使用自定義命名空間。這有利於去解綁某DOM元素上特定的事件而不會影響到該DOM元素上的其餘事件。

$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 後面會很容易的解綁這個特定的點擊事件
$("#myLink").unbind("click.mySpecialClick");

Ajax

• 一、避免使用.getJSON()和.get()，只使用$.ajax()，前二者都是在內部使用的後者。

• 二、不要在https的網站上使用http請求。側重無模式的url（在URL上去掉http/https）。

• 三、不要把請求參數放在URL裏，而是放在data對象裏去。

// 不可讀
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

// 可讀
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

• 四、明確設置數據的類型dataType，這樣很容易知道當前正在處理什麼樣的數據。

• 五、對Ajax加載的DOM元素綁定事件時儘可能使用事件代理。事件代理的優點是對於Ajax後來添加到DOM的元素也能響應事件。

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

• 六、使用Promise

$.ajax({ ... }).then(successHandler, failureHandler);

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

• 七、Ajax模版代碼：

var jqxhr = $.ajax({
  url: url,
  type: "GET",      // 默認值GET，可根據須要配置
  cache: true,      // 默認值true, dataType是'script'或'jsonp'時爲false，可根據須要配置
  data: {},         // 請求參數對象
  dataType: "json", // 設置數據類型
  jsonp: "callback",// 只在操做JSONP時設置此項
  statusCode: {     // 針對特定錯誤碼的回調處理函數
    404: handler404,
    500: handler500
  }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

效果和動畫

一、採用統一的動畫實現方式。

二、不要過分使用動畫效果，除非追求用戶體驗。

• 儘可能使用簡單的show/hide/toggle/slideUp/slideDown方法來顯示隱藏元素。

• 儘可能使用預約義的動畫時間間隔：slow,fast或400

插件

• 一、始終選擇有良好維護、優秀文檔、良好測試和社區支持的插件。

• 二、細心檢查該插件與正在使用的jQuery版本的兼容性。

• 三、任何通用的組件都應該抽取成jQuery插件。

鏈式寫法

• 一、儘可能使用鏈式寫法而不是用變量緩存或者屢次調用選擇器方法。

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

• 二、當鏈式寫法超過三次或者由於事件綁定變得複雜後，使用換行和縮進保持代碼可讀性。

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

• 三、對於更長的鏈式調用，可接受用變量緩存一箇中間對象。

其餘原則

• 一、參數儘可能使用對象字面量。

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

• 二、不要把CSS混進jQuery

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

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

• 三、不要使用遭棄用的方法。

• 四、須要時可以使用原生JS方法。

$("#myId"); // 仍是慢了些
document.getElementById("myId");

  

   文章來源：http://www.w3cschool.cc