jQuery編程規範與最佳實踐（附帶一些我的的筆記）

時間  2019-11-14
標籤 jquery 編程 規範 最佳 實踐 附帶 一些 我的 筆記 欄目 JQuery 简体版
原文   原文鏈接

加載jQuery-Loading jQuery

1.堅持使用CDN來加載jQuery，這種別人服務器免費幫你託管文件的便宜幹嗎不佔呢。點擊查看使用CDN的好處，點此查看一些主流的jQuery CDN地址。javascript

<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>
下面一行代碼是檢測jQuery這個全局對象是否存在，存在則已經加載完成，不存在則加載本地的jQuery庫（保證下載不到的用戶能獲取到）

2.安全起見，最好仍是提供一個本地備份以便在沒法從遠程CDN服務器獲取jQuery時網站也能工做，如上面代碼所示。詳情見此。php

3.使用裸協議的URL（也就是說去掉http:或者https:），如上面代碼展現的那樣。（不少網站都轉向HTTPS協議了，爲了保證不出錯最好不寫協議，讓轉發的本身判斷）css

4.若是可能，儘可能將你的JavaScript和jQuery代碼放到頁面底部。詳情移步這裏，或者查看一個HTML5頁面標準模板。html

5.該使用哪一個版本？html5

  • 若是你想兼容IE6/7/8請別用2.x的版本
  • 針對極少數不用考慮兼容性的幸運兒，極力推薦使用最新版本的jQuery
  • 當從CDN服務器加載jQuery時，最好把版本寫全（好比1.11.0而不是1.11或者直接寫個1）
  • 不要使用從 jQuery CDN處下載的最新的 jquey-latest.js（最新版jQuery）

6.若是你同時還使用了其餘JS框架諸如Prototype, MooTools, Zepto云云，由於他們也使用了$符號，因此你就不要再用美刀符號來進行jQuery 編碼了，而請用'jQuery'代替。而且調用 $.noConflict() 保證不會有衝突出現（還能夠選擇是否讓出 jQuery 全局對象）。java

7.要檢測瀏覽器對一些新特性是否支持，請用Modernizr（一個檢測CSS3和HTML5特性的JS腳本，會在body處添加一些檢測的結果）。插播廣告：論爲毛不檢測瀏覽器jquery

關於變量-jQuery Variables

1.jQuery類型的變量最好加個$前綴。git

2.時常將jQuery選擇器返回的內容存進變量以便重用（這裏涉及到性能的問題，一個jQuery數組對象後面其實擁有大量的變量屬性，大量使用很是耗費系統資源，特別對瀏覽器來講，瀏覽器的內存資源很是寶貴，這裏用到了緩存的概念）github

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.使用駝峯命名（這裏說的是小駝峯命名如 myDiv 這樣的）ajax

關於選擇器-Selectors

1.儘可能ID選擇器。其背後機理實際上是調用原生的 document.getElementById()，jQuery的ID選擇器是調用原生的這個方法，其餘的則用到了document.querySelectorAll()方法，老式瀏覽器還要用Sizzle選擇器引擎模擬編譯過程匹配一大遍代碼才能夠模擬實現document.querySelectorAll的相似功能，很是耗費內存資源。

2.使用類選擇器時不要指定元素的類型。不信你看這個性能比較

這裏要理解Sizzle選擇器引擎的原理，類選擇器會優先檢測document.getElementsByClassName()方法，若是沒有的話會使用document.getElementsByTagName()原生方法模擬實現（也是很耗費內存的）。 
var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.使用find()方法對id->child進行選擇，.find()方法更快由於第一個選擇器處理沒有進過Sizzle選擇器引擎。

由於 $  ('#id') 這樣的選擇器會用document.getElementById() 方法，能夠減小Sizzle選擇器引擎的分詞壓力（選擇器越多分詞的過程就越繁瑣，運行的時間就會更久）和減小閉包的函數數量（會將函數構成閉包鏈駐留在內存中以便後面調用，jQuery犧牲了部分空間換取了執行速度快的目的）。

