JQuery和Javascript：編寫更好的代碼-如何在兩者上都進行改進

Question

在仍然學習JavaScript和JQuery的同時，我嘗試盡可能地實現“ DRY”原理，以編寫更智能，更好和有效的代碼。 下面的代碼是之前的代碼：

$(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');
});

}）;

這是After（替換上面的代碼）：

$(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]);
        };
    });
});

在上面編寫代碼是否有更好的方法，而在第二個代碼上主要是比第一個代碼更有效嗎？ 任何更好的方法。 這是我正在練習的筆的鏈接 。

Answer 1

您對干原則的理解有點過頭了。 您的代碼太難閱讀，並沒有真正為您節省任何代碼行。

話雖這么說，您甚至不需要JavaScript即可完成您想做的事情（現在已經干了！）。 我認為您可以使用CSS：hover選擇器來執行相同的效果。

Answer 2

看起來您遵循了將多行幾乎相同的代碼轉換為數據結構循環的一般原理。 但是為什么不將數據結構移出函數呢？ 現在的編碼方式，我想每次調用該函數時JavaScript都會重新創建數據。 由於數據是恆定的並且不依賴於函數的參數，因此請在函數外部進行定義。 而且，順便說一句，我認為這是DRY的一個很好的應用程序：我從不希望看到重復的代碼塊在我的工作中！