4

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

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

( 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. 将 Bing 用于教程（我找到了它们，但其中许多没有回答我的问题）
  2. 将物体传递到身体中
  3. 在这里找到答案

但是，我还在用头撞墙

所以问题是：

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

  1. ( function(window) {


})(document);

  2. 我在 Jquery UI Lib 中看到了这样的东西

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

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

像：

$(function(){

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

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

4

6 回答 6

2

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

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

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

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

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

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

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

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

$.exportedProperty = localVariable;

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

于 2012-08-15T19:07:07.147 回答
1

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

(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 准备好后

于 2012-08-15T19:08:21.000 回答
1

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

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

对于每个示例，首先采用以下模式：

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

闭包内的所有东西都可以像使用局部变量一样使用window 。

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

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

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

于 2012-08-15T19:10:10.470 回答
1

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

例如，您可能知道 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 或任何其他类型的库插件时特别有用。

于 2012-08-15T19:11:04.090 回答
1

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

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

于 2012-08-15T19:11:35.390 回答
1

传入window和document对象主要有2个目的，如下图所示

(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/
于 2012-08-15T19:46:00.997 回答