jQuery 选择器重用最佳实践答案

【问题标题】：jQuery selector re-use best practicejQuery 选择器重用最佳实践
【发布时间】：2016-01-18 23:54:11
【问题描述】：

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

// 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');

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

似乎我已经看到了这两种方式，正如你所看到的，它们都可以完成工作。选项 1 对我来说似乎有点多余，但我只是想在将选项 2 提交给我的个人风格之前检查一下。

【问题讨论】：

是的，选项一是多余的，因为myElement1 已经是一个 jQuery 对象
两者都不返回 jQuery 对象吗？如果是这样，则将其包裹在额外的括号中也没关系。作为旁注：我总是喜欢在 javascript 中将作为 jQuery 对象的变量标记为 var $myElement1 并带有美元符号，以记住它实际上是一个 jQuery 对象。由于我们正在谈论最佳实践和所有...
我总是存储带有'$'前缀的 jQuery 对象，所以选项 2 带有 $myElement2。它使跟踪变得更容易。
他们使用选项 1 不像您展示的那样，但是当他们在函数内部执行某些操作时，他们希望同时接受 jquery 对象和 htmlelement。没有人像选项 1 那样编写代码，这是没有意义的。

标签： javascript jquery jquery-selectors

【解决方案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);

【讨论】：

【解决方案2】：

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

您可以在此处的 sn-p 中看到这一点：

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 毫秒的速度差异。

我会坚持第二个选项，因为它更干净、更快捷。

【讨论】：