歡迎光臨
每天分享高質量文章

jQuery程式設計的最佳實踐

英文:Abhinay Rathore

譯文:劉哇勇(@劉哇勇)

網址:http://lab.abhinayrathore.com/jquery-standards/

好像是feedly訂閱裡看到的文章,讀完後覺得非常不錯,譯之備用,多看受益。

載入jQuery

1.堅持使用CDN來載入jQuery,這種別人伺服器免費幫你託管檔案的便宜幹嘛不佔呢。點選檢視使用CDN的好處,點此檢視一些主流的jQuery CDN地址。

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

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

3.使用駝峰命名

關於選擇器

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

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

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

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

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

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

// 醜陋

$("div.data .gonzalez");

// 最佳化後

$(".data td.gonzalez");

5.避免冗餘。詳情或者檢視效能比較

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

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

$(".data td.gonzalez");

6.指定選擇的背景關係。

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

$('.class');

// 高品程式碼:因為只需在指定容器範圍內進行查詢

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

7.表使用萬能選擇器。檢視具體闡釋

$('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操作相關

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

  • "+i+"
  • ");

    }

    // 這樣好

    var $myList = $("#list");

    var list = "";

    for(var i = 0; i < 10000; i++){

    list += "

  • "+i+"
  • ";

    }

    $myList.html(list);

    // 但這樣更好

    var array = [];

    for(var i = 0; i < 10000; i++){

    array[i] = "

  • "+i+"
  • ";

    }

    $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事件的處理程式放到外部檔案中引入到頁面,而頁面中內嵌的程式碼只需呼叫即可。

    贊(0)

    分享創造快樂