50

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

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

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

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

4 回答 4

55

当你看到：

(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对象。

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

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

于 2011-02-13T08:17:34.420 回答
37

它是一种将 jQuery 映射到 $ 的方式，以便不是页面中的所有代码都能看到它。

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

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

于 2011-02-13T08:21:39.673 回答
17 
(function() {
   // all JS code here
})();

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

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

这是一个 IIFE，它接受参数“aParameter”并将参数“一个参数”传递给自己。

(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。

于 2011-10-16T03:47:23.490 回答
12

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

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

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

我想说的是，在不编写插件时使用这种技术的最佳理由是为了保持一致性——如果你习惯于在不重要的情况下这样做，那么当它很重要时你就不太可能忘记这样做. 此外，你永远不知道什么时候有机会回收代码！

于 2011-02-13T08:51:50.543 回答