(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似乎不适用于我使用类型1编写的插件。到目前为止，类型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 是一个插件，但它不是创建插件的最佳或最简单的方法。

要了解更多相关信息，请查看类似的问题和答案。另外，此页面介绍了有关编写插件的一些详细信息。

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

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