JavaScript模块模式 - 如何创建子模块

Question

JavaScript模块模式 - 如何创建子模块

5

如何基于模块模式访问/创建子模块？

我希望能够在我的Modules.js主文件中访问子模块的方法。

Module.js

var Module = (function() {

    function A(){
      console.log("Module: A");
      B();
    };

    function B(){
       console.log("Module: B");
       Module.Utils.C(); /* Here is the problem */
    };

    return {
      A:A,
      B:B
    }

} ());

$(function() {
    Module.A();
});

Module.Utils.js

var Module = Module ? Module : {};

Module.Utils = (function() {

    var settings = {
        x : 1,
        y : 2
    };

    function C(){
      console.log("Module.Utils: C");
    };

    function D(){
       console.log("Module.Utils: D");
    };

    return {
      C:C,
      D:D
    }

}());

- howtodothis

2

我不认为这会成为一个问题，除非您在定义子模块之前调用主模块函数。但是，module.utils.js 中存在语法错误。打字错误？ - Mike Robinson

这行代码 var Module = Module ? Module : {}; 的问题在于，如果你的子模块在主模块之前加载，那么主模块的声明将会覆盖子模块的声明，而且不会抛出任何异常。 - João Pimentel Ferreira

2个回答

3

您应该考虑使用一个真正的模块框架，比如RequireJS。

然后，“子模块”只是位于module/utils的一个模块，您的module模块将其作为依赖项进行引用，而这个依赖关系将由RequireJS来解决。

- Domenic

我不认为RequireJS会有什么好处。 - howtodothis

1

更新以解释...我认为这很明显。 - Domenic

绝对有助于整理我的模块...以及整个项目，并带来了许多其他好处。强烈建议研究这个和/或其他模块加载器（如CommonJs等）。为了更进一步，您可以集成webpack（http://webpack.github.io/），它允许您在同一个项目中使用任何模块加载器。 - ctrlplusb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wayne · Accepted Answer

只要满足以下条件，您的方法是没有问题的：

在加载子模块脚本之前，您需要先加载模块脚本
在子模块脚本加载完成之前，不要尝试访问它
您的主模块依赖于子模块的存在（我不确定这是否是一个好主意）

次要问题

您的代码当前在以下行中存在语法错误：

var Module.Utils = (function() {

在赋值操作之前不应该有var关键字。

示例代码

这是你的代码的简化版本——只显示我调用的方法——演示了你的方法的有效性：

var Module = (function() {

    function B() {
        console.log("Module: B");
        Module.Utils.C(); /* accessing submodule public methods */
    };

    return {
        B: B
    };

})();

var Module = Module || {};

Module.Utils = (function() {

    function C() {
        console.log("Module.Utils: C");
    };

    return {
        C: C
    }

})();

Module.B();

输出：

Module: B
Module.Utils: C