我应该将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）永远不要在$

中包装$ -prefixed 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()方法自身的时间相比，这种性能差异可能并不明显。