Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Understanding JavaScript Design patterns

In this document we will talk about the different design patterns used in JavaScript. Most of the developers wonder to find out the exact or the ideal design pattern to be used in their program.

To be honest, there is no concrete answer to this question or there aren’t any formulae which would find out the correct design pattern to be used in a given situation. So under such circumstance, we should have a firm gasp of the design patterns and the specific problems they deal with, we should be in a better situation to take a decision on which design pattern to be used in which condition.

A design pattern is a reusable solution which can be applied to common re-occurring problems in software design and development. Design pattern can also be termed as templates used to solve common problems. Design patterns have three major benefits:

  • They are proven solutions: Design pattern provide a solid approach in software development and uses proven techniques.
  • Can be easily reused: Design patterns are conceptual and provide out of the box solution which suits to our needs. This feature makes the design patterns more robust and they can be re-used in similar conditions.
  • Patterns are expressive: Every design pattern presents a predefined set structure and vocabulary which can be used to provide solutions to larger problems.

Design pattern never provides an exact solution to a problem. It is important to note that the role of patterns is to provide a solution scheme.

Types of Design Patterns

Design patterns can be divided into following three sub categories:

Creational Design Pattern : In this category the following design patterns fall :

  • Singleton
  • Constructor
  • Factory
  • Abstract
  • Prototype
  • Builder

Structural Design Pattern : In this category the following design patterns fall :

  • Decorator
  • Facade
  • Flyweight
  • Adapter
  • Proxy

Behavioral Design Pattern : In this category the following design pattern fall :

  • Iterator
  • Visitor
  • Mediator
  • Observer

Patterns in JavaScript:

The following patterns are commonly used in JavaScript:

  • Constructor Pattern
  • Module Pattern
  • Singleton Pattern
  • Observer Pattern
  • Mediator Pattern
  • Prototype Pattern
  • Command Pattern
  • Facade Pattern
  • Factory Pattern
  • Decorator Pattern
  • Flyweight Pattern

The Constructor Pattern:

As per the classical object oriented programming concept, a constructor is a special type of method which is used to create an instance of an object in the memory. In JavaScript object creation is done using any of the following three approaches:

Listing 1: Three approaches used in JavaScript to create Objects

// Approach 1 
var newObject = {};

//Approach 2
var newObject = Object.create(null);

//Approach 3
var newObject = new Object();

In the third approach, the Object is created using the Object constructor where no value is passed or set. There are multiple ways to set values to a newly created object. These are:

Listing 2: Ways to set values to a constructor

//Approach 1
newObject.someKey = “Hello World”

//Approach 2
newObject[someKey] = “Hello World”

//Approach 3
Object.defineProperty( newObject, "someKey", {
value : “Hello World”
writable : true
enumerable : true
configurable : true
);

The Singleton Pattern:

We all know that the singleton pattern restricts the creation of an object to single instance. Singleton pattern is implemented by creating a class with a method which creates a new instance of the object only when no other instances exist. In JavaScript singletons serve as a shared resource namespace which isolates implementation from the global namespace. In JavaScript, singleton is implemented in the following manner:

Listing 3: Singleton implementation in JavaScript

var mySingleton = (function () {

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

  function init() {

    // Singleton

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

    var privateVariable = "Im also private";

    var privateRandomNumber = Math.random();

    return {

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

      publicProperty: "I am also public",

      getRandomNumber: function() {
        return privateRandomNumber;
      }

    };

  };

  return {

    // Get the Singleton instance if one exists
    // or create one if it doesn't
    getInstance: function () {

      if ( !instance ) {
        instance = init();
      }

      return instance;
    }

  };

})();

var myBadSingleton = (function () {

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

  function init() {

    // Singleton

    var privateRandomNumber = Math.random();

    return {

      getRandomNumber: function() {
        return privateRandomNumber;
      }

    };

  };

  return {

    // Always create a new Singleton instance
    getInstance: function () {

      instance = init();

      return instance;
    }

  };

})();


// Usage:

var single1 = mySingleton.getInstance();
var single2 = mySingleton.getInstance();
console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // true

var badSingle1 = myBadSingleton.getInstance();
var badSingle2 = myBadSingleton.getInstance();
console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // true

As per the GoF, singleton is applicable in the following situations:

  • There should exist exactly on instance of the Object.
  • The sole instance should be extendible by sub-classing it.

The Observer Pattern:

In the Observer pattern, the object (also called as subject) maintains a list of objects depending on it referred to as observers. The subject automatically notifies to the observers any change that has happened, using the broadcast mechanism. Implementation of the Observer Pattern is shown below.

Listing 4: List of dependent Observers a subject may have

function ObserverList(){
  this.observerList = [];
}

ObserverList.prototype.Add = function( obj ){
  return this.observerList.push( obj );
};

ObserverList.prototype.Empty = function(){
  this.observerList = [];
};

ObserverList.prototype.Count = function(){
  return this.observerList.length;
};


ObserverList.prototype.Get = function( index ){
  if( index > -1 && index < this.observerList.length ){
    return this.observerList[ index ];
  }
};

ObserverList.prototype.Insert = function( obj, index ){
  var pointer = -1;

  if( index === 0 ){
    this.observerList.unshift( obj );
    pointer = index;
  }else if( index === this.observerList.length ){
    this.observerList.push( obj );
    pointer = index;
  }

  return pointer;
};

ObserverList.prototype.IndexOf = function( obj, startIndex ){
  var i = startIndex, pointer = -1;

  while( i < this.observerList.length ){
    if( this.observerList[i] === obj ){
      pointer = i;
    }
    i++;
  }

  return pointer;
};


ObserverList.prototype.RemoveAt = function( index ){
  if( index === 0 ){
    this.observerList.shift();
  }else if( index === this.observerList.length -1 ){
    this.observerList.pop();
  }
};


// Extend an object with an extension
function extend( extension, obj ){
  for ( var key in extension ){
    obj[key] = extension[key];
  }
}

Listing 5: The Subject

function Subject(){
  this.observers = new ObserverList();
}

Subject.prototype.AddObserver = function( observer ){
  this.observers.Add( observer );
};  

Subject.prototype.RemoveObserver = function( observer ){
  this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );
};  

Subject.prototype.Notify = function( context ){
  var observerCount = this.observers.Count();
  for(var i=0; i < observerCount; i++){
    this.observers.Get(i).Update( context );
  }
};

In the above example, using the Observer components, we now define:

  • A button for adding new observable checkboxes to the page
  • A control checkbox which will act as a subject, notifying other checkboxes they should be checked
  • A container for the new checkboxes being added

The HTML code is as under:

Listing 6: The HTML code

<button id="addNewObserver">Add New Observer checkbox</button>
<input id="mainCheckbox" type="checkbox"/>
<div id="observersContainer"></div>

So in this article I have discussed details about the JavaScript design patterns. The design patterns are applicable to all types of languages like object oriented language java and also scripting language like JavaScript. But there are differences and we have seen it in the examples above. So to conclude the discussion we can say that Design patterns are used to provide solution to commonly occurring problems. And please keep in mind that Design patterns are:

  • Are Proven solution
  • Can be easily used
  • Are expressive

Hope you have understood the concepts and it will help you implement it in your own project. Happy reading.

See also



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login