我可以使用揭示模式将 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
更新:任何回调,包括点击时触发的函数,都必须与返回的关联数组一起公开,并且即使在该模块内也必须在其引用中使用模块名称,因为回调将在外部发生。
我有一个庞大且不断增长的 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
更新:任何回调,包括点击时触发的函数,都必须与返回的关联数组一起公开,并且即使在该模块内也必须在其引用中使用模块名称,因为回调将在外部发生。