Design patterns in JS language

What is design pattern?

A general, reusable solution to a commonly occurring problem in the context of software design.

It is more general than algorithm.

Types of patterns (Not limited to the following)

Creational

Constructor

Constructors are special functions that can be used to instantiate new objects with methods and properties defined by that function. JS doesn’t support the concept of classes but it has keyword new.

• Create a new brand object
• Links to an object prototype
• Bind this to the new object scope
• Implicitly return this

Prototype is an encapsulation of properties that an object links to. Instance overwrites prototype. If the system is accessing property that instance doesn’t have, it will check the prototype.

Modular

An encapsulation of methods and only expose public methods to the outside of module. If you want to set methods private, just don’t return those. (Like class concept in Java)

const module = (function () { 
     function privateMethod() { 
      // private 
      }; 
     function function someMethod() { 
     // public 
     }; 
     return { 
         someMethod, 
     }; 
})();

Factory

A way to simplify object creation. It is for objects that have many common characteristics at the same time. (Like Interface in Java)

function Factory() {
    this.createEmployee = function (type) {
         var employee;
         if (type === "fulltime") {
             employee = new FullTime();
         } else if (type === "parttime") {
             employee = new PartTime();
         } else if (type === "temporary") {
             employee = new Temporary();
         } else if (type === "contractor") {
             employee = new Contractor();
         }
         employee.type = type; 
         employee.say = function () {
             log.add(this.type + ": rate " + this.hourly + "/hour");
         }
         return employee;
      }
}

Singleton

It restricts an object to one single instance across the entire application. You call a function, which will check if the object is created or not. It will return the object created before or newly created. No matter who calls the function, it will return the same result.

Structural

Happens inside objects.

Decorator

Add new functionality to existing objects without being obtrusive. It protects existing objects and also extend functionalities.

function Product(name) {
    this.name = name;
    this.sold = false;
}

function Food(name) {
     Product.call(this, name);
     this.category = 'food';
}

// sold property doesn't have value.
Food.prototype = Object.create(Product.prototype);
// Cannot directly assign prototype to Food otherwise it will change the prototype of Product.

Facade

Simplified interface in complicated systems.

Communication between presentation layer and service layer is via API. This API can be called facade.

Another scenario is in refactoring.

Flyweight

Conserve memory by sharing portions of an object (some sharing properties and values) between objects.

Behavior

Assignment of responsibilities between objects and how they communicate.

Observer

Allows a group of objects to watch an object and be notified of changes.

• Loosely coupled system.
• One object is focal point.

Mediator

Controls communication between objects so neither object has to be coupled to the others.

• For loosely coupled system.
• One object manages all communication.
• Many to many relationship.

Command

Encapsulates the calling of a method as an object.

• Fully decouples the execution from the implementation.
• Allows for less fragile implementation.
• Support undo operations.
• Support auditing and logging of operations.