javascript - 将 javascript 变量转换为 jQuery 对象的成本是多少？

Question

有时我在 Javascript 函数中看到，如果重复使用变量到 jQuery 的转换，那么可以先将其分配给局部变量:

$variable = $(variable);

这是否有必要，转换成本是多少？

Answer 1

无论如何，存储对象比每次你想在其上使用 jQuery 方法时都必须重新实例化一个 jQuery 对象要快......即使它对于缓存 $(this) 或 $(anObject)。

用于描述这种“现在存储，以后使用”方法的术语是“缓存”。它通常被称为“缓存”的原因是因为缓存是指存储对某物的引用一次并使用它，而不会在以后返回再次获取相同的东西(非常非技术性，非 100% 准确的描述)。

重点是处理选择器。 jQuery 每次都必须查询 DOM，这是昂贵的部分。与 DOM 操作(以及 jQuery 首先处理您的选择)相比，生成对象和存储引用并不昂贵。

如果你只是简单地从一个对象引用中创建一个 jQuery 对象，它几乎没有那么具有破坏性，因为发生的处理是 jQuery 对象的创建......所以它实际上仅限于 jQuery 为此所做的任何事情.这仍然是一个很好的做法，并且仍然可以防止一些不必要的处理。例如，这个:

var element = document.getElementById("div_id");
$(element).someMethod();
// Later:
$(element).someOtherMethod();

有点低效，因为每次都会创建一个新的 jQuery 对象。它可以很容易地压缩为在变量中存储对单个 jQuery 对象的引用，并引用它。

我能想到的一个警告是，它不是事件 元素列表(如果选择 DOM 元素)。例如，您可能希望缓存所有具有 testing-class 类的元素，如下所示:

var myelements = $(".testing-class");

但是如果用testing-class类将另一个元素添加到DOM中，myelements将不会被反射(reflect)。它将具有相同的先前列表。所以在那种情况下，DOM 显然需要重新查询并更新 myelements。

对我来说，缓存的最佳实践是在一个范围内……而不是整个页面。如果你正在运行一个函数，它选择了一些元素，在开始时缓存它，然后使用它。但是不要全局缓存它并在整个页面中使用它；将其缓存一个执行周期。

例如，我会这样做:

function someFunc() {
    var elements = $(".class-stuff");
    // Use `elements` here

    // code

    // Use `elements` here
    someOtherFunc(elements);
}

function someOtherFunc(el) {
    // Use `el` here
}

someFunc();

// Some time later:
someFunc();

但我不会这样做:

var elements = $(".class-stuff");

function someFunc() {
    // Use `elements`
}

function someOtherFunc() {
    // Use `elements`
}

someFunc();
someOtherFunc();

// Some time later
someOtherFunc();