JavaScript design patterns

After reading Addy Osmani's book JavaScript design patterns , I thought I would summarize some of the patterns I found useful and have been using in some projects. It is an awesome book and has a lot of useful information for JavaScript framework developers.

<b>Module pattern</b>

The Module pattern encapsulates "privacy", state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables. With this pattern, only a public API is returned, keeping everything else within the closure private.

var myNamespace = (function () {     
  var myPrivateVar, myPrivateMethod;     
  myPrivateVar = 0;

  myPrivateMethod = function( foo ) {
      console.log( foo );
  };

  return {     
    myPublicVar: "foo",

    myPublicFunction: function( bar ) { 
      myPrivateVar++;
      myPrivateMethod( bar );
    }    
  };

})();

<b>Revealing Module pattern</b>

The revealing module pattern is an updated version of the module pattern where all functions and variables are declared in the private scope and an anonymous object with pointers to the private functionality is returned.

var myRevealingModule = (function () {
        var privateVar = "this is private",
            publicVar  = "this is public";

        function privateFunction() {
            console.log( privateVar );
        }

        function publicSetName( strName ) {
            privateVar = strName;
        }

        function publicGetName() {
            privateFunction();
        }

        // Reveal public pointers to private functions and properties
        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };     
    })();

<b>Prototype inheritance</b>

JavaScript doesn't support the concept of classes but it does support special constructor functions that work with objects. Functions in JavaScript have a property called a prototype. When we call a JavaScript constructor to create an object, all the properties of the constructor's prototype are then made available to the new object.

function Car(model, year) {
    this.model = model;
    this.year = year;   
}

Car.prototype.toString = function() {
    return this.model + ", " + this.year;
};

var supra = new Car("Toyota Supra", 2006);

<b>Singleton pattern</b>

In JavaScript, Singletons serve as a shared resource namespace. The singleton pattern is used to restrict instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.

var mySingleton = (function () {

  // Instance stores a reference to the Singleton
  var instance;

  function init() {

    // Private methods and variables
    function privateMethod(){
        console.log( "I am private" );
    }

    var privateVariable = "Im private"; 

    return {     
      // Public methods and variables
      publicMethod: function () {
        console.log( "The public can see me!" );
      },

      publicProperty: "I am public",     
    };     
  };

  return {

    // Get the Singleton instance if one exists
    getInstance: function () {     
      if ( !instance ) {
        instance = init();
      }     
      return instance;
    }     
  };

})();

var singleA = mySingleton.getInstance();
console.log(singleA.publicMethod());

<b>Mixin inheritance</b>

In JavaScript, we can look at inheriting from Mixins as a means of collecting functionality through extension. Each new object we define has a prototype from which it can inherit further properties.

var Person = function( firstName, lastName){ 
    this.firstName = firstName;
    this.lastName = lastname;
}

var clark = new Person("Clark", "Kent");

var Superhero = function(firstName,lastname, powers){ 
    this.powers = powers;
    Person.call(this,firstName,lastName);
};

SuperHero.prototype = Object.create(Person.prototype);           
var superMan = new Superhero( "Clark", "Kent", [ "flight", "strength" ]);

<b>Facade pattern</b>

This pattern provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity. jQuery uses facades for much of its API to simplify complex operations. An example is jQuery's $(document).ready(..) method which internally, is powered by a method called bindReady() which performs some of the following, to simplify the job for us.

$(document).ready(function () {
    ...
});