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

コードとして、いくつかのセレクターを 1 行にまとめることができます。また、要素が静的に見えるため、それらを変数にキャッシュして後で使用することができます.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) });
});

最初のバージョンでは要素を 1 回選択し、それらをメモリに保持します。2 番目は、ボタンがクリックされるたびにそれらを選択します。どちらも、同じボタンを 2 回クリックすると .active クラスと .inactive クラスが表示/非表示の要素と同期しなくなるという、選択した回答で発生すると思われる問題を解決します。

于 2012-09-12T21:15:43.793 に答える