jQuery 美元符号 ($) 作为函数参数？

Question

我了解 JavaScript 闭包，并且我已经在本机 JS 中看到了这一点：

(function () {
  // all JS code here
})();

但是，添加 jQuery 香料有什么作用呢？

(function ($) {
  // all JS code here
})(jQuery);

Answer 1

当您看到：

(function() {
  // all JS code here
})();

它被称为自调用匿名函数。由于在末尾添加了 () ，该函数一解析就会执行（这就是运行 js 函数的方式）。

请注意，额外的外大括号只是约定，您也可以将其写成：

function() {
  // all JS code here
}();

但是该约定在各处都被大量使用，您应该坚持它。

(function($) {
  // all JS code here
})(jQuery);

这里，$ 映射到 jQuery 对象，以便您可以使用 $ 而不是 jQuery关键字。您也可以在那里放置一些其他字符：

(function(j) {
  // all JS code here
})(jQuery);

这里，j 被映射到 jQuery 对象。

另请注意，指定给自调用函数的参数保留在该函数的范围内，并且不与外部范围/变量冲突。

---

我写了一篇关于这个主题的文章，请查看：

• Javascript 自执行功能

Answer 2

它是一种将 jQuery 映射到 $ 的方法，这样页面中的所有代码都不会看到它。

也许您有一个使用 jQuery 的现有脚本，您希望重用该脚本，但您还使用在同一页面中也使用 $ 的原型。

通过在该构造中使用代码包装任何 jQuery，您可以将 $ 重新定义为包含部分的 jQuery，而不会与页面中的其他代码发生冲突。

Answer 3

(function() {
   // all JS code here
})();

是一个立即调用函数表达式 (IIFE)，发音为“iffy”。有些人也称它们为“匿名、自执行函数”，或者简称为“自执行函数”。

(function(aParameter) {
   alert(aParameter);  // will alert "an argument"
})("an argument");

这是一个 IIFE，它接受参数“aParameter”并向自身传递参数“an argument”。

(function($){
   alert($(window).jquery);  // alert the version of jQuery
})(jQuery);

这个是类似的，但是“jQuery”（jQuery 对象实例）是 IIFE 的参数，在这种情况下，jQuery 作为“$”参数传递。这样，只需输入“$”，IIFE 的主体就可以访问 jQuery 及其成员。这是一个常见的 jQuery 约定，编写 jQuery 插件的人通常会以这种方式维护此约定。

上面的代码不仅维护了 jQuery 约定，还确保您或其他任何人都不会意外地破坏该约定。例如，采用以下代码：

var $ = function() {
   alert('foo');
}

该代码将 '$' 转换为绝对不是 jQuery 的内容。如果有人在您的插件代码之外的其他代码中执行此操作，然后您没有显式地将 jQuery 作为“$”传递给您的插件，那么您将无法像通常那样使用“$”作为 jQuery。

Answer 4

以这种方式将 jQuery 传递到闭包中有两个原因。

到目前为止，最重要的一个是它使您的代码可以在使用 jQuery 的“无冲突”模式<的页面上运行/a>，它允许将 jQuery 与其他想要控制 $ 全局的库一起使用。因此，在编写 jQuery 插件时，强烈推荐使用(function($) { ... })(jQuery) 技术。

第二个原因是它使 $ 成为自执行函数范围内的局部变量，并且局部变量访问（稍微）比全局变量访问快。就我个人而言，我不认为这是一个非常令人信服的理由——我无法想象使用 jQuery 而不是 DOM 方法的开销是可以接受的，但将 jQuery 作为全局变量访问的开销却是不能接受的。 :-)

我想说，在不编写插件时使用此技术的最佳原因是为了保持一致性 - 当是时，你不太可能忘记这样做> 如果你习惯在不这样做的时候这样做，那么这一点很重要。此外，你永远不知道什么时候你会有机会回收代码！