jquery - 在创建 jQuery 插件时，`this` 是否应该始终是回调中的原生 DOM 元素？

Question

我写了一个jQuery 插件，我最近做了它，所以回调可以访问this，这是原始选择器，所以你可以做......

$('#something').waitForImages(function() {
   $(this).fadeIn(500);
});

这看起来很像您在 jQuery API 中所期望的一些代码。

然而，jQuery 总是this以原生 DOM 元素的形式提供，因此您必须将其包装起来$()才能开始在其上调用 jQuery 的方法。

最初，我this作为 jQuery 对象提供。但是后来，在观察了jQuery对的处理之后this，我改变了它。

什么是最好的方法？是否提供包装？

score 6 · Accepted Answer

我想说在这种情况下不要包装，因为这似乎是一个事件处理程序。在事件处理程序中几乎总是（在 jQuery和原始 JS 事件处理程序中）您希望this成为您正在处理的DOM 元素……这是我坚持的约定。

一般来说，尽量遵循最小意外的原则。

如果需要，还可以将包装元素作为参数传递给函数，例如：

$('#something').waitForImages(function(e, jQueryObjectHere) {
   $(this).fadeIn(500);
});

...这样你就不会做一些意想不到的事情，而是在需要时提供好东西。我绝不会说这是必要的，只是方便。以上只是一个选项（实际上是随机的）......尽管如果您将此事件公开为您可以做的事情.bind()，请不要这样做，因为它们可能会绑定其他数据并期望它。

score 2 · Accepted Answer

如果您编写插件，原始 DOM 元素是人们所期望的。您可能会觉得更改它更方便和可读，但它不是标准的，如果您打算将它分发到开源社区，它只会导致 jQuery 对象的混淆和重复。 $(this)当this引用 ta 预先存在的 jQuery 集合时不会出错，但绝对不会有效率。

您的代码将遍历集合并执行任何元素的回调，因此您可以认为每个回调对于集合中的单个元素是唯一的，而不是在整个集合上执行一次。

希望这能解释设计选择的理性和“高级”愿景。它归结为语义和一致性。

score 1 · Accepted Answer

很多时候，当我编写一个 jQuery 插件时，我会立即分配this给一个变量，如下所示：

$.fn.myPlugin = function () {
  var $this = this;
};

主要原因是我可以在重新定义的内部函数中引用原始选择器this，但这里更相关的原因是this它本身看起来像一个未包装的 DOM 元素，所以前面的 $$this帮助我记住它已经包裹。

因此，我认为您确实应该将this其作为 DOM 元素提供，并让用户根据需要将其包装起来$()。

score 0 · Accepted Answer

this指的是由 jQuery 函数返回的选定元素的数组。重新包装元素是非常不必要的。

4 回答 4