什么 (function($) {})(jQuery);意思? [英] What does (function($) {})(jQuery); mean?

问题描述

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

I am just starting out with writing jQuery plugins. 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 :)

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

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

(function($) {

})(jQuery);

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

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

类型 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 对我来说似乎是最优雅的，但我想知道其他人也是如此.

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.

推荐答案

首先，一个看起来像 (function(){})() 的代码块只是一个就地执行的函数.让我们稍微分解一下.

Firstly, a code block that looks like (function(){})() is merely a function that is executed in place. Let's break it down a little.

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

第 2 行是一个普通函数，用括号括起来，告诉运行时将函数返回到父作用域，一旦返回，该函数将使用第 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

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

你可以看到 1 是声明，2 是返回函数，3 只是执行函数.

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

如何使用它的示例.

(function(doc){

   doc.location = '/';

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

关于插件的其他问题:

类型 1:这实际上不是插件，它是作为函数传递的对象，因为插件往往是函数.

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

类型 2:这又不是插件，因为它不扩展 $.fn 对象.它只是 jQuery 核心的扩展，尽管结果是一样的.这是如果你想添加toArray等遍历函数.

Type 2: This is again not a plugin as it does not extend the $.fn object. It's just an extenstion of the jQuery core, although the outcome is the same. This is if you want to add traversing functions such as toArray and so on.

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

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.

这篇关于什么 (function($) {})(jQuery);意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！