JavaScript Module Pattern

Last updated on January 13, 2016

Design patterns offer developers ways to solve technical problems in a reusable and elegant way. Probably module pattern is the most used and widely accepted JavaScript pattern and you’ve probably used it before without realizing it.

Basically by using this pattern you can modularize your application and you can provide public and private access to methods and variables. Yes its supports private data like other programming languages. In JavaScript we do not have access modifiers like public,private,protected. But JavaScript is an object-oriented language where objects inherit from other objects, this concept is known as prototypical inheritance.

Module pattern reduces the chances of collision with other code of the application by improving the reduction of globally scoped variables. So Less clutter in the global namespace. You can easily localize functions and variables through the closures.

In order to understand modular design pattern, you need to understand these concept of Self-executed function.Self-executed method is an anonymous method that is being called by itself only. Below example shows how we can write self-executed method.

(function ( ) { 
  // you can put here variables,function declaration and function expressions
})( ); //calling this method.  

In the above code, I have anonymous function that is declared and just after declaration it has been called by writing (); the moment we execute this JavaScript code, this method will get executed by itself only. Hence it is called a self-executed method.

Example of Module Pattern(MP)

var module = (function () {

    // private
    var private_one = function () {};
    var private_two = function () {};

    // public
    return {
        public_one: function () {
            private_one();
        },
        public_two: function () {
            private_two();
        }
    };

})();

Revealing Module Pattern(RMP)

Revealing Module Pattern also work like Module pattern but it’s syntax is declarative. For bigger JavaScript modules this pattern helps out a lot more, using a standard “Module Pattern” can get out of control depending on the syntax you go for and how you structure your code.

var module = (function () {

    // private
    var private_one = function () {};
    var private_two = function () {};

    // public
    return {
        public_one: private_one,
        public_two: private_two
    };

})();

Definitive Module Pattern

I really like the Definitive module Pattern syntax, as it is very declarative than “Module Pattern(MP)” and “Revealing Module Pattern(RMP)”. We can easily see public and private functions, you can have multiple group for public and private functions and you can return them.

var module = (function () { // var is optional here

    // private
    var _private = {
        private_one: function () {},
        private_two: function () {}
    };

    // public
    var _public = {
        public_one: _private.private_one,
        public_two: _private.private_two
    };

    return _public;

})();

You can extend modules by augmenting. First, we import the module, then we add properties, then we export it. Here’s an example, augmenting our “module” from above:

var module = (function (module) {

  module.public_three = function () {};
  module.public_four = function () {};
  
  return module;
  
}(module));

After this code has run, our module will have gained new public methods named module.public_three and module.public_four. This augmentation file will also maintain its own private internal state and imports.

In the above code, it requires initial module creation to be first, as second module taking first module as argument. We can make second module to load it self without waiting for first module and vise versa. Both(each) file should have the following structure:

var module = (function (module ) { // the var statement is always necessary
	// add capabilities...

	return my;
}(module || {}));

We can also create Sub-modules and override methods using this pattern.