编写 JavaScript 函数 - 我应该将 jQuery 对象作为参数传递吗？答案

【问题标题】：Writing JavaScript Functions - Should I Pass jQuery Objects as arguments?编写 JavaScript 函数 - 我应该将 jQuery 对象作为参数传递吗？
【发布时间】：2014-12-03 08:57:59
【问题描述】：

从性能和“最佳做法”的角度来看，我都很好奇。我在我的 JavaScript 中使用了很多 jQuery，并且经常发现自己将 jQuery 对象作为参数传递给我正在编写的函数。传递选择器字符串而不是实际的 jQuery 对象作为参数是否更有效/更有效？这只是风格上的差异，还是有充分的理由使用一种方法而不是另一种方法？

在参数中使用 jQuery 对象：

function updateSelectOptions(optionsData, $selectElement) {

    // function code

}

或者使用选择器字符串作为参数：

function updateSelectOptions(optionsData, selectorString) {

    var $selectElement = $(selectorString);
    // function code

}

【问题讨论】：

据我所知，jQuery 不会缓存选择器结果，所以我建议不要这样做。它也不提供灵活性来允许您传递尚未添加到 DOM 的元素。
Javascript 通过引用传递对象（不是真的，通过共享调用，但足够接近）。传递引用意味着我不必像传递选择器那样重新输入 jquery 来定位元素并构建对象。第一个会快得多。

标签： javascript jquery

【解决方案1】：

您应该接受 jQuery 构造函数所能提供的任何东西以获得最大的灵活性。

重新包装一个 jQuery 集合不会崩溃，所以我经常使用类似...

var fn = function(elems) {
    var $elems = $(elems);
};

这样，您可以接受 jQuery 集合、选择器字符串或对原生 DOM 元素的引用。

【讨论】：

在最大化灵活性的同时，如果你将一个 jQuery 对象传递给这个函数，看起来这实际上会创建一个克隆：api.jquery.com/jquery/#cloning-jquery-objects（会导致一些性能损失）
@JoshKG 也许，但如果您发现它是您的应用程序的瓶颈，我会感到惊讶。

【解决方案2】：

如果您发现自己想要编写一个将 jQuery 对象作为参数的函数，为什么不将您的函数设为 jQuery 插件呢？这很简单，而且它使函数的使用适合你的 jQuery 代码的其余部分。

而不是

function something(jq) {
   jq.css("color", "red");
});

你会写

$.fn.something = function something() {
  this.each(function() {
    $(this).css("color", "red");
  });
  return this;
};

现在当你想把东西变成红色时，你可以说

$(".whatever").something();

jQuery 插件中this 的值是沿链传递的jQuery 对象。您不必用$(this) 包装它。除非您的函数返回一些值，否则最好返回传入的任何内容，以便您可以在点链中间使用自己的插件。

【讨论】：

【解决方案3】：

在我看来，传递对象很好，对性能会更好。

为什么？

大多数时候，使用函数的原因是为了重用代码。因此，如果您传递字符串（选择器），例如 updateSelectOptions(optionsData, selectorString) 每次调用函数然后使用该字符串选择元素时：

var $selectElement = $(selectorString);

这会消耗更多内存，因为每次函数调用都必须搜索元素。

如果你传递缓存对象，这个元素只会被选择和搜索一次。

【讨论】：

【解决方案4】：

第二种方法在函数完成执行后删除对对象的任何引用。第一个允许您保留对对象的引用以在函数范围之外对其进行操作。

【讨论】：