我可以使用显示模式将 ES6 JavaScript 程序分解为单独的文件吗？答案

【问题标题】：Can I break an ES6 JavaScript program using the revealing pattern into separate files?我可以使用显示模式将 ES6 JavaScript 程序分解为单独的文件吗？
【发布时间】：2017-09-30 02:50:26
【问题描述】：

我有一个庞大且不断增长的 JavaScript 程序，为了便于维护，我想将其拆分为单独的文件，但我不知道这是否可行。我使用here 描述的揭示模式将其分解为模块。这很有帮助，这可能是我在逻辑上能做的所有事情。

这是一个非 Rails Ruby/Sinatra/Rack 中间件/ES6 JavaScript 应用程序。我实施了 Sprockets 来维护资产管道。它使用 jQuery Mobile 单页架构，这是维护活动物联网 WebSocket 连接所必需的。因此，HTML 页面和 JavaScript 函数一旦加载，就必须始终进行维护。

JavaScript 的模型是：

$(function ($, window, document) {
    let globalTriggered;
    const constOne = [1, 2, 3];
    const consDot = '.';
    $("body").pagecontainer({
        defaults: false
    });
    $(document).on("pagecreate", null, function () {
        if (globalTriggered === false) {
            globalTriggered = true;

            let Module1 = (function () {
                let privateMethod1 = function () {
                    Module2.anotherMethod2()
                };
                let someMethod1 = function () {
                    privateMethod1()
                };
                let anotherMethod1 = function () {
                };
                return {
                    someMethod1: someMethod1,
                    anotherMethod1: anotherMethod1
                };
            })();
            let Module2 = (function () {
                let privateMethod2 = function () {
                };
                let someMethod2 = function () {
                    Module1.someMethod1();
                    privateMethod2()
                };
                let anotherMethod2 = function () {
                    Module1.anotherMethod1()
                };
                return {
                    someMethod2: someMethod2,
                    anotherMethod2: anotherMethod2
                };
            })();

        } // stabilzer end
    }); // pagecreate end
}(window.jQuery, window, document)); // function end

我想做的是将模块（如本例中的 Module1 和 Module2）分离到它们自己的源文件中，同样是为了可维护性。

我考虑过 ES6 的导出/导入选项，但导入/导出必须始终在顶层完成。 Sprocket 有一个类似的限制，即一旦遇到代码，它就会停止搜索指令。我曾考虑尝试通过使用 require_self 来破解 Sprocket，但这可能行不通，如果这样做会很丑陋。

有什么选择吗？谢谢。

【问题讨论】：

那些模块好像没有任何基于闭包的依赖，所以你可以把它们放在任何地方

标签： javascript jquery jquery-mobile sprockets es6-modules

【解决方案1】：

嗯，这几乎就像 dandavis 暗示的那样简单（谢谢）。我只是将模块移动到它们自己的文件中，在定义它们时执行内部函数，消除它们的默认执行 [从 })(); 更改它们的最后一行；到 }（））; ]，使用 Sprockets 将它们放在顶部（尽管 ES6 导出/导入应该可以工作），并在我需要它们时触发它们。

//= require Module1.js
let Module1 = (function () {
    let privateMethod1 = function () {
        Module2.anotherMethod2()
    };
    let someMethod1 = function () {
        privateMethod1()
    };
    let anotherMethod1 = function () {
    };
    return {
        someMethod1: someMethod1,
        anotherMethod1: anotherMethod1
    };
}());
//= require Module2.js
let Module2 = (function () {
    let privateMethod2 = function () {
    };
    let someMethod2 = function () {
        Module1.someMethod1();
        privateMethod2()
    };
    let anotherMethod2 = function () {
        Module1.anotherMethod1()
    };
    return {
        someMethod2: someMethod2,
        anotherMethod2: anotherMethod2
    };
}());
$(function ($, window, document) {
    let globalTriggered;
    const constOne = [1, 2, 3];
    const consDot = '.';
    $("body").pagecontainer({
        defaults: false
    });
    $(document).on("pagecreate", null, function () {
        if (globalTriggered === undefined) {
            globalTriggered = true;

            Module2.anotherMethod2();

        } // stabilzer end
    }()); // pagecreate end
}(window.jQuery, window, document)); // function end

更新：任何回调，包括在类似点击时触发的函数，都必须与返回的关联数组一起公开，并且即使在该模块中也必须在其引用中使用模块名称，因为回调将在外部发生。

【讨论】：