0

假设我有以下代码：

    $(function () {
    $(".buy-it-now.ribbon").click(function () {
        $(".bid-to-beat.ribbon.active").removeClass("active");
        $(".bid-to-beat.ribbon").addClass("inactive");
        $(".buy-it-now.ribbon.inactive").removeClass("inactive");
        $(".buy-it-now.ribbon").addClass("active");
        $(".bid-now").hide();
        $(".buy-now").show();
        $(".add-to-cart").hide();
    })
    $(".bid-to-beat.ribbon").click(function () {
        $(".buy-it-now.ribbon.active").removeClass("active");
        $(".buy-it-now.ribbon").addClass("inactive");
        $(".bid-to-beat.ribbon").removeClass("inactive");
        $(".bid-to-beat.ribbon").addClass("active");
        $(".buy-now").hide();
        $(".bid-now").show();
        $(".add-to-cart").show();
    });
});

这是一个简单的功能，允许在我正在处理的网站的前端发生多个与 UI 相关的事情。总的来说，我对 jQuery 和 JavaScript 相当（非常）陌生，现在正在学习重构和使我的代码更加简洁。我目前编写代码的方式有点像我所想的那样。所以我的问题是，有经验的开发人员如何编写相同的代码？或者更确切地说，我该如何重构这段代码？

4

4 回答 4

1

尝试以下操作：

$(function () {
    var $handlers = $('.buy-it-now.ribbon, .bid-to-beat.ribbon');

    $handlers.click(function() {
        $handlers.toggleClass("active inactive");

        var $elements = $(".bid-now, .add-to-cart"),
            $buyElement = $(".buy-now");

        if($(this).is('.buy-it-now.ribbon')) {
            $elements.hide();
            $buyElement.show();
        } else {
            $elements.show();
            $buyElement.hide();
        }
    });
});
于 2012-09-12T20:15:42.347 回答
0

这个问题更适合代码审查，但是可以使用方法链接将其压缩一点。

$(function () {
    $(".buy-it-now.ribbon").click(function () {
        $(".bid-to-beat.ribbon").removeClass("active").addClass("inactive");
        $(".buy-it-now.ribbon").removeClass("inactive").addClass("active");
        $(".bid-now").hide();
        $(".buy-now").show();
        $(".add-to-cart").hide();
    })
    $(".bid-to-beat.ribbon").click(function () {
        $(".buy-it-now.ribbon").removeClass("active").addClass("inactive");
        $(".bid-to-beat.ribbon").removeClass("inactive").addClass("active");
        $(".buy-now").hide();
        $(".bid-now").show();
        $(".add-to-cart").show();
    });
});

您可以通过在点击事件之前预先选择元素并将它们缓存在变量中来进一步压缩它，只要在页面的生命周期内没有添加或删除任何元素。

于 2012-09-12T19:53:00.670 回答
0

作为您的代码，您可以将一些选择器组合成一行。而且因为你的元素看起来是静态的，你可以将它们缓存到一个变量中并在以后使用它们，因为它减少了在 DOM 中查找元素的次数，从而减少了访问时间。

您还可以通过将它们封装在对象或闭包中来限制这些变量或选择器的范围。

也许这些行中的某些东西..

       $(function () {
   cart.init();
});

var cart = {
    elems : {
        $buyRibbon : null,
        $bidRibbon : null,
        $bidNow: null,
        $buyNow: null,
        $addToCart: null
    },
    events : {
    },
    init : function() {
        this.elems.$buyRibbon = $(".buy-it-now.ribbon");
        this.elems.$bidRibbon = $(".bid-to-beat.ribbon");
        this.elems.$bidNow = $(".bid-now") ;
        this.elems.$buyNow = $(".buy-now") ;
        this.elems.$addToCart = $(".add-to-cart") ;
        this.events.buyClick();
        this.events.bidClick();
    }
};

cart.events.buyClick = function() {
    cart.elems.$buyRibbon.on('click', function(){
        cart.elems.$bidRibbon.removeClass('active').addClass('inactive');
        cart.elems.$buyRibbon.removeClass('inactive').addClass('active');
        cart.elems.$bidNow.hide();
        cart.elems.$buyNow.show();
        cart.elems.$addToCart.hide();
    });
} 

cart.events.bidClick = function() {
    cart.elems.$bidRibbon.on('click', function(){
        cart.elems.$buyRibbon.removeClass('active').addClass('inactive');
        cart.elems.$bidRibbon.removeClass('inactive').addClass('active');
        cart.elems.$bidNow.show();
        cart.elems.$buyNow.hide();
        cart.elems.$addToCart.show();
    });
}

所以基本上在这里你的整个购物车是一个对象..并且购物车具有与此相关的不同属性..您在这里遵循面向对象编程的原则..我听说使用闭包可以更好地设计限制您的代码范围..

于 2012-09-12T20:13:51.693 回答
0

我可以建议这样的事情：

$(function () {
    var buyNowButton = $('buy-it-now.ribbon'),
        bidToBeatButton = $('.bid-to-beat.ribbon'),
        buyNowEls = $('.buy-now'),
        bidToBeatEls = $('.bid-now,.add-to-cart');

    var toggleButtons = function(showBuyNow){
        buyNowButton.toggleClass('active', showBuyNow);
        bidToBeatButton.toggleClass('active', !showBuyNow);
        buyNowEls.toggle(showBuyNow);
        bidToBeatEls.toggle(!showBuyNow);
    }

    buyNowButton.click(function(){ toggleButtons(true) });
    bidToBeatButton.click(function(){ toggleButtons(false) });
});

如果节省的空间比轻微的性能损失更重要，您可以通过在开始时删除选择器来节省一些行，然后就地进行选择。然后它看起来像这样：

$(function () {
    var toggleButtons = function(showBuyNow){
        $('buy-it-now.ribbon').toggleClass('active', showBuyNow);
        $('.bid-to-beat.ribbon').toggleClass('active', !showBuyNow);
        $('.buy-now').toggle(showBuyNow);
        $('.bid-now,.add-to-cart').toggle(!showBuyNow);
    }

    $('buy-it-now.ribbon').click(function(){ toggleButtons(true) });
    $('.bid-to-beat.ribbon').click(function(){ toggleButtons(false) });
});

第一个版本选择元素一次并将它们保存在内存中；每次单击按钮时，第二个都会选择它们。两者都解决了我认为选择的答案会出现的问题，其中两次单击相同的按钮会导致 .active 和 .inactive 类与显示/隐藏的元素不同步。

于 2012-09-12T21:15:43.793 回答