總的來講就一句話，將用ID選擇器和用其餘選擇器的查找分離。

// 很差的作法，對Sizzle選擇器引擎用了嵌套的查詢
var $productsIds = $("#products div.id");
// 好的作法，#product已經經過document.getElementById()獲取到，只有div.id須要經過Sizzle選擇器引擎獲取
var $productsIds = $("#products").find("div.id");

4.多級查找中，右邊的特殊性儘可能指定得多點而左邊的特殊性則儘可能少點。瞭解更多

這裏這樣寫的緣由是由於Sizzle選擇器引擎分詞構成函數閉包鏈以後是採用反向調用的原理從選擇器的右邊開始調用以前匹配好的函數。選擇器越多須要調用的函數則越多，浪費的內存越多和運行時間越長。 
// 很差
$("div.data .gonzalez");
// 優化後
$(".data td.gonzalez");
因此應該要記得寫選擇器代碼的時候的原則：越少選擇器越好，能獲取到你要的元素就能夠。並且詳細的選擇器應該放到右邊。

5.避免冗餘，選擇器越少越好，以能獲取到你想要的範圍爲準。詳情或者查看性能比較

$(".data table.attendees td.gonzalez"); 
// 好的方式：去掉了中間的冗餘
$(".data td.gonzalez");

6.指定選擇器的上下文 ( jQuery是有一個context參數能夠縮小選擇範圍的，默認爲document )。

// 劣質的代碼：由於須要遍歷整個DOM來找到.class
$('.class');
// 高品代碼：由於只需在指定容器範圍內進行查找
$('.class', '#class-container');

7.不要使用萬能選擇器，萬能選擇器會匹配很是多的TAG。查看具體闡釋

$('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操做相關-DOM Manipulation

1.操做任何元素前先將其從文檔卸載，完了再貼回去。這裏減小了訪問DOM元素的次數有利於提升性能。這事兒還能說細點

var $myList = $("#list-container > ul").detach();
//...一大堆對$myList的處理
$myList.appendTo("#list-container");

2.使用字符串鏈接（指+）或者array.join()方法而不是.append()方法。這裏也是由於.append()方法用到了DOM中的appendChild方法的緣由。因此性能不太好。具體來講，性能比較

// 很差
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(''));
性能提升有一點須要記住的，就是訪問DOM接口的時候。爲何要緩存獲得的變量？就是減小訪問DOM接口，能夠將DOM訪問看做數據庫訪問，每訪問一次就須要消耗一些資源。

3.不要處理不存在的元素。詳情

// 無良的作法：jQuery後臺要跑完三個函數後纔會知道這個元素其實根本不存在
$("#nosuchthing").slideUp();
// 應該這樣
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件相關-Events

1.一個頁面只寫一個文檔 ready 事件的處理程序。這樣代碼既清晰好調試，又容易跟蹤代碼的過程。

2.不要用匿名函數來綁定事件。匿名函數不易調試維護測試和複用。看看這裏吧

$("#myLink").on("click", function(){...}); // BAD，雅蠛蝶不要這樣
 
// GOOD
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); // GOOD

6.若是可能使用本身的一個事件命名空間（custom namespace），這樣能夠方便地取消綁定而不會影響其餘DOM元素的事件綁定。

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不錯
// 以後，讓咱們優雅地解除綁定
$("#myLink").unbind("click.mySpecialClick");

7.使用事件委託當你要對多個元素綁定相同的時間的時候。事件委託容許咱們用一個事件監聽器（事件處理函數），綁定在父元素（也能夠是祖先元素）上。這樣能夠減小頁面元素綁定的事件處理函數的數量，減小內存消耗和綁定的時間消耗。

$("#list a").on("click", myClickHandler); // BAD，你會給全部的a標籤綁定事件
// 好的作法，只有一個事件被綁定到祖先元素，而後再函數裏面再進行判別
$("#list a").on("click", "a", myClickHandler);

