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

Writing JavaScript Functions - Should I Pass jQuery Objects as arguments?

本文关键字：参数传递 对象 jQuery 函数 JavaScript 我应该 编写      更新时间：2023-09-26

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

在参数中使用 jQuery 对象：

function updateSelectOptions(optionsData, $selectElement) {
    // function code
}

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

function updateSelectOptions(optionsData, selectorString) {
    var $selectElement = $(selectorString);
    // function code
}

你应该接受jQuery构造函数可以接受的任何内容，以获得最大的灵活性。

重新包装 jQuery 集合不会爆炸，所以我经常使用类似的东西......

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

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

如果你发现自己想要编写一个将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)包裹它。除非你的函数是返回一些值的东西，否则最好返回传入的任何内容，这样你就可以在虚线链的中间使用自己的插件。

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

为什么？

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

var $selectElement = $(selectorString);

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

其中，如果传递缓存的对象，则只会选择和搜索此元素一次。

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

相关文章：