效果演示

我使用数组缓存对象上传了一个效果的工作示例（将鼠标悬停在图标上以查看效果）： http://mahersalam.co.cc/addthis/

HTML：

<div id="share-widget" class="addthis_toolbox">
    <a class="addthis_button_favorites" title="أضف للمفضلة"><div>أضف للمفضلة</div></a>
    <a class="addthis_button_facebook" title="شارك في فيسبوك"><div>شارك في فيسبوك</div></a>
    <a class="addthis_button_twitter" title="شارك في تويتر"><div>شارك في تويتر</div></a>
    <a class="addthis_button_email" title="أرسل الصفحة بالإيميل"><div>أرسل الصفحة بالإيميل</div></a>
    <a class="addthis_button_compact" title="أضغط هنا لمشاهدة المزيد من خدمات المشاركة"><div>المزيد من الخدمات</div></a>
</div>

使用Javascript：

// Return jQuery-obj of the share links
var shareLinks = $('#share-widget').find('a').css('opacity', 0.8);

//////////////////////////////////////////
// Only jQuery way
//////////////////////////////////////////

shareLinks.hover( 
    function () {
        $(this).clearQueue()
            .siblings()
                .stop(true,false).fadeTo('fast', 0.3)
            .end()
                .stop(true, true).fadeTo('normal', 1);
    },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
})


//////////////////////////////////////////
// jQuery + Array cache way
////////////////////////////////////////// 

// Cache the array
var linksArr = [];

$.each( shareLinks, function (i) {

    linksArr.push( $(this) );

    linksArr[i].hover( function () {
        linksArr[i].clearQueue()
                    .siblings()
                        .stop(true,false).fadeTo('fast', 0.3)
                    .end()
                        .stop(true, true).fadeTo('normal', 1);
     },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
    })
});

我只是想知道数组缓存对象是否会提高性能，或者只是没有必要。如果有人有更好的想法来实现这个效果，我全都耳朵^^。

Answer 1

在这种情况下，没有必要。理解imo甚至更慢也更难。在您的代码中：

shareLinks.hover( 
    function () {
        $(this).clearQueue()
            .siblings()
                .stop(true,false).fadeTo('fast', 0.3)
            .end()
                .stop(true, true).fadeTo('normal', 1);
    },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
});

您只访问$(this)一次，为什么要缓存它？ Afaik，$(this)无论如何都很便宜，因为它不会在DOM中进行搜索。

如果您多次评估相同的选择器（例如在循环中），那将是有利的：

for(...) { 
   $('#share-widget div ul li > a').something(i);
}

最好写成

var $elements = $('#share-widget div ul li > a');
for(...) { 
   $elements.something(i);
}

<强>更新

关于调用$(this)会发生什么情况，这是代码中的相应部分：

// Handle $(DOMElement)
if ( selector.nodeType ) {
    this.context = this[0] = selector;
    this.length = 1;
     return this;
}

这是almost the at the top of the function。所以它真的没什么用。

Answer 2

我看到的唯一caching就是当你使用这一行时

var shareLinks = $('#share-widget').find('a').css('opacity', 0.8);

也许可以通过组合（但我怀疑它，它是一个单一的选择器，以及在这里不用担心这么多）来加快速度。

var shareLinks = $('#share-widget a').css('opacity', 0.8);

我看到的其他所有内容都不是真正的缓存。我会把我的0.05美元投入，并告诉你首先让它可读，因为可读代码是可维护的代码。其他一切都是为了你的自我。

Answer 3

提高性能的一种方法是使用JQuery的.delegate()函数，特别是如果你有很多链接：

$('#share-widget').delegate('a', 'mouseenter', function() {
    $(this).clearQueue()
        .siblings()
            .stop(true,false)
            .fadeTo('fast', 0.3)
        .end()
            .stop(true, true)
            .fadeTo('normal', 1);
});
$('#share-widget').delegate('a', 'mouseleave', function() {
    shareLinks.delay(100)
        .fadeTo('normal', 0.8);
});

在数组中缓存jQuery对象是否可以提高速度？

效果演示

HTML：

使用Javascript：

3 个答案: