javascript revealing module pattern extension suggestion

Question

I would like to achieve module pattern in JS. I followed some posts in google and starting writing my own. here is what I would like to achive

mns - will be the name space for my lib
math - will be one of the sub-module in mns

and I want all these modules in separate files.

here is mns.js file code (it is just for namespace no functions in it)

    var mns = (function () {
         return {};
     })();

here is math.js code(i want this as a submodule for mns)

    var submodule = (function (mns) {
    var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
   })();
  mns.math = math;
  return mns;
 })(mns || {});

I am expecting application.js will call like below

    mns.math.incrementCounter();
    mns.math.resetCounter();

Right now, I am getting Cannot read property of undefined error when calling incrementCounter & resetCounter. Please guide me in this.

Answer 1

All is looking good, except for the math module:

var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
   })();

In order to use incrementCounter and resetCounter you have to return them in an object (So that math will be set to something).

Something like this should work:

var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
    return {
        incrememtCounter: incrememtCounter,
        resetCounter: resetCounter
    }
   })();

Answer 2

Following is the way, I achieved it. Please suggest better approach

mns.js file

 var mns = {};

math.js file

    mns.math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    };
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    };

    return{
        incrementCounter : incrementCounter,
        resetCounter : resetCounter
    }
   })();

Answer 3

Rather than dealing with the semantics of creating closures, I recommend using Browserify to handle your module patterns for you. This allows you to separate everything into multiple files, as well as use the file name as an identifier for your modules. It helps to reduce the amount of boilerplate and makes the code easier to understand. It also mimics NodeJS modular CommonJS syntax which is nice as well.

Answer 4

I think what you're looking for is this...

// mns.js
(function(window) {

    var mns = function() {
        // your private code here...
        return {
            // public module interface...
        }
    }();

    window.mns = mns;

})(window);


// math.js
(function(mns) {

    var math = function() {
        // your private code here...
        return {
            // public module interface...
        }
    }();

    mns.math = math;

})(window.mns);

In your HTML page, you will need to load mns file first, and then math file. Or maybe you could use some tool to connect these files and load a unique minified file like mns.min.js. For me Gulp.js is a magnificent tool for that propose. Use some concat operation of the Gulp.js to join the file in an specific order, like I said.

If you want a real-world example, see this: https://github.com/viniciusknob/queiroz.js/blob/master/dist/queiroz.js