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

標籤：style   http   io   ar   color   os   使用   sp   for   

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

載入jQuery

1、盡量使用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變數

• 1、所有使用或緩衝jQuery對象的變數應該以$開頭。

• 2、始終將jQuery選取器返回的對象緩衝到本地變數中以複用。

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

• 3、使用峰駝式命名變數。

選取器

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

• 2、當使用類/偽類別選取器時，總是給選取器附上元素類型來避免掃描整個DOM樹。

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

• 3、在ID > 子節點層級選取器中使用find()方法。因為前半部分選取器沒使用到Sizzle選取器引擎來尋找元素。

// BAD, Sizzle選取器引擎尋找層級var $productIds = $("#products div.id");// GOOD, 只有div.id走Sizzle選取器引擎var $productIds = $("#products").find("div.id");

• 4、選取器後半部分比前半部分明確。

// 未最佳化$("div.data .gonzalez");// 最佳化$(".data td.gonzalez");

• 5、避免冗餘選取器。

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

• 6、給選取器添加上下文。

// 要掃描整個DOM樹尋找$(‘.class‘);// 只在#class-container裡掃描$(‘.class‘, ‘#class-container‘);

• 7、避免使用萬用字元選取器。

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

• 8、避免使用隱式通配選取器。當省略下面的input時，會隱式的使用萬用字元選取器。

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

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

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

DOM操作

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

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

• 2、使用字串串連或者array.join()而不是.append()方法。

// BADvar $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: 這個函數內部要先執行3個函數，才發現選取器選擇到的可能是空內容$("#nosuchthing").slideUp();// GOODvar $mySelection = $("#nosuchthing");if ($mySelection.length) {    $mySelection.slideUp();}

事件

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

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

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

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

$(function(){ .. }); // BAD: 不容易複用也不利於測試// GOOD$(initPage); // or $(document).ready(initPage);function initPage(){  // Document ready裡可以初始設定變數和調用其他初始化函數}

• 4、Document ready函數應該放在外部檔案裡，在其他初始化設定之後，在行內JS裡調用這些函數。

<script src="my-document-ready.js"></script><script>  // 任何其他需要設定的全域變數  $(document).ready(initPage); // or $(initPage);</script>

• 5、不要在HTML檔案裡添加行為（行內JS），這是調試的噩夢。始終使用jQuery綁定事件後面會很容易去解除綁定事件。

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

• 6、如有需要，對事件使用自訂命名空間。這有利於去解除綁定某DOM元素上特定的事件而不會影響到該DOM元素上的其他事件。

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

Ajax

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

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

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

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

• 4、明確設定資料的類型dataType，這樣很容易知道當前正在處理什麼樣的資料。

• 5、對Ajax載入的DOM元素繫結事件時盡量使用事件代理。事件代理的優勢是對於Ajax後來添加到DOM的元素也能響應事件。

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

• 6、使用Promise

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

• 7、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);

效果和動畫

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

2、不要過度使用動畫效果，除非追求使用者體驗。

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

• 盡量使用預定義的動畫時間間隔：slow,fast或400

外掛程式

• 1、始終選擇有良好維護、優秀文檔、良好測試和社區支援的外掛程式。

• 2、細心檢查該外掛程式與正在使用的jQuery版本的相容性。

• 3、任何通用的組件都應該抽取成jQuery外掛程式。

鏈式寫法

• 1、盡量使用鏈式寫法而不是用變數緩衝或者多次調用選取器方法。

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

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

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

• 3、對於更長的鏈式調用，可接受用變數緩衝一個中間對象。

其他原則

• 1、參數盡量使用對象字面量。

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

• 2、不要把CSS混進jQuery

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

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

• 4、需要時可使用原生JS方法。

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

  

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

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