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

Question

今天我使用jQuery为share-icons制作了一个效果.效果有点复杂,所以我试着想出一种优化性能的方法.我最终将$(this)对象缓存到数组中.

效果演示

我使用数组缓存对象上传了一个效果的工作示例(将鼠标悬停在图标上以查看效果):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

在这种情况下，没有必要。在我看来，理解起来更加困难，甚至可能更慢。在你的代码中：

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;
}

这几乎是函数的顶部。所以它确实没有做太多事情。