Question

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

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

var PageCode = (function () {

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

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

Answer 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
    };
}());

Answer 2

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

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

一个对象，它有两个属于两个函数的项。此对象将返回并分配给变量PageCode，现在您可以调用frist函数PageCode.ready();和第二个PageCode.load();

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

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

Javascript代码结构 - 这是如何工作的？

2 个答案: