JQuery和Javascript：編寫更好的代碼 - 我該如何改進

-1

雖然仍然在學習JavaScript和JQuery，但我試圖儘可能實現「幹」原則來編寫更智能，更好，更高效的代碼。以下代碼是以前的代碼：JQuery和Javascript：編寫更好的代碼 - 我該如何改進

$(document).ready(function(){ 
$('#social-holder').mouseenter(function(){ 
    $('.circle-bg-fb').addClass('circle-bg-fb-end'); 
    $('.circle-bg-tw').addClass('circle-bg-tw-end'); 
    $('.circle-bg-g').addClass('circle-bg-g-end'); 
    $('.circle-bg-p').addClass('circle-bg-p-end'); 
}).click(function(){ 
    $('.circle-bg-fb').removeClass('circle-bg-fb-end'); 
    $('.circle-bg-tw').removeClass('circle-bg-tw-end'); 
    $('.circle-bg-g').removeClass('circle-bg-g-end'); 
    $('.circle-bg-p').removeClass('circle-bg-p-end'); 
});

}）;

這是後（更換上面的代碼）：

$(document).ready(function(){ 
    var elems = [$('i.circle-bg-fb'), $('i.circle-bg-tw'), $('i.circle-bg-p'), $('i.circle-bg-g')]; 
    var cls = ["circle-bg-fb-end", "circle-bg-tw-end", "circle-bg-p-end", "circle-bg-g-end",]; 

    $('div#social-holder').on("mouseenter", function(){ 
     for(var i=0; i<elems.length; i++) { 
      elems[i].addClass(cls[i]); 
     }; 
    }).on("click", function(){ 
     for(var i=0; i<elems.length; i++) { 
      elems[i].removeClass(cls[i]); 
     }; 
    }); 
});

是否有寫上邊以及第二個主要是它比第一個更高效的代碼更好？任何更好的方法來做到這一點。這是我練習筆的link。

來源

2015-08-18 Chief

可能會更好地在Code Review上發佈此代碼（因爲它已經在工作，而不是在） – tymeJV

請記住，「更好」是主觀性的，代碼少並不總是更高效。如果您爲4個元素啓動for循環，則可能會增加不必要的複雜性。另外，如果讓事情精益求精並且意味着你的目標，那麼對於這個特殊問題，jQuery並不是一個很好的解決方案。 –

你已經採取了乾燥的原則有點過分。你的代碼太難閱讀了，並沒有真正爲你節省任何代碼。

這就是說，你甚至不需要JavaScript來做你想做的事情（現在幹了！）。我想可以使用CSS：hover選擇器來執行相同的效果。

來源

2015-08-18 18:29:01 dzylich

是的，可以使用懸停選擇器，但是一旦第一次轉換（out）完成，就需要依賴轉換延遲，以便在第二次（in）轉換開始之前圖標暫停。我使用JQuery的原因是添加一個點擊功能來觸發第二次轉換 - 另外還用於練習目的。我已經使用CSS懸停更新了代碼，並且還包含了JQuery。 @dzylich – Chief

看起來您已經遵循了將多行幾乎相同的代碼轉換爲數據結構中的循環的一般原則。但爲什麼不把數據結構移出函數呢？現在編碼的方式，我猜想每次調用函數時JavaScript都會重新創建數據。由於數據是常量，並且不依賴於函數的參數，所以在函數之外定義它。順便說一句，我認爲這是DRY的一個很好的應用：我從不希望在我的工作中看到像這樣的重複代碼塊！

來源

2015-08-18 18:30:42

JQuery和Javascript：編寫更好的代碼 - 我該如何改進

回答

相關問題