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

Posted 2023-02-22

【中文标题】jQuery美元符号（$）作为函数参数？

【英文标题】：jQuery dollar sign ($) as function argument?

【发布时间】：2011-06-26 08:54:33

【问题描述】：

我了解 javascript 闭包，并且我已经在原生 JS 中看到过这种情况：

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

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

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

【问题讨论】：

在这种情况下 $ 可以是任何它将成为此函数内的 jquery 对象 $function(y))(jQuery);

【参考方案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

【讨论】：

但是，$ 默认不是jQuery 的别名吗？

@MattDiPasquale：这就是我在回答中所说的，它是(function($) // all JS code here )(jQuery); 的别名......

Firebug 控制台不会以这种方式提供详细的错误消息。我只是得到“没有定义恋人”。

(function() alert("o"); )() 可以，但 function() alert("o"); () 不在 Chrome/Firefox 的控制台中，所以我认为这不是应该坚持的约定（如您的回答中所述），这是必须的吗？跨度>

【参考方案2】：

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

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

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

【讨论】：

请注意，您可以通过这种方式映射任何参数，而不仅仅是 jQuery 到 $，这对于防止在 IIFE 函数范围之外提升变量非常有用。

【参考方案3】：

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

到目前为止，最重要的一点是它使您的代码可以在使用 jQuery's "no conflict" mode 的页面上运行，这允许将 jQuery 与其他想要控制 $ 全局的库一起使用。因此，在编写 jQuery 插件时，强烈推荐使用(function($) ... )(jQuery) 技术。

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

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

【参考方案4】：

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

【讨论】：

IIFE 是更常见的自执行函数的白话。