JavaScript 重构/避免重复答案

【问题标题】：JavaScript Refactoring / Avoid RepititionJavaScript 重构/避免重复
【发布时间】：2012-07-31 04:32:40
【问题描述】：

我需要对其进行重构以避免代码重复。

$('#showmore-towns').toggle(
    function() {
        $('.popularTownsAdditional').show();
        console.log(this);
        $('#showmore-town .showless').show();
        $('#showmore-town .showmore').hide();
        $('#showmore-town').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularTownsAdditional').hide();
        $('.showless').hide();
        $('.showmore').show();
        $('#showmore-towns').addClass('sd-dark28').removeClass('sd-dark28down');
    });

$('#showmore-cities').toggle(
    function() {
        $('.popularCitiesAdditional').show();
        $('#showmore-cities .showless').show();
        $('#showmore-cities .showmore').hide();
        $('#showmore-cities').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularCitiesAdditional').hide();
        $('#showmore-cities .showless').hide();
        $('#showmore-cities .showmore').show();
        $('#showmore-cities').addClass('sd-dark28').removeClass('sd-dark28down');
    });

基本上，它显示相同的功能，但仅在具有不同 ID 的不同 div 上。

【问题讨论】：

试试codereview.stackexchange.com

标签： javascript jquery coding-style

【解决方案1】：

可能只需要引用一个或两个命名函数而不是匿名函数。

function showStuff(typeToShow) {
    $('.popular' + typeToShow + 'Additional').show();
    $('#showmore-' + typeToShow + .showless').show();
    $('#showmore-' + typeToShow + .showmore').hide();
    $('#showmore-' + typeToShow).removeClass('sd-dark28').addClass('sd-dark28down');
    return false;
}

function hideStuff(typeToHide) {
    $('.popular' + typeToHide + 'Additional').hide();
    $('#showmore-' + typeToHide + .showless').hide();
    $('#showmore-' + typeToHide + .showmore').show();
    $('#showmore-' + typeToHide ).addClass('sd-dark28').removeClass('sd-dark28down');
}

注意：a) 你可以让这些方法更简洁一些，但你明白了！注意：b) 如果要使用建议的替换，您需要将“#showmore-town”重命名为“#showmore-towns”（带有 S）。

然后在您的切换中，您可以引用这些函数：

$('#showmore-towns').toggle(showStuff(towns),
hideStuff(towns));

$('#showmore-cities').toggle(showStuff(cities),
hideStuff(cities));

【讨论】：

【解决方案2】：

我的意思是...如果它总是以 #showmore- 开头...我们可以解决它

$('[id^=showmore-]').toggle(
function() {
    var id = $(this).prop('id');
    id = id.split('-')[1];
    var upperID = id.charAt(0).toUpperCase() + id.slice(1);
    $('.popular'+upperID+'Additional').show();
    $('#showmore-'+id+' .showless').show();
    $('#showmore-'+id+'.showmore').hide();
    $('#showmore-'+id).removeClass('sd-dark28').addClass('sd-dark28down');
    return false;
},
function() {
    var id = $(this).prop('id');
    id = id.split('-')[1];
    var upperID = id.charAt(0).toUpperCase() + id.slice(1);
    $('.popular'+upperID+'Additional').hide();
    $('#showmore-'+id+' .showless').hide();
    $('#showmore-'+id+' .showmore').show();
    $('#showmore-'+id).addClass('sd-dark28').removeClass('sd-dark28down');
});

【讨论】：

【解决方案3】：

你可以这样做：

(function() {

    $('#showmore-towns').toggle(
        function() { showmorelessOn('#showmore-town'); },
        function() { showmorelessOff('#showmore-town'); }
    );
    $('#showmore-cities').toggle(
        function() { showmorelessOn('#showmore-town'); },
        function() { showmorelessOff('#showmore-town'); }
    );

    var showmorelessOn = function(context) {
        $('.popularCitiesAdditional').show();
        $('.showless', context).show();
        $('.showmore', context).hide();
        $(context).removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    };
    var showmorelessOff = function(context) {
        $('.popularCitiesAdditional').hide();
        $('.showless', context).hide();
        $('.showmore', context).show();
        $(context).addClass('sd-dark28').removeClass('sd-dark28down');
    };

})();

虽然我同意，但也许在 codereview.stackexchange.com 上提供更好的服务

【讨论】：

【解决方案4】：

我会几乎完全在 CSS 中执行此操作。仅使用 .toggleClass() 并确定 CSS 中显示的内容和隐藏的内容。

【讨论】：

【解决方案5】：

(function() {

    $('#showmore-towns').toggle(
        function() { showmorelessOn.call($('#showmore-town')); },
        function() { showmorelessOff.call($('#showmore-town')); }
    );
    $('#showmore-cities').toggle(
        function() { showmorelessOn.call($('#showmore-town')); },
        function() { showmorelessOff.call($('#showmore-town')); }
    );

    var showmorelessOn = function() {
        $('.popularCitiesAdditional').show();
        $('.showless', this).show();
        $('.showmore', this).hide();
        $(this).removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    };
    var showmorelessOff = function() {
        $('.popularCitiesAdditional').hide();
        $('.showless', this).hide();
        $('.showmore', this).show();
        $(this).addClass('sd-dark28').removeClass('sd-dark28down');
    };

})();



(function() {

    $('#showmore-towns').toggle(
        function() { showmoreless(); }
    );
    $('#showmore-cities').toggle(
        function() { showmoreless(); }
    );

    var showmoreless = function() {
           if(this.hasClass('sd-dark28'){
            $('.popularCitiesAdditional').show();
            $('.showless', this).show();
            $('.showmore', this).hide();
            $(this).removeClass('sd-dark28').addClass('sd-dark28down');
       }
     else
       {
      $('.popularCitiesAdditional').hide();
            $('.showless', this).hide();
            $('.showmore', this).show();
            $(this).addClass('sd-dark28').removeClass('sd-dark28down');
      }
}.bind($('#showmore-town'));
})();

【讨论】：