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

IT技术 javascript jquery
2021-02-05 06:01:26

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

6个回答

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

( function(){} ) 表示返回内部函数?“()”到底是什么意思?
2021-03-25 06:01:26
这就是所谓的立即调用函数表达式 (IIFE):benalman.com/news/2010/11/...
2021-04-01 06:01:26
我在理解外括号时遇到了很多问题( function(){} ):这到底是什么?我不能只写function(){}()吗?
2021-04-01 06:01:26
我喜欢第一个例子,但第二个使用行号引用(这不是 js 功能)不清楚。
2021-04-03 06:01:26
如果您阅读原始问题,则 OP 指定了 3 种编写闭包的方法,他将这些方法命名为 {1,2,3} 类型,我很想用答案来指代问题中的区域。
2021-04-07 06:01:26

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

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

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

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

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

类型 1 并不是真正的插件。您只是将对象文字分配给jQuery.fn. 通常你分配一个函数,jQuery.fn因为插件通常只是函数。

类型 2 类似于类型 1;你并没有真正在这里创建插件。您只需将对象文字添加到jQuery.fn.

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

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

我的不好 - 我应该更清楚。我很着急,你是对的。
2021-03-13 06:01:26
我不确定 Type 3 是如何扩展核心的。由于您正在扩展原型,因此它是创建插件的一种完全有效的方式。虽然有点不必要。
2021-03-29 06:01:26

一点帮助:

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

只是解释的小补充

这个结构(function() {})();叫做IIFE(立即调用函数表达式),它会立即执行,当解释器到达这一行时。所以当你写这些行时:

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

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

实际上,这个例子帮助我理解了这(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
对我来说,这是最好的答案。简单明了
2021-04-04 06:01:26