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

how*_*his 5 javascript design-patterns module

如何根据模块模式访问/创建子模块?

我希望能够从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();
});
Run Code Online (Sandbox Code Playgroud)

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
    }

}());
Run Code Online (Sandbox Code Playgroud)

Way*_*ett 8

您的方法没有错,前提是:

  • 您在模块脚本之后加载子模块脚本
  • 在加载子模块脚本之前,不要尝试访问它
  • 您可以使主模块依赖于子模块的存在.(我不太确定这是个好主意.)

侧面的问题

您的代码目前在以下行中有语法错误:

var Module.Utils = (function() {
Run Code Online (Sandbox Code Playgroud)

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();
Run Code Online (Sandbox Code Playgroud)

输出:

Module: B
Module.Utils: C
Run Code Online (Sandbox Code Playgroud)