Carl Danley
The Module Pattern
August 8, 2014

This pattern is used to mimic classes in conventional software engineering and focuses on public and private access to methods & variables. The module pattern strives to improve the reduction of globally scoped variables, thus decreasing the chances of collision with other code throughout an application.

The module pattern is, by far, the most commonly used design pattern and widely accepted in a number of large projects such as jQuery, Dojo, ExtJS and YUI.

"I'm currently in the process of writing a large-scale JavaScript application based on this pattern, and I have to say, it's a delight."
- Brian Cray

This article is part of a series called JavaScript Design Patterns.

Advantages

  • Cleaner approach for developers
  • Supports private data
  • Less clutter in the global namespace
  • Localization of functions and variables through closures

Disadvantages

  • Private methods are unaccessible.
    Some people say that this leads to the inability of unit testing but more often than not, if you're questioning the integrity of a function, it should probably be engineered in such a fashion that exposes the utility of that function publicly, thus making it testable. Given the adaptation of the module pattern by jQuery and their everyday use of QUnit to automate testing, this bullet point isn't really relevant but still listed for documentation purposes.
  • Private methods and functions lose extendability since they are unaccessible (see my comment in the previous bullet point).

Example

( function( window, undefined ) {
// normally variables & functions start with a lowercase letter but with modules, that is not the case.
// The general tradition is to start them with a capital letter instead.
function MyModule() {
// `this` refers to the instance of `MyModule` when created
this.myMethod = function myMethod() {
alert( 'my method' );
};
// note that we still use a function declaration even when using a function expression.
// for more information on why, check out: http://kangax.github.io/nfe/
this.myOtherMethod = function myOtherMethod() {
alert( 'my other method' );
};
}
// expose access to the constructor
window.MyModule = MyModule;
} )( window );
// example usage
var myModule = new MyModule();
myModule.myMethod(); // alerts "my method"
myModule.myOtherMethod(); // alerts "my other method"

Another example of the module pattern that exposes the module a little differently and makes use of a shared private cache. This method encourages more of an object creation approach where we can optimize performance by being efficient with shared storage.

var MyModule = ( function( window, undefined ) {
// this object is used to store private variables and methods across multiple instantiations
var privates = {};
function MyModule() {
this.myMethod = function myMethod() {
alert( 'my method' );
};
this.myOtherMethod = function myOtherMethod() {
alert( 'my other method' );
};
}
return MyModule;
} )( window );
// example usage
var myMod = new MyModule();
myMod.myMethod(); // alerts "my method"
myMod.myOtherMethod(); // alerts "my other method"

Additional Resources

Other Common JS Patterns