jQuery緩存選擇器最佳實踐

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中最初的任何元素