jQuery重構

我經常花10-20分鐘看jQuery片段，以找到縮短代碼的方法。jQuery重構

現在我已經一次又一次地看這段代碼，但只是想知道人們將如何去重構它，或者如果他們真的會。

$("#tabs ul li").first().addClass("activeTab"); 
$("#tabs div").hide().first().show(); 
$("#tabs ul li a").click(function(){ 
    $("#tabs div").hide(); 
    $("#tabs").find($(this).attr('href')).show(); 
});

這是一個好奇心的問題，那就是我努力提高自己在jQuery中的編程技能時的求救聲。

/*編輯

鏈路連接的所有美妙的建議是jsFiddle

最終結果。

var $c = $("#tabs"), $t = $c.find("li"), $d = $c.find("div"); 
$d.not(":first").hide(); 
$t.find("a").click(function() { 
    $d.hide().filter($(this).attr('href')).show(); 
}).closest("li").first().addClass("activeTab");

來源

2012-11-26 The Angry Saxon

沒有看到標記，並充分理解你要完成什麼，沒有辦法來正確地優化它。 –

我要做的唯一事情就是顛倒前兩條語句的順序：我總是把類似的東西放在一起，所以'#tabs ul li'類似於'#tabs ul li a'，所以它們會在另一個，'#tabs div'是別的，可以在第一行「單獨」 – Zweer

你的第一個選擇器可以寫成'$（'＃tabs ul li：first'）'和對'的調用。 first（）'可以被刪除。除此之外，我沒有看到任何需要重構的東西，但是我更喜歡可讀的代碼而不是簡單的代碼。正如詹姆斯指出的那樣，如果你在追求優化，那麼我們就不能在沒有看到你的標記的情況下評論性能。 –

我會重構這個如下。沒有必要每次都創建jQuery對象，併爲將來的使用做一個參考。

var $tabs = $("#tabs"); 

    $tabs.find("li:first").addClass("activeTab"); 
    $tabs.find('div').not(':first').hide(); 
    $tabs.find("a").click(function() { 
     $("#tabs div").hide().filter($(this).attr('href')).show(); 
    })

來源

2012-11-26 13:51:04 Ehtesham

這是我之後的事情。我對粘貼var $ tabs的理解是，它不會經常調用DOM？真的嗎？ –

它應該只訪問DOM一次，除了$（「tabs div」）。not（）'調用。 'find'調用將在'$ tabs'變量中查找標記。 –

謝謝我已經實現了你的解決方案和fegemo's的混合體與額外的聲明 –

我個人認爲這個代碼是OK，但將重構$("#tabs div").hide().first().show();只是爲了使其更具可讀性，也許：

$("#tabs div").not(":first").hide();

來源

2012-11-26 13:50:33

我會重構選擇器，所以遍歷Dom會更便宜。它會是這樣的：

var $tabsControl = $("#tabs"), 
    $tabs = $tabsControl.find("ul > li"), 
    $tabsContent = $tabsControl.find("div"); 

$tabs.first().addClass("activeTab"); 
$tabsContent.hide().first().show(); 
$tabs.find("a").click(function() { 
    $tabsContent.hide(); 
    $tabsControl.find($(this).attr("href")).show(); 
});

來源

2012-11-26 13:53:09 fegemo

我最喜歡這個版本，但不幸的是即使有bug修復和快速檢查我也無法使它工作。 –

感謝您的編輯。我現在驗證它正常工作。 – fegemo

回答

相關問題