2

我正在清理一些 Jquery 代码。我一直在阅读，链接对性能有好处。

问题：
这是否还包括具有大量queue() 和 filter()的链？

例如，我有unchained：

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()
                 ...

问题：
是否存在链接 Jquery 对性能不利的情况，尤其是在使用 queue() 和 filter() 时，还是我应该继续进行？

感谢您的输入！

PS：以上没有测试。大概有几个错误。我正在寻找更多的概念信息。

4

2 回答 2

2

Unless your DOM and/or your js script is massive (or loopy), then you are unlikely to notice any performance difference between chained and unchained versions of the same code.

Personally, I would make my decision based on which is easier to develop and maintain. Readability of the code is probably the most important factor.

于 2012-06-13T18:51:12.140 回答
1

Chaining will always be faster but I'd have to say the most important factor for speed would be referring to a local variable and having a good initial selector.

However, I think you should avoid chaining as excessive as your second method. I would stick with your first example!

于 2012-06-13T19:34:17.653 回答