Design Patterns In JavaScript - Creational, Part 2

Constructor Pattern

Another Way to create object in java script is by using constructor function, this is a special function call within the new keyword this also called constructor pattern. So constructors are used to create specific types of objects - both preparing the object for use and accepting arguments which a constructor can use to set the values of member properties and methods when the object is first created.

To distinguish constructor function from other normal function we make first letter an upper letter (readability concept nothing else).

function Person(firstName, lastName){
   // This refere to the object that we are creating
   this.firstName = firstName;
   this.lastName = lastName;
   // we need to create a method, technicality we don't have method in JavaScript
   // we have a property hat contain function object, but logically we have a method
   this.sayHello = function(){};
};

There is a little problem with this basic constructor pattern the sayName method. Because of every person object we create we will create a new function object and assign to sayName property. And Also this result increase memory usage and store into the memory. Also it introduce inheritance issue by define method inside the constructor.

So to solve this problem we can define our method on the prototype.
Every function object has a property call prototype but it really only use with constructor pattern.
Any property that you define on the prototype it share between all instances of the constructor function.

function Person(firstName, lastName){
   // This refere to the object that we are creating
   this.firstName = firstName;
   this.lastName = lastName;
};

Person.prototype.sayName = function(){
   alert("Hello, " + this.name);
};

Introduction To Module Pattern

Modules are an integral piece of any robust application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized.
 
By Default JavaScript lake of privacy and one of most important at OOP is the privacy, because we need to protect out code from outside world

var dom = {
    _counter: 0,
    generatedId : function(){
        return "customId" + this._counter++;
    },
    create: function(tagName, id){
        var el = document.createElement(tagName);
        el.id = id || this.generatedId();
        return el;
    }
};

The above code we can call _counter and set it with any value we need  although it suppose that it a private member.

So We need to apply privacy to our code, we can apply function of scope and closure. We will create new object using the basic module pattern to create it.

The basic module pattern uses an immediately invoked function and return object. this give us the ability to use the local scope of of the invoked function and emulate privacy and what it will return it will public for the world.

var dom = (function(){     
     var _counter = 0;
     function generatedId(){
          return "customId"  + _counter++;
     }
     function create(tagName, id){
          var el = document.createElement(tagName);
          el.id = id || generatedId();
          return el;
     }
     return {
          generatedId: generatedId,
          create: create
     };
})();

So at the above code, we just expose to the public our two methods only (generatedId and create) and the _counter will not access any more again from public.
Also By Useing module pattern we can mix in other objects, by passing what we need, for example the JQuery or another module as argument to the immediately invoked function.

var dom = (function(jq, logger){     
     var _counter = 0;
     function generatedId(){
          return "customId"  + _counter++;
     }
     function create(tagName, id){
          var el = document.createElement(tagName);
          el.id = id || generatedId();
          return el;
     }
     return {
          generatedId: generatedId,
          create: create
     };
})(JQuery, loggerModule);

Singleton Pattern

Singleton looks like a module pattern and easy to assume that singleton is module and module is singleton. but it is not the case because they have two different purpose. 
The purpose of module is cleanly separate unit of code. Singleton make sure that a class has only one instance and provide a global point of access to it. 
But of course we don't have class on JavaScript,so from JavaScript perspective, insure that object has only one instance and provide a global point of access to it.

So when we talk about singleton we not take about the single instance of object, we taking about the thing that insure that there only one instance of the object and provide access to that one instance.

var dom = (function(){     
     var _counter = 0;
     var instance;
     function generatedId(){
          return "customId"  + _counter++;
     }
     function create(tagName, id){
          var el = document.createElement(tagName);
          el.id = id || generatedId();
          return el;
     }
     function createInstance(){
          return {
             generatedId: generatedId,
             create: create
          };
     }

     return {
          getInstance: function(){
             return instance || (instance = createInstance());
          }
     };
})();

 The secret is of singleton is this line ( return instance || (instance = createInstance()); ).
It check for instance if has a value so return it else call createInstance() and assign what it is return to instance variable and that is happen at first time we call getInstance() method.