jQuery編程的最佳實踐

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

 

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

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 = $("p.products"); // 慢

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

3.使用駝峰命名

 

關於選擇器

 

1.盡量ID選擇器。其背後機理其實是調用原生的document.getElementById(),所以速度較其他選擇器快。

 

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

 

var $products = $("p.products"); // 慢

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

3.ID父親容器下面再查找子元素請用.find()方法。這樣做快的原因是通過id選擇元素不會使用Sizzle引擎。詳情看這裡 

 

4.多級查找中,右邊盡量指定得詳細點而左邊則盡量簡單點。瞭解更多

 

// 醜陋

$("p.data .gonzalez");

 

// 優化後

$(".data td.gonzalez");

5.避免冗餘。詳情或者查看性能比較

 

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

 

// 好的方式:去掉瞭中間的冗餘

$(".data td.gonzalez");

6.指定選擇的上下文。

 

// 劣質的代碼:因為需要遍歷整個DOM來找到.class

$('.class');

 

// 高品代碼:因為隻需在指定容器范圍內進行查找

$('.class', '#class-container');

7.表使用萬能選擇器。查看具體闡釋

 

$('p.container > *'); // 差

$('p.container').children(); // 棒

8.警惕隱式的萬能選擇器。省略的情況下其他使用的就是*號通配符。更多信息

 

$('p.someclass :radio'); // 差

$('p.someclass input:radio'); // 棒

9.ID已經表示唯一瞭,背後使用的是document.getElementById(),所以表跟其他選擇器混搭瞭。

 

$('#outer #inner'); // 臟

$('p#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("<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.不要處理不存在的元素。詳情

 

// 無良的做法: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事件的處理程序放到外部文件中引入到頁面,而頁面中內嵌的代碼隻需調用即可。

 

<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.如果可能盡量在綁定事件處理程序時使用一個命名空間,這樣可以方便地取消綁定而不會影響其他綁定。

 

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不錯

// 之後,讓我們優雅地解除綁定

$("#myLink").unbind("click.mySpecialClick");

異步操作

 

1.直接用$.ajax()而表去用.getJson() 或 .get(),因為jQuery內部還是將其轉為前者

 

2.表對HTTPS站點使用HTTP去發起請求,最好幹脆就表指定(將HTTP或者HTTPS從你的URL中移除)

 

3.表在鏈接裡面嵌參數,請使用專門的參數設計來傳遞

 

// 不易閱讀的代碼…

$.ajax({

    url: "something.php?param1=test1&param2=test2",

    ….

});

 

// 更易閱讀…

$.ajax({

    url: "something.php",

    data: { param1: test1, param2: test2 }

});

4.盡量指明數據類型以便你自己清楚要處理什麼樣的數據(見下方會提到的Ajax模板)

 

5.對於異步動態加載的內容,最好使用代理來綁定事件處理程序。這樣的好處是對於之後動態加載的元素事件同樣有效。你或許想瞭解更多

 

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

6.使用Promise模式。更多例子

 

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

動畫與特效

 

1.保持一個始終如一風格統一的動畫實現

 

2.緊遵用戶體驗,表濫用動畫特效

 

使用簡潔的顯示隱藏,狀態切換,滑入滑出等效果來展示元素

使用預設值來設置動畫的速度'fast','slow',或者400(中等速度)

插件相關

 

1.始終選擇一個有良好支持,完善文檔,全面測試過並且社區活躍的插件

 

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

 

3.一些常用功能應該寫成jQuery插件。一分jQuery插件的編寫模板

 

鏈式句法

 

1.除瞭用變量將jQuery選擇器返回的結果保存,還可以利用好鏈式調用。

 

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

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

 

$("#myLink")

    .addClass("bold")

    .on("click", myClickHandler)

    .on("mouseover", myMouseOverHandler)

    .show();

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

 

其他

 

1.使用對象字面量來傳遞參數

 

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 糟糕:調用瞭三次attr

// 不錯,隻調用瞭一次attr

$myLink.attr({

    href: "#",

    title: "my link",

    rel: "external"

});

2.表將CSS與jQuery雜揉

 

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

.error {/* 不錯 */

    color: red;

    font-weight: bold;

}

$("#myp").addClass("error"); 

3.時刻關註官方Changelog,表使用摒棄瞭的方法。點此查看所有廢棄的方法

 

4.適時地使用原生JavaScript。一些與此有關的性能比較

 

$("#myId"); // 多少還是會遜色於…

document.getElementById("myId");

發佈留言