什么是 (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);

我可能会离开这里，也许所有的意思都是一样的。我很迷惑。在某些情况下，this 似乎不适用于我使用 Type 1 编写的插件。到目前为止，Type 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 是一个插件，但它不是创建插件的最佳或最简单的方法。

要了解更多信息，请查看类似的question 和answer。此外，this page 详细介绍了创作插件。

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

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