javascript - 我可以使用揭示模式将 ES6 JavaScript 程序分解为单独的文件吗？

Question

我有一个大型且不断增长的 JavaScript 程序，我想将其分解为单独的文件以提高可维护性，但我不知道是否可行。我已使用描述的揭示模式将其分解为模块 here 。这很有帮助，这可能是我逻辑上能做的。

这是一个非 Rails Ruby/Sinatra/Rack 中间件/ES6 JavaScript 应用程序。我实现了 sprockets 来维护 Assets 管道。它使用 jQuery Mobile 单页面架构，这是维护事件 IoT 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，但这可能行不通，而且如果行得通，那就太难看了。

有什么选择吗？谢谢。

Answer 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

更新:任何回调(包括在单击等事件上触发的函数)都必须与返回的关联数组一起公开，并且即使在该模块内也必须在其引用中使用模块名称，因为回调将在外部发生。