javascript - 做什么（function（$）{}）（jQuery）; 意思？(What does (function($) {})(jQuery); mean?)

Question

I am just starting out with writing jQuery plugins.

(我只是开始编写jQuery插件。)

I wrote three small plugins but I have been simply copying the line into all my plugins without actually knowing what it means.

(我写了三个小插件，但是我只是简单地将该行复制到我所有的插件中，而实际上并不知道这意味着什么。)

Can someone tell me a little more about these?

(有人可以告诉我更多有关这些的信息吗？)

Perhaps an explanation will come in handy someday when writing a framework :)

(也许有一天写一个框架时会有用的解释:))

What does this do?

(这是做什么的？)

(I know it extends jQuery somehow but is there anything else interesting to know about this)

(（我知道它以某种方式扩展了jQuery，但对此还有其他有趣的信息）)

(function($) {

})(jQuery);

What is the difference between the following two ways of writing a plugin:

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

Type 1:

(类型1：)

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Type 2:

(类型2：)

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Type 3:

(类型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);

I could be way off here and maybe all mean the same thing.

(我可能离这里很远，也许所有的意思都一样。)

I am confused.

(我很困惑。)

In some cases, this doesn't seem to be working in a plugin that I was writing using Type 1. So far, Type 3 seems the most elegant to me but I'd like to know about the others as well.

(在某些情况下， 这似乎不适用于我使用Type 1编写的插件。到目前为止，Type 3对我来说似乎是最优雅的，但我也想了解其他类型。)

  ask by Legend translate from so

Answer 1

Firstly, a code block that looks like (function(){})() is merely a function that is executed in place.

(首先，看起来像(function(){})()的代码块仅仅是就地执行的功能。)

Let's break it down a little.

(让我们分解一下。)

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

Line 2 is a plain function, wrapped in parenthesis to tell the runtime to return the function to the parent scope, once it's returned the function is executed using line 4, maybe reading through these steps will help

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

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

You can see that 1 is the declaration, 2 is returning the function and 3 is just executing the function.

(您可以看到1是声明，2是返回函数，3只是执行函数。)

An example of how it would be used.

(有关如何使用它的示例。)

(function(doc){

   doc.location = '/';

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

As for the other questions about the plugins:

(至于关于插件的其他问题：)

Type 1: This is not a actually a plugin, it's an object passed as a function, as plugins tend to be functions.

(类型1：这实际上不是插件，而是作为函数传递的对象，因为插件往往是函数。)

Type 2: This is again not a plugin as it does not extend the $.fn object.

(类型2：再次不是插件，因为它没有扩展$.fn对象。)

It's just an extenstion of the jQuery core, although the outcome is the same.

(尽管结果是相同的，但这只是jQuery核心的扩展。)

This is if you want to add traversing functions such as toArray and so on.

(这是如果要添加遍历函数，例如toArray等。)

Type 3: This is the best method to add a plugin, the extended prototype of jQuery takes an object holding your plugin name and function and adds it to the plugin library for you.

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