2

私はいくつかの Jquery コードをクリーンアップしています。私はいつも読んでいますが、チェーンはパフォーマンスに優れています。

質問:これには、多数のqueue() および filter()
を持つチェーンも含まれますか?

たとえば、チェーンを解除しました：

var self = this,
    co = el.jqmData("panel"),
    pop = $('div:jqmData(id="'+co+'")'),
    wrap = pop.closest('div:jqmData(wrapper="true")');

if ( pop.is(":visible") ) {
    if ( pop.hasClass('switchable') && wrap.jqmData('switchable') ) {
        pop.css('display','none').addClass("switched-hide");
            self.panelWidth( true );                    
        } else {
            self.hideAllPanels("8");
            }
    } else {
        if ( pop.hasClass('switchable') && wrap.jqmData('switchable') ) {
            pop.css('display','block').removeClass("switched-hide");
            self.panelWidth( true );
        } else {
            self.hideAllPanels("8");

            if ( pop.hasClass('ui-popover-center') ){
                pop.css("left", (($(window).width() - pop.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                }       

            pop.jqmData("fixed") == "top" ? 
                pop.css( "top", $( window ).scrollTop() + "px" ) :
                    pop.css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

        ...there's more
        }

そもそも重複したコードが好きではありませんでした。私は今、そのようにチェーンされたバージョンで遊んでいて、やり過ぎているのではないかと心配しています:

 wrap.filter(':jqmData(switchable="true")')
      .find( pop )
           .filter('.switchable:visible')
                .css('display','none')
                .addClass("switched-hide")
                .end()
           .filter('.switchable:hidden')
                .css('display','block')
                .removeClass("switched-hide")
                .end()
           .queue(function(next){
                self.panelWidth( true )
                next();
                })
           .end()
      .end() // back to wrap
      .filter(':not(:jqmData(switchable="true")')
           .find( pop )
                .queue(function(next){
                     self.hideAllPanels("8")
                     next();
                     })
                .filter('.ui-popover-center')
                     .css("left", (($(window).width() - pop.outerWidth()) / 2) + $(window).scrollLeft() + "px")
                     .end()
                .filter(':jqmData(fixed="top")')
                     .css( "top", $( window ).scrollTop() + "px" )
                     .end()
                .filter(':jqmData(fixed="bottom")')
                     .css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" )
                     .end()
                 ...

質問:
特に queue() と filter() を使用している場合、Jquery の連鎖がパフォーマンスに悪影響を与えるポイントはありますか?

ご意見ありがとうございます。

PS: 上記はテストしていません。おそらくいくつかの間違いがあります。概念的な情報をもっと探しています。

4

2 に答える 2

2

DOM や js スクリプトが大規模 (またはルーピー) でない限り、同じコードの連鎖バージョンと非連鎖バージョンのパフォーマンスの違いに気付くことはほとんどありません。

個人的には、どちらが開発と保守が容易であるかに基づいて決定を下します。コードの可読性は、おそらく最も重要な要素です。

于 2012-06-13T18:51:12.140 に答える
1

連鎖は常に高速ですが、速度の最も重要な要因は、ローカル変数を参照し、適切な初期セレクターを持つことだと言わざるを得ません。

ただし、2番目の方法のように過度に連鎖することは避けるべきだと思います。私はあなたの最初の例に固執します!

于 2012-06-13T19:34:17.653 に答える