Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Module Pattern in Javascript

DZone's Guide to

Module Pattern in Javascript

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

Recently I wrote about the Singleton Pattern in JavaScript after I wrote a few lines about the famous module pattern.

As per the textbook definition goes:

Module pattern is a design pattern used to implement the concept of software modules, defined by modular programming, in a programming language that supports it partly or fully.

Putting it in a simple equation Creational Pattern + Structural Pattern => Module Pattern

Things to know before diving into Module Pattern in Javascript:

  • Closures.

  • Immediately invoked function expression.

Closures :

Simply put, function + environment in which that function was created => Closures. In other words, this is a function joined with a referencing environment for the non-local variables of that function.

When a function is defined in another function and it has access to the outer function's context, even after the outer function returns, this helps to implement closure in javascript.

Simple Closure example :

function greet(wave) {
  return function say(name) {
    console.log(wave+" "+name);
  }
}
 
var greeter = greet("Hello");
greeter("Hemanth"); // Would log "Hello Hemanth"
 
// Or 
 
(greet("Hello")) ("Hemanth");
(greet("Hello")) ("World");

Did you notice?

  • greet() is a function generator pattern.

  • greet() receives wave and returns the function say().

  • say() receives name, but still has access to the wave var, that was received by greet().

  • greet("Hello")) ("Hemanth"); and (greet("Hello")) ("World"); Both are closures and they share the same body, but different environment!

Immediately invoked function expression:

With IIFE, self-invoking functions, there are many ways to do this. Below are some bad ways:

!function(){
   console.log("immediately invoked!");
}();
 
//or
 
+function(){
   console.log("immediately invoked!");
}();
 
//or
 
!1%-+~function(){
   console.log("immediately invoked!");
}();
 
//or
 
~function(){
   console.log("immediately invoked!");
}();
 
//or any other sick sytax!

Students from Douglas Crockford School would prefer to code IIFE as shown below:

( function() {
    console.log("Immediately Invoked!");
());

In javascript, whenever there is a bare function keyword, the interpreter expects a function name, or an assignment, but here both are not present, it's just created and invoked in a closure!

The Module pattern:

A pattern in which a function or an object provides an interface but hides and states an implementation (encapsulation) is called a module pattern.

The module pattern makes use of the function's scope and closure to create a relationship that is binded and private, and if you notice closely, IIFE are themselves Module Patterns!

An example from the jQuery source:

( function(window,document,undefined){
    /* Some code here */
)(window,document)();

Notice that only windows and documents are passed, but the third argument is undefined in case someone defined what is undefined in the global scope.

So finally, Module pattern is highly used in :

  • Encapsulating data and behavior.

  • Producing secure objects.

  • Loading code into a function with scoped parameters.

  • Shadowing off the global parameters.

I hope one enjoys "The Module Pattern." Happy Hacking!

Extras :

Go ahead, see below. If you need more info about this pattern:

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:

Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}