Question

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

$variable = $(variable);

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

Answer 1

无论如何，存储对象比每次想要在其上使用jQuery方法时重新实例化jQuery对象更快......即使它对于缓存$(this)或{{1}的微不足道也是如此}。

用于描述“立即存储，稍后使用”这种方法的术语是“缓存”。它通常被称为“缓存”的原因是因为缓存是指存储对某事物的引用并使用它，而不是后来又重新获取相同的东西（非常非技术性，非100％准确的描述）。 / p>

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

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

$(anObject)

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

我能想到的一个警告是，它不是 live 元素列表（如果选择DOM元素）。例如，您可能希望使用类var element = document.getElementById("div_id"); $(element).someMethod(); // Later: $(element).someOtherMethod();缓存所有元素，如下所示：

testing-class

但如果使用var myelements = $(".testing-class");类将另一个元素添加到DOM，则不会反映testing-class。它将具有相同的先前列表。因此，在这种情况下，显然需要重新查询DOM并更新myelements。

对我来说，缓存的最佳做法是在一个范围内....而不是整个页面。如果您正在运行一个函数，并且它选择了一些元素，请在开头缓存它，然后使用它。但是不要全局缓存它并在整个页面中使用它;将其缓存一段执行周期。

例如，我会这样做：

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();

Answer 2

这取决于变量是什么。如果原始变量只是一个DOM元素，那么特别昂贵 - DOM遍历已经完成，所以你所做的就是将该元素包装在jQuery伪数组中并附加原型

但是如果原始变量是一个选择器，那么你绝对应该缓存结果以避免从DOM重复转换 - ＆gt;元素清单。

无论如何，最好不要重复自己，所以缓存$(variable)只是很好的代码卫生。

Answer 3

如果正在调用$(variable)，那么这个赋值基本上没有成本 - 这只是在内存中存储对象的引用。

纯粹主义者可能会指出，因为现在存储了jQuery对象，所以它不能被垃圾收集，这是真的。所以我想如果你有很多这些可能会导致内存问题，但本身就没有成本可言。

完成原因是因为与创建对象相关的成本，即$(variable)部分。如果多次这样做可能会很昂贵。存储对象的引用意味着只需要创建一个。

另一个要点：以下陈述

var $variable = $(variable);

如果在闭包的调用上下文中完成，

可能会有所不同。也就是说，如果在var语句的范围内定义了一个函数，那么变量将“粘附”以供函数使用。这可以具有与上述相同的效果（没有gc和指针存储器），并且具有更长的寿命。（因为只要函数有可能被调用它就会保留。）

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

3 个答案: