harshitbhat / design-patterns-javascript

Design Patterns in Javascript

Solutions to commonly occuring problems in software design. Can be considered as templates that can be used to solve different problems

Types of design patterns

• Creational design pattern

  Methods for creating objects in a specific situation withour revealing the creation method.

  • Constructor

  • Abstract

  • Prototype

  • Singleton

  • Builder

  • Factory

• Structural design pattern

  These are concerned about class/object composition and relationship between objects. They let us to add new features / functionalities so that restructuring some parts of system do not affect the rest.

  • Facade

  • Aadapter

  • Composite

  • Bridge

  • Flyweight

  • Proxy

  • Decorator

• Behavioral design pattern

  Concerned with the communication between dissimilar objects in system. They streamline the communication and make the information synchronised between objects.

  • Chain of Responsibility

  • Strategy

  • Interpreter

  • Command

  • Observer

  • Iterator

  • Mediator

  • Visitor

  • Memento

  • State

  • Template Method

  • Revealing Module

• Architectural design pattern

  Used for solving the archetectural problems wihtin a given context in software architecture.

  • MVC

  • MVP

  • MVVM

Creational Patterns

Factory Pattern

• Template to create objects.
• Used in complex situations where the type of object required varies and needs to be specified in each case.
• It does not use the new keyword to instantiate the objects.
• It provides a generic interface that delegates the object creation responsibility to corresponding subclass.

Design-Patterns-Javascript/creational/factory_pattern.js

Lines 1 to 44 in 4a24bb3

	class IceCreamFactory {
	constructor() {
	this.createIcecream = function (flavour) {
	let iceCream;
	if (flavour === "chocolate") {
	iceCream = new Chocolate(flavour);
	} else if (flavour === "mint") {
	iceCream = new Mint(flavour);
	} else if (flavour === "strawberry") {
	iceCream = new Strawberry(flavour);
	}
	return iceCream;
	};
	}
	}
	class Chocolate {
	constructor(flavour) {
	this.iceCreamFlavour = flavour;
	this.message = function () {
	return `You chose the ${this.iceCreamFlavour} flavour`;
	};
	}
	}
	class Mint {
	constructor(flavour) {
	this.iceCreamFlavour = flavour;
	this.message = function () {
	return `You chose the ${this.iceCreamFlavour} flavour`;
	};
	}
	}
	class Strawberry {
	constructor(flavour) {
	this.iceCreamFlavour = flavour;
	this.message = function () {
	return `You chose the ${this.iceCreamFlavour} flavour`;
	};
	}
	}

Testing:

const iceCreamFactory = new IceCreamFactory();

const chocolate = iceCreamFactory.createIcecream("chocolate");
const mint = iceCreamFactory.createIcecream("mint");
const strawberry = iceCreamFactory.createIcecream("strawberry");

console.log(chocolate.message());
console.log(mint.message());
console.log(strawberry.message());

Output

You chose the chocolate flavour
You chose the mint flavour
You chose the strawberry flavour

Constructor Pattern

• Use constructor present in class to create specific type of object.

Using Constructor function

Design-Patterns-Javascript/creational/constructor_pattern.js

Lines 1 to 10 in 4a24bb3

	function Human(name, age, occupation) {
	this.name = name;
	this.age = age;
	this.occupation = occupation;
	this.describe = function () {
	console.log(`${this.name} is a ${this.age} years old ${this.occupation}`);
	};
	}

Testing

const human = new Human("Harshit", 29, "engineer");
human.describe();

Output

Harshit is a 29 years old engineer

Using Class

Design-Patterns-Javascript/creational/constructor_pattern.js

Lines 14 to 25 in 4a24bb3

	class Person {
	constructor(name, age, occupation) {
	this.name = name;
	this.age = age;
	this.occupation = occupation;
	}
	describe() {
	console.log(`${this.name} is a ${this.age} years old ${this.occupation}`);
	}
	}

Testing

const person = new Person("Harshit", 29, "engineer");
person.describe();

Output

Harshit is a 29 years old engineer

when to use

• libraries
• plugins

Singleton Pattern

• It restricts the instantiation of a class to a single object.
• On next try, existing instance is returned, no new instance is returned.
• example : printer to be used in office. Single instance is required so that everyone can use it, instead of having a new instance for each employee.

Design-Patterns-Javascript/creational/singleton_pattern.js

Lines 1 to 17 in 4a24bb3

	let instance = null;
	class Printer {
	constructor(pages) {
	this.display = function () {
	console.log(`You are connected to the printer. You want to print ${pages} pages.`);
	};
	}
	static getInstance(numOfPages) {
	if (!instance) {
	instance = new Printer(numOfPages);
	}
	return instance;
	}
	}

Testing

var object1 = Printer.getInstance(2);
console.log(object1);
object1.display();

var object2 = Printer.getInstance(3);
console.log(object2);
object2.display();

console.log(object1 === object2);

Output

Printer { display: [Function (anonymous)] }
You are connected to the printer. You want to print 2 pages.
Printer { display: [Function (anonymous)] }
You are connected to the printer. You want to print 2 pages.
true

when to use

• services : different service instances in application should be single instance.
• databses : single connection in an application
• configuration

Builder Pattern

• Helps in building complex objects using simpler objects.
• It provides flexible and step by step approach to construct objects.
• It keeps representation and process of creation shielded

Design-Patterns-Javascript/creational/builder_pattern.js

Lines 1 to 12 in 4a24bb3

	class Meal {
	constructor() {
	this.make = function (builder) {
	builder.step1();
	builder.step2();
	builder.step3();
	builder.step4();
	return builder.get();
	};
	}
	}

Design-Patterns-Javascript/creational/builder_pattern.js

Lines 13 to 35 in 4a24bb3

	class MealBuilder {
	constructor(pattie, side, soda) {
	this.meal = null;
	this.step1 = function () {
	this.meal = new Order();
	};
	this.step2 = function () {
	this.meal.addBurger(pattie);
	};
	this.step3 = function () {
	this.meal.addSide(side);
	};
	this.step4 = function () {
	this.meal.addSoda(soda);
	};
	this.get = function () {
	return this.meal;
	};
	}
	}

Design-Patterns-Javascript/creational/builder_pattern.js

Lines 36 to 59 in 4a24bb3

	class Order {
	constructor() {
	this.burger = null;
	this.side = null;
	this.soda = null;
	}
	addBurger(pattie) {
	this.burger = pattie;
	}
	addSide(side) {
	this.side = side;
	}
	addSoda(soda) {
	this.soda = soda;
	}
	display() {
	console.log(`Your meal has a ${this.burger}, ${this.side} on the side and a ${this.soda}`);
	}
	}

Testing

var meal = new Meal();
var mealBuilder = new MealBuilder("chicken", "curly fries", "coke");
var chickenBurgerMeal = meal.make(mealBuilder);

chickenBurgerMeal.display();

Output

Your meal has a chicken, curly fries on the side and a coke

when to use

• When complex objects are to be made.
• example, DOM elements - plenty of nodes and attributes.