異步操做-Ajax

1.直接用$.ajax()而不要去用 .getJson()或 .get(),由於jQuery內部仍是將其轉爲前者

2.不要對HTTPS站點使用HTTP發起請求，最好乾脆就不要指定（將HTTP或者HTTPS從你的URL中移除）

3.不要在連接裏面嵌參數，請使用數據對象（data Object）來傳遞設置

// 不易閱讀的代碼...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// 更易閱讀...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.儘可能指明數據類型以便你本身清楚要處理什麼樣的數據（見下面的Ajax標準模板）

5.對於異步動態加載（Ajax）的內容，最好使用事件委託來綁定事件處理。這樣的好處是對於以後動態加載的元素事件一樣有效。你或許想瞭解更多

委託的優勢：對於後面添加到頁面的元素事件委託能夠檢測獲得。由於對祖先元素添加的一個事件，那麼除非在執行事件處理不然不會去關注頁面是否有什麼。因此對動態新添加的元素就能從新檢測獲得。 
$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6.使用$.when()和.then()（Promise延遲方法），Promise延遲是屬於jQuery異步模塊裏面的。更多例子

$.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);

動畫與特效-Effects and Animations

1.保持一個統一的風格和相同的動畫實現（這裏是一些設計方面的東西，若是頁面動畫多且雜會顯得沒有整齊的美感，作過設計的童鞋應該能懂做者想要表達什麼）。

2.緊遵用戶體驗，不要濫用動畫特效（動畫特效應該是由用戶體驗驅動的）

  • 使用簡潔的顯示隱藏（show/hide），狀態切換（toggle），滑入滑出（sideUp/slideDown）等效果來展現元素
  • 使用預設值來設置動畫的速度'fast'，'slow'，或者400（中等速度）

插件相關-Plugins

1.始終選擇一個有良好支持，完善文檔，全面測試過而且社區活躍的插件（怎麼感受是在說jQuery本身-_-!!）

2.注意所用插件與當前使用的jQuery版本是否兼容

3.任何經常使用或者能夠複用的功能均可以寫成jQuery插件。jQuery插件的編寫模板

鏈式句法-Chaining

1.除了用變量將jQuery選擇器返回的結果緩存，也能夠用鏈式的寫法緩存獲取到的jQuery對象再調用其它方法。（jQuery比較有特點的特色，返回的都是一個jQuery封裝成的數組對象，因此不論是一個仍是多個元素均可以調用同一個方法）。固然你也能夠用.end()或者.addSelf()或者.addBack()（addSelf和addBack是一個函數，都是指向addBack）來對jQuery的鏈式操做進行回滾（jQuery維護了一個鏈式的棧）。

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

2.當鏈式調用多達3次以上或代碼因綁定回調略顯複雜時，使用換行和適當的縮進來提升代碼的可讀性。

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

3.對於特別長的調用最好仍是用變量保存下中間結果來簡化代碼。

其餘容易混雜的地方-Miscellaneous

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'}); // BAD
.error { /* GOOD */
    color: red;
    font-weight: bold;
}
$("#mydiv").addClass("error"); /* Good */

3.不要使用摒棄了的方法，對一些公佈的廢棄的方法項目裏面最好避免使用。時刻關注官方Changelog。點此查看全部廢棄的方法

4.當須要的時候適時地結合使用原生JavaScript。jQuery的$('#')與document.getElementById原生方法的性能比較

$("#myId"); // 多少仍是會遜色於原生的方法，因此在一些注重性能的地方仍是要寫原生的JavaScript代碼
document.getElementById("myId");

參考資料-REFERENCE

原文：Coding Standards & Best Practices http://lab.abhinayrathore.com/jquery-standards/

原文的reference

這篇文章是看了一篇譯文以後結合本身對jQuery的理解和感悟以及做者的譯文和jQuery官網的編程規範作了一些小修改而成的，這裏很感謝譯文做者的貢獻。

主要用途是留給本身之後翻查和給一些jQuery新手看的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程