javascript - jQuery 干涸功能

Question

正如您在下面看到的，我清楚地重复了一遍。我知道这是不好的做法。

那么，如何将 if 和 else 语句中重复的 4 行代码重构为一个呢？

一些更好的实践指导将不胜感激。此外，您发现任何有助于学习此技术的 DRY 引用资料/教程。

$('.inner_wrap .details').click(function() {
    var index = $('.inner_wrap .details').index(this);

    $('.details').removeClass('here');
    $(this).addClass('here');
    $('.view').removeClass('active');
    $(this).find('.view').addClass('active');
    console.log(index);
    if(index > 2){
        index -= 3;
        **// This and its corresponding else statement is the topic of the question**
        $(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide').removeClass('tabShow');
        $(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide:eq(' + index + ')').addClass('tabShow');
    } else {
        $(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide').removeClass('tabShow');
        $(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide:eq(' + index + ')').addClass('tabShow');
    }

    return false;
});

Answer 1

请注意，代码在 if 和 else 中重复出现，这意味着它始终会执行。把它从声明中取出来就可以了:

if (index > 2) {
    index -= 3;
}
var elt = $(this).closest('.outer_wrapper').prev('.outer_wrapper');
elt.find('.tabSlide').removeClass('tabShow');
elt.find('.tabSlide:eq(' + index + ')').addClass('tabShow');

接下来，请注意 jQuery 对象只是一个数组。您可以这样简化代码:

if (index > 2) {
    index -= 3;
}
var elt = $(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide');
$(elt.removeClass('tabShow')[index]).addClass('tabShow');

最后，我们可以去掉 aux 变量，它只是用来演示如何调用同一个对象:

if (index > 2) {
    index -= 3;
}
$($(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide').removeClass('tabShow')[index]).addClass('tabShow');

请将其分成多行代码:D

[编辑]

好吧，只是为了好玩，这里有一个更极端的宇航员类型的代码，去掉了剩余的 if:

$($(this).closest('.outer_wrapper').prev('.outer_wrapper').find('.tabSlide').removeClass('tabShow')[(index <= 2 ? index : index - 3)]).addClass('tabShow');

但是!这是非常不可读的，IMO，你应该坚持第一步。在它成为性能问题之前，不要过度使用它。以可读性/可维护性为代价应用 DRY 规则，或者将所有内容都粘贴到一行代码中，与阅读和编写缩小代码一样有意义。即，不要这样做 :)。

[编辑 2]

@StuartNelson 让我想起了 $.eq() 函数的存在，它会将最终代码带到这里(分为几行):

$(this).closest('.outer_wrapper')
    .prev('.outer_wrapper')
    .find('.tabSlide')
    .removeClass('tabShow')
    .eq(index <= 2 ? index : index - 3)
    .addClass('tabShow');