关于javascript：jQuery $(function(){})vs(function(){})($)


jQuery $(function() {}) vs (function () {})($)

本问题已经有最佳答案，请猛点这里访问。

我知道以下是$( document ).ready()的简写：

1
2
3
$(function() {
    console.log("ready!" );
});

我也理解匿名JS函数是什么，但jQuery在使用一个函数调用时会做什么特别的事情。即：

1
2
3
(function() {
    console.log("ready!" );
})($);

后者只是一个使用jQuery的普通匿名JS函数(即它不会被视为$(document).ready()的简写，因此会立即执行)？

我觉得以前必须要问过，但如果有的话，我找不到它。

相关讨论

正如你所提到的，前者确实是$(document).ready()的简写。
至于后者，这只是一个立即调用的函数表达式。

1
2
3
(function ($) {
    console.log('ready');
})(jQuery);

此函数只是一个匿名函数，它接收名为$的参数。使用某个值(在本例中为jQuery)作为参数立即调用该函数。

IIFE还可用于隔离范围并避免包含多个JavaScript文件的Web应用程序中的全局变量。在这种情况下，可以使用无参数IIFE：

1
2
3
4
5
(function () {
    // x is only accessible within this IIFE
    var x;
    // do something...
})();

有关立即调用函数表达式的更多信息，请参阅此问题：javascript中自执行函数的用途是什么？

相关讨论

实际上，第一个是$( document ).ready()的简写，正如此处所指出的那样。

但第二个是立即调用函数表达式(IIFE)，一个声明并立即调用的匿名函数。

实际上，正确的语法(在您的示例中缺少参数)是：

1
2
3
(function($) {
    //my $ object is local now
})(jQuery);

在这种情况下，您将使用参数调用匿名函数。

这种模式(IIFE)的主要优点是：隔离你的代码(你可以创建任意数量的变量，它将被限制在你的匿名函数范围内，除非你返回一些东西)。这种模式用于定义"私有"和"公共"方法。像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var myModule = (function() {

    function privateFunction() { console.log("I can't be accessed from outside :("; }

    var privateVar ="me too :(";

    function publicFunction() { console.log("Hey! I'm here!"; }

    /* expose what you want */
    return {
        publicFunction: publicFunction
    }

})();

myModule.publicFunction(); //Hey! I'm here!
myModule.privateFunction(); //undefined;

你也可以称之为模块模式。

在第二个示例中，您使用参数调用最近创建的匿名函数，并且您的匿名函数接收该参数。这是一种依赖性注射方式。

这样，您可以将函数内的全局变量作为本地操作。请注意，在第一个示例中，我们传递一个jQuery对象并在函数内将其作为$进行操作。有人覆盖jQuery对象比较困难，但是，某些脚本可以重新分配全局美元符号，特别是如果您没有完全控制您的应用程序。这样，你总是传递te jQuery对象并将其作为$进行操作。

最后，让我列出一些将参数传递给从这里抓取的IIFE的其他优点：

  • 它更快：JavaScript首先查找本地范围(之前
    爬上去)。它可能会提高性能。

  • 帮助缩小：minifier现在可以重命名你的变量
    范围为一个字母的单词，减少代码大小。

Is the latter just a normal anonymous JS function that uses jQuery (ie. NOT shorthand for $(document).ready() and so will execute immediately)?

是的，确切地说，它只是一个普通的IIFE，它将$全局变量作为参数

1
2
3
(function(dollarSignArgument) {
    console.log("not really ready!" );
})($)

它会立即执行

相关讨论