jQuery最佳實踐

原文地址：http://lab.abhinayrathore.com/jquery-standards/
第一次翻譯，有不對不妥的地方請拍磚。

在寫出更好的JQuery代碼的時候有一些標準和最佳實踐，這些標準不包括JS的標準或最佳實踐，若是有任何疑問，建議或改進，請在個人博客留言。
最後更新時間：芝加哥時間2014。3。17，13：15

加載Jquery
1.使用CDN服務加載jq到你的頁面裏

<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服務：
Google: https://developers.google.com/speed/libraries/devguide 
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery: http://jquery.com/download/cdnjs: http://cdnjs.com
OSSCdn: http://osscdn.com

2.準備一個本地的同版本的的JQ。（CDN服務失效的時候檢測window.jQuery是否存在，不存在則加載本地服務器上的文件）
3.使用相對協議加載（如第一條使用//，而不使用http://或https://）
4.若是有可能，始終保持js和jq文件在頁面的最後加載
5.選擇什麼版本？
若是你的網站須要支持IE六、七、8，請不要選擇2.X版本。
對於新的應用，若是沒有插件的兼用性問題，仍是推薦使用最新的版本。
當從cdn加載jq，始終指定你要加載的完整的版本數。
不要使用多個版本
6.若是使用了其餘好比Prototype, MooTools, Zepto etc. 等也使用$的庫，試着不要用$調用jquery的函數，用 jQuery代替，可使用$.noConflict()方法把$的控制權交給其餘的庫。
7.對於先進的瀏覽器特性，使用Modernizr.

**JQuer變量 **
1.使用$前綴緩存JQ的對象
2.緩存JQ選擇器返回的對象達到重用的目的
3.使用駝峯式命名變量

選擇器
1.儘量的使用ID選擇器，由於它是經過 document.getElementById()處理的。
2.當使用class選擇器的時候不（需）要使用元素類型

var $products = $("div.products"); // SLOWvar $products = $(".products"); // FAST

3.對於ID->child這種嵌套結構，使用find()方法，由於它不經過Sizzle選擇器引擎處理。

// 糟糕的，一個使用Sizzle引擎的嵌套選擇 $productIds = $("#products div.id");//好的，#products已經經過 document.getElementById()選擇，因此只有div.id須要經過Sizzle引擎選擇一下就能夠了$productIds = $("#products").find("div.id");

4.選擇器右側的內容要儘可能詳細，左側則不須要

// 糟糕的$("div.data .gonzalez");//好的$(".data td.gonzalez");

5.避免過分的描述

// 糟糕的$(".data table.attendees td.gonzalez");// 好的，儘量的去掉中間的沒必要要的部分 $(".data td.gonzalez");

6.給選擇器指定上下文

$('.class');//慢的，須要遍歷整個dom去查找.class$('.class', '#class-container');//快的，由於它僅在class-container元素下查找

7.不使用全局選擇器（*）

$('div.container > *'); // 糟糕的$('div.container').children(); // 好的

8.避免隱式的使用*
9.不要嵌套ID，由於它經過document.getElementById()查找，不須要也不該該跟其餘的選擇器混在一塊兒。

DOM操做
1.在操做前始終把存在的元素分離出來而且在操做後恢復它。

var $myList = $("#list-container > ul").detach();//不少複雜的東西在$myList$myList.appendTo("#list-container");

2.使用字符串或者array.join()而不是.append()
性能對照：http://jsperf.com/jquery-append-vs-string-concat

// 糟糕的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.不要操做不存在的元素，

// 糟糕的，在這個操做實現以前先運行了3個方法$("#nosuchthing").slideUp();// GOODvar $mySelection = $("#nosuchthing");if ($mySelection.length) {
    $mySelection.slideUp();
}

事件
1.每一個頁面僅使用一個Document Ready handler，方便快速的調試和跟蹤
2.不要使用匿名方法，調試，維護，測試或重用很困難。

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

1. Document ready事件處理器不該該做爲一個匿名方法，再說一次，匿名方法不利於調試和跟蹤。

$(function(){ ... }); // BAD: 你永遠沒法重用或者測試這個方法// GOOD$(initPage); // or $(document).ready(initPage);function initPage(){
    // 頁面初始化和調用其餘函數的處理器 }

1. Document ready處理器應該從外部文件加載而且內聯的腳本能夠用來初始化處理器和設置

<script src="my-document-ready.js"></script><script>
     // 這裏能夠定義須要的變量
     $(document).ready(initPage); // or $(initPage);</script>

5.不要在HTML內使用行爲標記（內聯腳本），這些是調試的噩夢，始終使用JQuery綁定事件保持一致性，這樣也容易添加或移除事件。

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

6.若是可能，對於事件使用自定義的命名空間，這樣更容易移除指定的事件

AJAX
1.避免使用.getJson() 或 .get()，而是直接使用$.ajax()方法
2.不要使用http或https請求，寧願選擇無模式的URLs，從url中去掉http或https
3.不要在url中加參數，用data對象傳遞它們。

// Less readable...$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});// More readable...$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.指定數據格式，它能更快速的知道你正在使用哪一種數據。（Ajax Template example部分）
5.Ajax加載的內容使用委派的事件處理程序，委派事件的優勢是能夠處理後加載到文檔裏的事件。

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

6.使用約定的接口

$.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", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
    statusCode: { // 若是想處理具體的錯誤代碼，使用的狀態代碼映射設置
        404: handler404,        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

效果和動畫
1. 採起嚴謹和一致的方法來實現動畫功能。
2. 直到被UX需求驅動不然不要過分作動畫效果。
嘗試使用簡單的show/hide, toggle and slideUp/slideDown功能切換元素。
使用預約的參數"slow", "fast" 或者400 (中等速度).

插件
1.始終使用有良好支持，文檔，測試和社區支持的插件
2.檢查插件與你所使用的jQuery版本是否兼容
3.任何常見的可重用組件應該實現爲一個jQuery插件，點擊這裏查看jQuery插件樣板代碼。

鏈式操做
1．使用鏈式操做代替變量緩存和屢次操做
2．每當鏈長超過3個連接或獲得，由於活動任務的複雜，使用適當的換行和縮進使代碼的可讀性。

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

3.對於較長的鏈式操做能夠把對象緩存到一個變量裏。

雜項
1.爲參數使用對象字面量。

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD, 3 calls to attr()// GOOD, only 1 call to attr()$myLink.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.必要時結合使用jQuery的原生JavaScript。參見下面給出的例子的性能差別：http://jsperf.com/document-getelementbyid-vs-jquery/3

$("#myId"); // 它始終比下邊的慢一點document.getElementById("myId");

資源
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/

4 推薦 15 收藏

3月26日