Javascript 什么是（函数（$）{}）（jQuery）；什么意思？

我刚刚开始编写jQuery插件。我写了三个小插件，但我只是简单地将这一行复制到我所有的插件中，而实际上并不知道它意味着什么。有人能告诉我更多关于这些吗？也许有一天在编写框架时，一个解释会派上用场：）

这有什么用？（我知道它以某种方式扩展了jQuery，但是关于这一点还有什么有趣的事情要知道吗）

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

类型1:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

类型2:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

类型3:

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

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

(function($) {
    $.jPluginName = {

        }
})(jQuery);

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

---

我可能离这里很远，也许所有人的意思都是一样的。我很困惑。在某些情况下，这个在我使用Type 1编写的插件中似乎不起作用。到目前为止，类型3对我来说似乎是最优雅的，但我也想了解其他类型。

首先，看起来像

（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的扩展原型将获取一个包含插件名称和函数的对象，并将其添加到插件库中。

类型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 over直接在jQuery原型中设置属性，它只在更多操作和更混乱的情况下做同样的事情。

在最基本的层次上，某种形式的

（function（）{…}）（

是一种立即执行的函数文本。这意味着您已经定义了一个函数，并且正在立即调用它

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

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

这意味着您要传入一个对实际

jQuery

对象的引用，但它在函数literal的范围内称为

$

类型1并不是一个真正的插件。您只需将一个对象文本分配给

jQuery.fn

。通常将函数分配给

jQuery.fn

，因为插件通常只是函数

类型2与类型1相似；你不是真的在这里创建插件。您只需将一个对象文本添加到

jQuery.fn

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

要了解更多有关这方面的信息，请查看此类似的和。此外，还将详细介绍如何编写插件。

一点帮助：

//匿名函数
（函数（）{console.log（'allo'）}）；
//一个自调用的匿名函数
（函数（）{console.log（'allo'）}）（）；
//具有名为“$”的参数的自调用匿名函数
var jQuery='我不是jQuery'；
（函数（$）{console.log（$）}）（jQuery）只是解释的一个小补充
这个结构
（function（）{}）（）被调用（立即调用函数表达式），它将在解释器到达此行时立即执行。因此，当您编写这些行时：

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

这意味着解释器将立即调用函数，并将
jQuery
作为参数传递，该参数将作为
$
在函数内部使用。实际上，这个示例帮助我理解了
（函数（$）{}）（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

现在是睡觉时间了，但只是作为初学者，
（函数（$）{}）（jQuery）
包装代码，使
$
位于该闭包内
jQuery
，即使
$
表示闭包外的其他内容，通常是例如的结果。这确保了你的插件可以正常工作，不管你说：“我知道它以某种方式扩展了jQuery[…]”。显然你不知道，因为你的陈述是100%错误的。顺便说一句，它可能会误导未来的读者。看看这个：。jquery-ui-1.7.2.custom.min.js扩展了@NickCraver的注释，例如使用jquery.ui | |（函数（c）{var i=c.fn.remove，d=c.browser.mozilla……。}）（jquery）；。我知道这是一个旧版本的jQueryUI，带有不推荐使用的代码，但关键是要说明在这种情况下，他们是如何使用“c”而不是“$”。我不确定Type3是如何扩展核心的。这是创建插件的一种非常有效的方法，因为您正在扩展原型。虽然有点不必要。我的错-我应该更清楚。我当时很忙，而你