javascript - 自调用函数 jQuery

Question

我注意到在某些地方，jQuery 代码被包装在一个自调用函数中，如下所示。为什么要这样做，在什么情况下这是有用的，在什么情况下是不必要的样板？

function( $ ) {
  ...
}( jQuery );

Answer 1

简短的回答：防止变量名冲突。它并不总是需要，而是创建无冲突可重用代码的良好实践。

长答案：在 javascript 中，$ 符号只是另一个变量。jQuery 使用它是因为它是一个很好的速记，而不是每次都必须输入 jQuery，但是任何其他代码（包括其他库）也可以。

为了防止与同一范围内的变量的其他用途发生冲突（在本例中为“全局”范围内的 $），通常将代码包装在自调用函数中，并将“无冲突”变量作为函数参数。然后，这会创建一个新范围，您的变量不会干扰该变量的其他用途。这样，您可以传递完整的命名变量并在匿名函数中使用您想要的任何名称。

因此，在创建无冲突的可重用代码时，最好使用以下方法：

(function( $ ) {
  ...
})( jQuery );

沿着这些线，您还将看到以下格式：

(function( $, window, undefined ) {
  ...
})( jQuery, window );

在这种情况下undefined，仅用于提高可读性以指示不再向函数传递参数。

Answer 2

如果您想避免有关使用的冲突$

function( $ ) {
  ...
}( jQuery );

您可以在此函数内部使用$，而不必担心它在函数外部的使用，因为在该函数内部，$始终引用jQuery对象。

这在创建 jQuery 插件时很有帮助，你会看到 jQuery 插件使用这种功能来避免与其他插件的冲突。

参考: http://learn.jquery.com/plugins/basic-plugin-creation/

Answer 3

在函数范围内$是不与任何其他全局变量冲突的局部变量$。