jQuery $(function() {}) vs (function () {})($) [重复]答案

【问题标题】：jQuery $(function() {}) vs (function () {})($) [duplicate]jQuery $(function() {}) vs (function () {})($) [重复]
【发布时间】：2017-06-08 03:45:26
【问题描述】：

我了解以下是$( document ).ready() 的简写：

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

我也了解匿名 JS 函数是什么，但是当使用一个函数调用 jQuery 时，它是否会做任何特别的事情。即：

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

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

我觉得这个问题之前一定有人问过，但如果有的话我找不到。

【问题讨论】：

附带说明，我倾向于（强烈）更喜欢使用jQuery(function($) {//...$ is guaranteed to be jQuery here }); - 准备好“无冲突安全”文档。
(function() { console.log( "ready!" ); })($) 接受参数 $ 但不执行任何操作。
在第二种情况下，您将 jquery 实例传递给匿名函数（不知道为什么）。它将立即执行。
后者实际上只是一个匿名函数。我什至不确定它有什么作用。但是，您实际上可以找到的东西是 ( function( $ ) {/* your code*/ })(jQuery)，它确保您的代码具有 $ 作为 jQuery（标识符有时会被某些不同的库覆盖）。
@cale_b 谢谢。我知道 IIFE 是什么，所以不寻求解释。我只是想确保 jQuery 没有做一些神奇的事情并以某种方式区别对待它。

标签： javascript jquery

【解决方案1】：

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

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

这个函数只是一个匿名函数，它接收一个名为$ 的参数。该函数被立即调用，其中某个值（在本例中为jQuery）作为参数。

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

(function () {
    // x is only accessible within this IIFE
    var x;
    // do something...
})();

有关立即调用函数表达式的更多信息，请参阅此问题：What is the purpose of a self executing function in javascript?

【讨论】：

这是更准确的答案特定于 jQuery。使用“无冲突安全”模型的奖励积分将确保 jQuery 可以与使用 $ 函数名称的其他库一起运行。
很好的答案，但我更熟悉术语“立即调用函数表达式”而不是“自调用匿名函数”。有区别吗？ @cale_b?
@ChuckLeButt 你说得对，我也在答案中添加了另一个术语

【解决方案2】：

第一个确实是$( document ).ready() 的简写，正如here 所指出的那样。

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

事实上，正确的语法（您的示例中缺少参数）是：

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

在这种情况下，您正在调用带有参数的匿名函数。

这种模式 (IIFE) 的主要优点是：隔离您的代码（您可以根据需要创建任意数量的变量，并且它将被限制在您的匿名函数范围，除非你返回一些东西）。这种模式被大量用于定义 "private" 和 "public" 方法。像这样：

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 对象更困难，但是，一些脚本可以重新分配全局美元符号，特别是如果您无法完全控制您的应用程序。这样一来，您总是传递 jQuery 对象并将其作为 $ 进行操作。

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

更快：JavaScript 首先查找本地范围（之前爬上去）。它可能会稍微提高性能。
有助于缩小：缩小器现在可以重命名你的范围为一个字母的单词，减少代码大小。

【讨论】：

【解决方案3】：

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

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

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

它会立即执行

【讨论】：

是这样想的。谢谢！