JavaScript Module Pattern - How to Create Sub Modules

Question

How do I access/create a sub module based on the module pattern?

I would like to have the ability to access methods from sub modules in my Modules.js main file.

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
    }

}());

I don't see how this would be a problem unless you invoke a main module function before defining the sub-module. You do however have a syntax error in module.utils.js. Typo? — Mike Robinson
– Mike Robinson, Commented Oct 19, 2011 at 16:36
the problem with this line var Module = Module ? Module : {}; is that, if your submodule is loaded before the main module, the declaration of the main module will afterwards erase the declaration of the submodule, and no exception will be thrown. — João Pimentel Ferreira
– João Pimentel Ferreira, Commented Nov 19, 2018 at 12:42

João Pimentel Ferreira · Accepted Answer · 2018-11-19 12:50:53Z

8

There's nothing wrong with your approach, provided:

You load the sub-module script after the module script
You do not attempt to access the sub-module script before it is loaded
You're OK with making your primary module dependent on the existence of the sub-module. (I'm not so sure this is a good idea.)

Side-issue

Your code currently has a syntax error on the following line:

var Module.Utils = (function() {

There should be no var keyword preceding the assignment.

Example Code

Here's a simplified version of your code -- stripped to show only the methods I'm invoking -- that demonstrates that your approach works:

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();

Output:

Module: B
Module.Utils: C

edited Nov 19, 2018 at 12:50

João Pimentel Ferreira

16.5k13 gold badges98 silver badges131 bronze badges

answered Oct 19, 2011 at 16:53

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

João Pimentel Ferreira Over a year ago

The main question I have is: how to access function C() inside Module after Module.Utils is loaded?

João Pimentel Ferreira Over a year ago

regarding your third bullet point, that is, the issue with this line var Module = Module ? Module : {};, is that because, if the submodule is loaded before the main module, the declaration of the main module will afterwards erase the declaration of the submodule, without an exception to be thrown?

João Pimentel Ferreira Over a year ago

Ah, I see you use Module.Utils.C();, the module name, to access methods of the submodule Utils. Wouldn't keyword this also work?

Domenic · Accepted Answer · 2011-10-22 06:39:17Z

3

You should look into using an actual module framework like RequireJS.

A "submodule" would then just be a module located at module/utils, and your module module would require it as a dependency, which RequireJS would take care of resolving for you.

edited Oct 22, 2011 at 6:39

answered Oct 19, 2011 at 16:30

Domenic

113k42 gold badges227 silver badges275 bronze badges

3 Comments

howtodothis Over a year ago

I don't see how RequireJS would be beneficial.

Domenic Over a year ago

Updated to explain... I thought it would be obvious.

ctrlplusb Over a year ago

Definitely helping me clean up my modules... and my entire project, and came with a whole bunch of other benefits. Highly recommend looking into this and/or one of the other module loaders (CommonJs etc). And to go even further you could integrate webpack (webpack.github.io) which allows you to use any of the module loaders together in the same project.

Collectives™ on Stack Overflow

JavaScript Module Pattern - How to Create Sub Modules

2 Answers 2

Side-issue

Example Code

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Side-issue

Example Code

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related