Javascript在匿名函数中包装代码

我需要帮助理解jQuery插件创作的这种模式。有人能给我解释一下这个简单的代码吗

(function($) { /* Code here */ })(jQuery);

---

我知道这是为了避免与使用相同

$

字符的不同插件发生冲突，但不知何故，我无法理解它是如何工作的。参数

$

与解析的

jQuery

对象有什么关系？

javascript中的函数创建一个作用域，它不仅与

$

变量有关，还与函数的局部变量有关。给定

$

参数，它将成为函数的本地参数，并且可以安全地使用，参考

jQuery

这里有这样的缩写：

function anonymous_function($) {
    // Code here
};
anonymous_function(jQuery);

(function() {})(jQuery);

(function($) {
    // you can use $ here to refer to jQuery
})(jQuery);

(function($) { /* do work with $ */ })(jQuery);

如您所见，它允许将

$

符号用作函数内

jQuery

对象的引用。

我们来分析一下：

(function($) { /* Code here */ })(jQuery);

首先，结构：

(function() {})();

创建立即执行的函数表达式（通常称为IIFE）。这是一个立即执行的函数，而不是现在定义的，但稍后调用。它本质上是一个匿名（未命名）函数，定义后立即执行

然后，将jQuery传递给它，如下所示：

function anonymous_function($) {
    // Code here
};
anonymous_function(jQuery);

(function() {})(jQuery);

(function($) {
    // you can use $ here to refer to jQuery
})(jQuery);

(function($) { /* do work with $ */ })(jQuery);

将jQuery作为第一个参数传递给立即执行的函数。然后，将第一个参数命名为

$

将定义函数中的符号，以对应于传递的第一个参数

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

展开形式如下所示：

function anonymous_function($) {
    // Code here
};
anonymous_function(jQuery);

(function() {})(jQuery);

(function($) {
    // you can use $ here to refer to jQuery
})(jQuery);

(function($) { /* do work with $ */ })(jQuery);

---

对于jQuery插件作者来说，这有几个好处：

IIFE创建了一个局部函数上下文，这样您就可以拥有插件的“全局”变量，但实际上不是全局变量，因此不会污染或与实际的全局变量名称空间冲突

您可以为jQuery使用

$

编程，无论宿主程序是否实际为jQuery定义了该程序，因为您已经在函数中本地定义了

$

---

JavaScript中的函数可以。使用函数表达式时，可以像传递任何其他值一样传递它：

> console.log(function() { 1 + 1; });
> (function() {}) && doExpensiveWork();
// etc.

使用函数表达式可以做的一件事是立即调用它。在这种情况下，调用该函数：

这与创建函数并分两步调用函数相同：

> var notAnIIFE = function() { console.log("running"); };
> notAnIIFE();
running

当然，函数表达式可以接受参数：

> var someFunction = function(x, y) { return x + y; };
> var seven = someFunction(3, 4);
> seven
7

因此，也可以使用参数调用：

> var seven = (function(x, y) { return x + y; })(3, 4);
> seven
7

在这种调用的情况下：

function anonymous_function($) {
    // Code here
};
anonymous_function(jQuery);

(function() {})(jQuery);

(function($) {
    // you can use $ here to refer to jQuery
})(jQuery);

(function($) { /* do work with $ */ })(jQuery);

绑定到名称

jQuery

的值将作为参数

$

传递到函数表达式中。这类似于执行以下操作：

var initializePlugin = function($) {
    /* do work with $ */
};
initializePlugin(jQuery);

---

但是它在父名称空间中没有留下任何痕迹（然而，在第二个示例中，在我们完成插件设置后，

initializePlugin

名称被留下）。

+1代表jfriend00的答案

但是在页面中包含jQuery会同时覆盖全局符号jQuery和$（请参阅），这可能会导致与定义全局$的其他库发生冲突

因此，进一步采取这一措施也可以阻止全球美元冲突：

(function($) {
    // you can use $ here to refer to jQuery
})(jQuery.noConflict());

如下所示：

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
(function($) {
   console.log('want $ to be jQuery here so want true: ' + ($ === jQuery));
})(jQuery.noConflict());
console.log('do not want $ to be jQuery here so want false: ' + ($ === jQuery));
</script>

（函数（$）{
log（'want$在这里是jQuery，所以想要true:'+（$==jQuery））；
})（jQuery.noConflict（））；
log（'此处不希望$成为jQuery，因此希望为false:'+（$==jQuery））；

谢谢，伙计。这么简单。我被卡住了，因为我纠结于jquery将包装这个函数，而这个包装函数使用的jquery库中有一个预定义的jquery变量。你解释得很好！这更有道理。这有助于为我澄清jfriend00的答案。谢谢