我可以使用揭示模式将 ES6 JavaScript 程序分解成单独的文件吗?

Can I break an ES6 JavaScript program using the revealing pattern into separate files?

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

这是一个非Rails Ruby/Sinatra/Rack middleware/ES6 JavaScript 应用程序。我实施了 Sprockets 来维护资产管道。它使用 jQuery 移动单页架构,这是维持活动物联网 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 的 export/import 选项,但是 import/export 必须始终在顶层完成。 Sprocket 有类似的限制,因为它一旦遇到代码就会停止搜索指令。我考虑过使用 require_self 尝试破解 Sprocket 来解决这个问题,但这可能行不通,如果这样做的话会很丑陋。

有什么选择吗?谢谢

好吧,这几乎和 dandavis 暗示的一样简单(谢谢)。我只是将模块移动到它们自己的文件中,在定义它们时执行内部函数,消除它们的默认执行[更改它们的最后一行 })();到 }()); ],使用 Sprockets 在顶部要求它们(尽管 ES6 export/import 应该可以工作),并在我需要它们时触发它们。

//= 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

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