Question

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

这是一个非Rails Ruby / Sinatra / Rack中间件/ ES6 JavaScript应用程序。我实现了Sprockets来维护资产管道。它使用jQuery Mobile Single Page Architecture来维护活动的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

更新：任何回调，包括触发类似click的函数，都必须使用返回的关联数组公开，并且必须在其引用中使用模块名称，即使在该模块中也是如此，因为回调将在外部进行。

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

1 个答案: