Question

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

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

但是，添加jQuery spice会做什么？

(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 Self-executing Functions

Answer 2

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

也许你有一个现有的脚本使用你想要重用的jQuery，但你也使用在同一页面中也使用$的原型。

通过在该构造中使用代码包装任何jQuery，您可以为包含的部分重新定义$ to 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。 / p>

Answer 4

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

到目前为止，最重要的一点是它使您的代码在使用jQuery's "no conflict" mode的页面上工作，这允许使用jQuery以及希望控制$全局的其他库。出于这个原因，在编写jQuery插件时，建议使用{strong>强 <{1}}技术。

次要原因是它使(function($) { ... })(jQuery)成为自执行函数范围内的局部变量，局部变量访问（略微）快于全局变量访问。就个人而言，我不认为这是一个非常令人信服的理由 - 我无法想象使用jQuery而不是DOM方法的开销是可以接受的，但是访问jQuery作为全局变量的情况不会。： - ）

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

jQuery美元符号（$）作为函数参数？

4 个答案: