Question

将DOM对象存储为变量时，这是该变量的最佳实践用法：

＆＃13;

// Option 1

var myElement1 = $(".container").find('ul li:eq(1)');
$(myElement1).css('background', 'red');


// Option 2

var myElement2 = $(".container").find('ul li:eq(2)');
myElement2.css('background', 'blue');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
   </ul>
 </div>

＆＃13;

看起来我已经两种方式都看过了，正如你所看到的，他们都做到了。选项1对我来说似乎有点多余，但我只想在将选项2提交给我的个人风格之前进行检查。

Answer 1

第二种选择是完全有效和良好的做法，但第一种选择毫无意义。您正在尝试jQueryify一个已经jQueryified的对象。它基本上类似于$($("body"))。

另请注意，最好将$添加到包含jQuery对象的变量中。您的代码应如下所示：

var $myElement2 = $(".container").find('ul li:eq(2)');
$myElement2.css('background', 'blue');

正如@Terry所写，最优化的方式是：

var $c = $(".container ul li");
var $second = $c.eq(2);

Answer 2

你是对的，第一种情况是多余的，实际上需要更长时间才能执行（虽然不是很多）

您可以在此处的代码段中看到此内容：

var s = window.performance.now();

var myElement1 = $(".container").find('ul li:eq(1)');
$(myElement1).css('background', 'red');

var e = window.performance.now();
console.log(e - s);

s = window.performance.now();

var myElement2 = $(".container").find('ul li:eq(2)');
myElement2.css('background', 'blue');

e = window.performance.now();
console.log(e - s);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

它给了我大约2到3毫秒的速度差异。

我坚持第二种选择，因为它更清洁，更快。

jQuery选择器重用最佳实践

2 个答案: