javascript - JQuery 和 Javascript : Writing Better code - How can I improve on both

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

上面的代码和第二个代码有没有更好的写法，主要是它比第一个更有效率吗？任何更好的方法来做到这一点。这是一个link我正在练习的笔。

Answer 1

您对干燥原则的理解有点过头了。您的代码太难阅读，并没有真正为您节省任何代码行。

话虽这么说，您甚至不需要 javascript 来完成您想要做的事情(现在已经很干了!)。我认为您可以使用 CSS :hover 选择器来实现相同的效果。