Javascript 自调用函数jQuery

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

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

---

在函数范围中，

$

是一个局部变量，它不会与任何其他全局

$

冲突，以避免使用

$

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

在该函数内部，您可以使用

$

，而不必担心它在函数外部的使用，因为在该函数内部，

$

始终引用

jQuery

对象

这在创建jQuery插件时非常有用，您将看到jQuery插件使用这种功能来避免与其他插件冲突

---

参考

：

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

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

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

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

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

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

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

---

在本例中，

undefined

仅用于可读性，以指示不再向函数传递任何参数。

您不需要使用

$

全局变量来表示

jQuery

，这方面有大量重复项和资源。函数创建变量范围。您的函数现在有一个作用域

$

。就是这样……但是如果您的代码放在

.ready（）

处理程序中，这是不必要的，因为您只需执行

jQuery（document）.ready（函数（$）{…}）

或较短的

jQuery（函数（$）{…}）