(function($) {})(jQuery); 是什么意思？意思是？

Question

我刚刚开始编写 jQuery 插件。我编写了三个小插件，但我只是将这行代码复制到我的所有插件中，而实际上并不知道它的含义。有人可以告诉我更多关于这些的信息吗？也许有一天在编写框架时解释会派上用场:)

这是做什么的？ （我知道它以某种方式扩展了 jQuery，但是还有什么其他有趣的事情需要了解吗）

(function($) {

})(jQuery);

以下两种编写插件的方法有什么区别：

类型 1：

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

类型 2：

(function($) {
    $.jPluginName = {

        }
})(jQuery);

<强>类型3：

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

我可能离这里很远，也许都意味着同样的事情。我很困惑。在某些情况下，这似乎不适用于我使用类型 1 编写的插件。到目前为止，类型 3 对我来说似乎是最优雅的，但我想了解一下其他人也是如此。

Answer 1

首先，看起来像 (function(){})() 的代码块仅仅是一个就地执行的函数。让我们把它分解一下。

1. (
2.    function(){}
3. )
4. ()

第 2 行是一个普通函数，用括号括起来，告诉运行时将函数返回到父作用域，返回后，函数将使用第 4 行执行，也许阅读这些步骤会有所帮助，

1. function(){ .. }
2. (1)
3. 2()

您可以看到 1 是声明， 2 正在返回该函数，3 正在执行该函数。

一个如何使用它的例子。

(function(doc){

   doc.location = '/';

})(document);//This is passed into the function above

至于有关插件的其他问题：

类型 1：这实际上并不是一个插件，它是一个作为函数传递的对象，因为插件往往是函数。

类型 2：这又不是插件，因为它不扩展 $.fn 对象。它只是 jQuery 核心的扩展，尽管结果是相同的。这是如果要添加toArray等遍历函数的话。

类型3：这是添加插件的最佳方法，jQuery 的扩展原型采用一个包含您的插件名称和功能的对象，并将其添加到您的插件库中。

Answer 2

在最基本的层面上，(function(){...})() 形式的内容是立即执行的函数文字。这意味着您已经定义了一个函数并立即调用它。

这种形式对于信息隐藏和封装很有用，因为您在该函数内定义的任何内容对于该函数来说仍然是本地的，并且无法从外部世界访问（除非您专门公开它 - 通常通过返回的对象文字）。

这种基本形式的一个变体是您在 jQuery 插件（或一般的模块模式）中看到的。因此：

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

这意味着您正在传递对实际 jQuery 对象的引用，但它在函数文字的范围内称为 $ 。

Type 1 并不是真正的插件。您只需将对象文字分配给 jQuery.fn 即可。通常，您将一个函数分配给 jQuery.fn，因为插件通常只是函数。

类型2与类型1类似；你并没有真正在这里创建一个插件。您只需将对象文字添加到 jQuery.fn 即可。

Type 3 是一个插件，但它不是创建插件的最佳或最简单的方法。

要了解更多相关信息，请查看类似的问题和< href="https://stackoverflow.com/questions/2421911/javascript-file-as-an-anonymous-function/2421949#2421949">答案。另外，此页面详细介绍了创作插件。

Answer 3

一点帮助：

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

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

Answer 4

只是对解释的一点补充

这个结构 (function() {})(); 称为 IIFE（立即调用函数表达式），当解释器到达这一行时，它将立即执行。因此，当您编写这些行时：

(function($) {
  // do something
})(jQuery);

这意味着解释器将立即调用该函数，并将 jQuery 作为参数传递，该参数将在函数内部用作 $代码>.

Answer 5

实际上，这个例子帮助我理解了 (function($) {})(jQuery); 的含义。

考虑一下：

// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4

现在考虑一下：

• jQuery 是一个保存 jQuery 对象的变量。
• $ 是一个变量
  名称与其他任何名称（a、$b、a$b 等）一样，并且没有任何
  像 PHP 中的特殊含义。

知道我们可以再看一下我们的例子：

var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4

// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

Answer 6

类型 3，为了工作必须看起来像这样：

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin's name
        'pluginname': function(_options) {
            // Put defaults inline, no need for another variable...
            var options =  $.extend({
                'defaults': "go here..."
            }, _options);

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

我不确定为什么有人会使用扩展而不是直接在 jQuery 原型中设置属性，它只是在更多操作和更多混乱中做同样的事情。