Javascript 代码结构 - 这是如何工作的？ [复制]答案

【问题标题】：Javascript Code Structure - How Does This Work? [duplicate]Javascript 代码结构 - 这是如何工作的？ [复制]
【发布时间】：2014-09-20 05:55:14
【问题描述】：

我偶然发现了一种非常优雅的方式来为页面构建 JS 代码，但我不确定它为什么会这样工作。有人可以向我解释这是如何工作的吗？（例如，为什么那里有那个 return 语句）。

还有一个名字来描述这样的模式吗？

var PageCode = (function () {

    return {
        ready: function () {
            console.log('document.ready');
        },
        load: function() {
            console.log('document.load');
        }
    };
}());

$(document).ready(PageCode.ready);
$(window).load(PageCode.load);

【问题讨论】：

它被称为closure。谷歌搜索 javascript closure 会给你很多结果。
这实际上是立即调用函数表达式 (IIFE) 的一个特别糟糕的示例，因为它没有局部变量。您可以轻松地使用返回的对象字面量来代替整个 IIFE，而无需任何可观察到的行为变化。
这是简单的JavaScript Module Pattern

标签： javascript

【解决方案1】：

该模式称为Revealing Module Pattern，是Module Pattern 的变体，其中返回值用于公开模块的属性以使其公开。

最后返回一些值的好处是您可以使用var 以相同的方式定义所有变量和函数，而不是使它们成为模块的属性。返回的对象包含一些先前定义的变量以使它们公开（与您在 return 语句中定义函数的示例不同）

在标准模块模式中，您可以像这样定义私有和公共函数：

var PageCode = (function () {

    var f1 = function() { /* ... */ }
    this.f2 = function() { /* ... */ }

}());

对于显示模块模式，等效的将是

var PageCode = (function () {

    var f1 = function() { /* ... */ }
    var f2 = function() { /* ... */ }

    return {
        f2: f2
    };
}());

【讨论】：

此模式以及顶部的链接有助于澄清正在发生的事情。几乎“重复”答案的链接也有很大帮助。感谢您的帮助！
@richie 在 JavaScript 函数中隐式返回 undefined。显式可以返回所有内容，例如对象。 IIFE 调用后的返回值将分配给分配给 IIFE 的变量。之后，您可以在 PageCode 上调用一些方法

【解决方案2】：

为了帮助您理解这段代码，请查看作为对象的 return 语句之后的内容

{
    ready: function () {
        console.log('document.ready');
    },
    load: function() {
        console.log('document.load');
    }
}

一个有两个项目的对象，这两个项目都是函数。这个对象被返回并赋值给变量PageCode，现在你可以调用第一个函数PageCode.ready();和第二个函数PageCode.load();

$(document).ready(); 和$(window).load(); 函数将函数作为参数函数，它们将在文档准备好和加载窗口时执行。这就是为什么你用函数作为参数来调用它们

$(document).ready(PageCode.ready);
$(window).load(PageCode.load);

【讨论】：