Troubles with (function(){})()

Troubles with (function(){})()

本文关键字：function with Troubles      更新时间：2023-09-26

到目前为止，我已经了解了使用此函数的好处（它是包装吗？

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

( 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
})();

我对这种方法有几个问题

我尝试过：

  1. 使用必应进行教程（我找到了它们，但其中许多都没有回答我的问题）
  2. 玩将物体传递到身体
  3. 在这里找到答案

但是，我仍然用头撞墙

所以问题是：

我见过人们将对象作为参数传递，但是什么时候有意义？例如，这是什么意思？

  1. ( function(window) {

})(document);

  2. 我在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
});

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

我见过人们将对象作为参数传递，但是什么时候有意义？例如，这是什么意思？

( function(window) {
 })(document);

该语言不会将立即调用的函数的参数与其他函数的参数区别对待。

每当您希望在函数体中使用输入的本地名称时，使用参数是有意义的。 在这种情况下，这有点令人困惑，因为window和document可能会混淆。

<小时 /> 
( function($) {
     //some code of widget goes here
})(Jquery);

这使得内部代码在函数外部可见，对吧？（不确定）为什么，这是因为我们可以访问对象（假设我们有"模态"小部件），只需调用它，

不。 它本身不会使任何代码在小部件之外可见。 它只是一个参数定义，为全局变量提供新的本地名称。

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

$.exportedProperty = localVariable;

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

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

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

欲了解更多信息，请查看这些精彩视频

  1. http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/
  2. http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/

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

(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 准备就绪

这种模式称为闭包。 当模块或函数执行以下操作时，使用是有意义的：

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

有关每个示例，首先采用以下模式：

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

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

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

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

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

每当将参数传递给该包装函数时，您就不会弄乱应用程序中可能存在的任何其他库或全局变量。

例如，您可能知道 jQuery 使用 $ 作为调用自身的符号，您可能还有另一个库，它也将使用 $ 来调用它，在这种情况下，您可能在引用库时遇到问题。 所以你会像这样解决它：

(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或任何其他类型的库插件时，这特别有用。

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

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

相关文章：