Question

到目前为止，我已经了解了使用此功能的好处（是包装吗？）

因此，它几乎就像命名空间一样。假设我们有：

( function() {

    function foo(){
        alert(true);
    }

    foo(); //alerts true

})();


( function() {

    function foo(){ //the same title of the function as above
        alert("another call of foo");
    }

    foo(); //alerts, ok.

})();

我也注意到它可以访问公共变量，如下所示：

var __foo__ = 'bar';

( function() {

    alert(__foo__); //alerts bar

})();

关于这种方法我有几个问题

我尝试了什么：

使用Bing进行教程（我找到了它们，但很多都没有回答我的问题）
将物体传递到身体中
在这里找到答案

但是，我仍然在靠墙撞击

所以问题是：

我看到人们将对象作为params传递，但什么时候有意义呢？例如，它是什么意思？

```
( function(window) {


})(document);
```

我在Jquery UI Lib中看到了这样的smth

( function($) {
    //some code of widget goes here
})(Jquery);

这使得内部代码在函数外部可见，对吧？（不确定）为什么，这是因为我们可以通过调用它来访问对象（比如我们有“模态”小部件），

像：

$(function(){

    $("#some_div").modal(); //here it's object the we got from the function
});

第二个问题是：它是如何运作的。

Answer 1

我看到人们将对象作为params传递，但什么时候有意义呢？例如，它是什么意思？
( function(window) {
 })(document);

该语言不会将参数设置为与其他函数的参数不同地立即调用函数。

只要您希望函数体中的本地名称用于输入，就可以使用参数。在这种情况下，由于window和document可能会混淆，因此有点混乱。

( function($) {
     //some code of widget goes here
})(Jquery);
这使得内部代码在函数外部可见，对吧？（不确定）为什么，这是因为我们可以通过调用它来访问对象（比如我们有“模态”小部件），

没有。它本身不会在窗口小部件外部显示任何代码。它只是一个参数定义，它为全局变量提供了一个新的和本地名称。

使内部代码在外部可见的原因是将其附加到外部对象，如

$.exportedProperty = localVariable;

这是jQuery代码中的常见约定。

Answer 2

关于你的第一个问题，我不认为你看过窗口和文档，但更像是：

(function(doc) {
    var fubar = doc.getElementById("fubar"); // === document.getElementById("fubar")
})(document);

你有一个带有任何函数的参数的自调用函数（或闭包）：

var b = function(str) { alert(str); }
b('hi there') //alert('hi there');

与上面的代码相同，但我们只是在创建它时立即调用该方法。

您拥有的其他代码：

( function($) {
    //some code of widget goes here
})(Jquery);

是在metod中保留$变量来引用jQuery对象，如果你有更多框架或用其他东西替换$对象，这个方法里面的所有内容都非常方便$将引用jQuery对象，而不是其他任何东西（如果你不在代码中替换它）。

代码：

$(function(){
    $("#some_div").modal(); //here it's object the we got from the function
});

正在调用jQuery及其$(document).ready

的快捷方式

它会调用方法：

function(){
    $("#some_div").modal(); //here it's object the we got from the function
}

一旦DOM准备就绪

Answer 3

该模式称为闭包。在模块或函数时使用是有意义的：

希望避免污染全局范围的变量
希望避免使用全局范围的变量并避免其他代码污染它们

对于每个例子，首先采用这种模式：

(function(window) {
    // ...
})(window);

闭包内的所有内容都可以使用 window ，就像它是一个局部变量一样。

接下来，使用JQuery符号采用相同的模式：

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

如果你有一些代码依赖于像$这样的符号/命名空间，但另一个模块重新分配它，它可能会搞砸你的代码。使用此模式可以通过允许您将符号注入闭包来避免这种情况。

Answer 4

每当你向一个包装函数传递一个参数时，你就不会搞乱你的应用程序中可能存在的任何其他库或全局变量。

例如，您可能知道jQuery使用$作为调用自身的符号，并且您可能还有另一个库，它也会使用$来调用itselt，在这种情况下您可能有无法引用您的库。所以你会这样解决它：

(function($){
// here you're accessing jQuery's functions
$('#anything').css('color','red');
})(jQuery);

(function($){
    // and in here you would be accessing the other library
    $.('#anything').method();
})(otherLibrary);

当您制作jQuery或任何其他类型的库插件时，这非常有用。

Answer 5

它的功能是允许您使用函数内的$变量代替jQuery变量，即使$变量被定义为函数外的其他变量。

例如，如果你同时使用jQuery和Prototype，你可以使用jQuery.noConflict()来确保Prototype的$仍然可以在全局命名空间中访问，但是在里面您自己的函数可以使用$来引用jQuery。

Answer 6

主要有2个传递窗口和文档对象的目的，如下所示

(function(window, document){
   // code
}(window, document);

Javascript可以比全局变量更快地访问局部变量。这种模式实际上使名称window和document局部变量而不是全局变量，从而使您的脚本稍微快一点。
使这些名称成为局部变量还有另一个好处：缩小器可以重命名它们。因此，如果您缩小上述脚本，则window的本地版本可能会重命名为a，而document可能会重命名为b，从而使缩小的脚本更小。如果您将它们作为全局变量引用，则这些重命名是不可能的，因为这会破坏您的脚本。

有关详细信息，请查看这些精彩视频

麻烦（function（）{}）（）

6 个答案: