我应该传递 jQuery 或 DOM 对象作为参数吗？ （性能问题）

Question

哪个性能更好。

foo(this);

function foo(element) {

    $(element).index();

}

或者我应该

foo($(this));

function foo($element) {

    $element.index();

}

显然考虑到我将在函数内多次使用该参数。

谢谢！ 康纳

Answer 1

如果您无论如何都要包装对象，则将对象包装在 jQuery 上的位置并不重要。

唯一重要的是您缓存包装结果并且不要包装两次。

就此而言，以下规则适用于许多插件的代码：

1) jQuery 变量均以 $ 为前缀： var $this = $(this)

2) 切勿将 $ 前缀的 var 包装在 $ 中

3)始终缓存（保存到 var）任何多次使用的 jQuery 包装表达式

4) 如果相同的包装对象（例如 var $items = $('ul li');）出现多次几个类似的函数，将其移至外部作用域并依赖闭包。

Answer 2

如果您正在编写一个将一个 jQuery 对象作为参数的函数，那么您确实应该考虑将其编写为 jQuery 插件。

jQuery.fn.yourFunction = function(otherArg1, otherArg2, ...) {
  // ...
};

而不是编写

yourFunction($(whatever));

然后，您可以

$(whatever).yourFunction().someOtherJQueryFunction();

在函数内部编写， ，this 值将是 jQuery 对象本身。大多数常见的 DOM 相关函数使用的模式是：

jQuery.fn.yourFunction = function(otherArg1, otherArg2, ...) {
  return this.each(function() {
    var $element = $(this);
    // do stuff ...
  });
};

请注意，在函数的外层， this 没有包装为 $(this) 因为它已经被保证了成为一个 jQuery 对象。在“each()”函数或其他类似函数的主体中，情况并非如此。

Answer 3

如果您只想将单个元素传递给函数，那么这并不重要。我会根据调用时可能已经掌握的参数来设计函数参数。如果我在调用时从未在 jQuery 对象中拥有它，那么我只需传递一个 DOM 元素并让函数将其放入 jQuery 对象（如果需要）。如果我总是已经在 jQuery 对象中拥有它，那么传递我已经拥有的该对象而不是额外的 DOM 元素，然后将其放入函数内的另一个 jQuery 对象中，效果会更好。

如果您打算将多个元素传递给函数，那么传递 jQuery 对象可能会更容易，因为它是多个对象的一个​​很好方便的包装器。

正如 Pointy 所说，最优雅的解决方案是让你的函数成为一个插件，然后它会自动接受许多不同的参数，包括选择器、DOM 元素、DOM 元素数组或 jQuery 对象（所有这些都由 jQuery 基础设施为你处理） ）。

如果您只将 DOM 元素变成 jQuery 对象一次，您将获得最佳性能。传递 DOM 或传递 jQuery 对象作为参数将具有相同的性能（两者都传递对对象的引用）。插件的想法实际上会具有稍差的性能，因为它是如此通用并且接受许多不同的参数，因此它必须识别传递的参数类型。与 .index() 方法本身所花费的时间相比，这种性能差异可能并不明显。