javascript - 什么 (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 的扩展原型(prototype)采用一个包含您的插件名称和功能的对象并将其添加到您的插件库中。