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

我可能会离开这里，也许意味着同样的事情。我很迷惑。在某些情况下，这个似乎没有在我使用Type 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对象的引用，但在函数文字范围内它被称为$。

类型1不是真正的插件。您只是将对象文字指定给jQuery.fn。通常，您将函数分配给jQuery.fn，因为插件通常只是函数。

类型2类似于类型1;你真的不是在这里创建一个插件。您只需将对象文字添加到jQuery.fn。

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

要了解有关此内容的更多信息，请查看类似的question和answer。此外，this page详细介绍了如何创作插件。

Answer 3

只是对解释的补充

此结构(function() {})();称为IIFE（立即调用函数表达式），当解释器到达此行时，它将立即执行。所以当你写这些行时：

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

这意味着，解释器将立即调用此函数，并将jQuery作为参数传递，该参数将在函数内部用作$。

Answer 4

类型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原型中直接设置属性而使用extend，它只在更多操作中做同样的事情而且更加混乱。

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
console.log((function ($) { return $*$; })(jQuery)); // Gives: 4

什么（function（$）{}）（jQuery）;意思？

5 个答案:

只是对解释的补充