Question

为以下示例缓存jquery对象的最佳做法是什么。有没有更好的方法呢？

1）

var content='<div id="content">'+
            '<div id="div1"></div>'+
            '<div id="div2"></div>'+
            '<div id="div3"></div>'+
            '</div>';
$('body').append(content);
var $div1=$('#div1'),
    $div2=$('#div2'),
    $div3=$('#div3');

2）

var div1='<div id="div1"></div>',
    div2='<div id="div2"></div>',
    div3='<div id="div3"></div>',
    content='<div id="content">'+div1+div2+div3+'div>';  
$('body').append(content);
var $div1=$(div1),
    $div2=$(div2),
    $div3=$(div3);

Answer 1

3）第三个选择：

var $div1 = $('<div id="div1"></div>'),
    $div2 = $('<div id="div2"></div>'),
    $div3 = $('<div id="div3"></div>'),
    $content = $('<div id="content">').append(div1, div2, div3).appendTo("body");

作为奖励提示：如果您正在做一些可能是专用功能的事情，您可能不必缓存div并可以避免更多内存。例如：

$content.on('click', 'div', function(){
    // you clicked on some div even if the listener is on the $content
    // 
})

Answer 2

在这种情况下，您不会注意到缓存选择器或元素集合会带来任何性能优势，因为通过id选择元素已经非常快了。

第二种情况当然不是缓存，所以它甚至不能与第一种情况相媲美。

Answer 3

首先是正确的方法。

第二种方法无论如何都行不通，即使它确实只允许你缓存最初在JS中创建的元素，而不是最初在DOM中的任何东西

jquery缓存选择器的最佳实践

3 个答案: