是什么(function($){})(jQuery); 意思?


299

我刚刚开始编写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对我来说似乎是最优雅的,但我也想了解其他类型。


22
午睡时间到了这里,但只是个开始,(function($) { })(jQuery);包装代码,以便$jQuery的是瓶盖内,即使$手段得到它别的外,通常作为结果$.noConflict()的例子。这样可以确保您的插件正常运行,无论是否$ === jQuery :)
Nick Craver

3
关于(function($) { })(jQuery)您的消息说:“我知道它以某种方式扩展了jQuery [...]”。显然您知道,因为您的陈述是100%错误的。顺便说一句,它可能会误导未来的读者。看一下这个:stackoverflow.com/a/32550649/1636522

扩展@NickCraver的注释,jquery-ui-1.7.2.custom.min.js例如使用:jQuery.ui ||(function(c){var i = c.fn.remove,d = c.browser。 mozilla ........})(jQuery);。我知道这是带有弃用代码的jQuery UI的旧版本,但重点是要说明在这种情况下,他们如何使用“ c”而不是“ $”。
Jaime Montoya

Answers:


234

首先,看起来像的代码块(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的扩展原型采用一个对象来保存您的插件名称和功能,并将其添加到您的插件库中。


2
如果你读了原来的问题,在OP指定写关闭的3种方法,他命名这些方法类型{1,2,3},我粉状指的是区域的问题中有一个答案..
RobertPitt

1
(function(){})意味着返回内部函数?“()”到底是什么意思?
Jaskey

我喜欢第一个示例,而第二个示例使用行号引用(这不是js功能)尚不清楚。
Samy Bencherif

1
这就是所谓的立即调用函数表达式(IIFE):benalman.com/news/2010/11/…–
安德烈斯·罗哈斯

1
我在理解以下括号时遇到了很多问题( function(){} ):这到底是什么?我可以不只是写东西function(){}()吗?
TMOTTM

127

在最基本的层次上,某种形式(function(){...})()是立即执行的函数文字。这意味着您已经定义了一个函数并且正在立即调用它。

这种形式对于信息的隐藏和封装很有用,因为您在函数内部定义的任何内容都保留在该函数的本地且无法从外部访问(除非您专门公开了它-通常通过返回的对象文字)。

您在jQuery插件中(或通常在此模块模式中)看到的是这种基本形式的变体。因此:

(function($) {
  ...
})(jQuery);

这意味着您要传递对实际jQuery对象的引用,但这$在函数文字范围内被称为。

类型1并不是真正的插件。您只需将对象文字分配给jQuery.fn。通常,您将功能分配给,jQuery.fn因为插件通常只是功能。

类型2与类型1相似;您并不是在这里真正创建插件。您只是将对象文字添加到jQuery.fn

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

要了解更多关于这一点,看看这个类似的问题答案。另外,此页面还将详细介绍创作插件。


1
我不确定Type 3如何扩展核心。自扩展原型以来,这是创建插件的一种完全有效的方法。尽管有点不必要。
tbranyen 2010年

1
我的坏-我应该更加清楚。我很着急,你是正确的。
Vivin Paliath

32

一点帮助:

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


21

只是解释的一小部分

此结构(function() {})();称为IIFE(立即调用函数表达式),当解释器到达此行时,它将立即执行。因此,当您编写这些行时:

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

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


12

实际上,此示例帮助我理解了(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$ba$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

对我来说,这是最好的答案。清晰而简单
萨利赫

11

类型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原型中设置扩展属性,而只是在更多的操作和更混乱的情况下才做同样的事情。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.