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

我可能会离开这里,也许意味着同样的事情.我很迷惑.在某些情况下,这似乎不适用于我使用Type 1编写的插件.到目前为止,Type 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是一个插件,但它不是创建一个插件的最佳或最简单的方法.

要了解更多相关信息,请查看此类似的问题和答案.此外,此页面还介绍了有关创作插件的一些细节.

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

类型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原型中设置属性,它只在更多的操作和更混乱中做同样的事情.

Answer 6

实际上,这个例子帮助我理解了什么(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