Design Pattern In Javascript

What are Design Patterns?
A design pattern in software engineering is a general, reusable solution to a commonly occurring problem, such as building JavaScript web applications or designing a common computer system.

Observer Pattern: [Publisher - Subscriber]


Types of Design Patterns


Creational Design Pattern:  

1) Factory Pattern
The creational design pattern provides optimized object creation techniques. They are useful in a number of scenarios, such as when:

Multiple objects that share similar characteristics need to be created
Implementations of a class library needs to be hidden
A system should be independent of how its objects and products are created.

A common example in this category is the Factory Pattern. 
class CreateCarFactor {
  constructor() {
    this.getCarInstance = function (brand) {
      if (brand === "MARUTI") {
        return new MarutiCar();
      } else if (brand === "BMW") {
        return new BMWCar();
      }
    };
  }
}

class MarutiCar {
  message = function () {
    return "Instance of Maruti Car";
  };
}

class BMWCar {
  message = function () {
    return "Instance of BMW Car";
  };
}

let carInstance = new CreateCarFactor();
let marutiInstance = carInstance.getCarInstance("MARUTI");
console.log(marutiInstance.message());
let bmwInstance = carInstance.getCarInstance("BMW");
console.log(bmwInstance.message());


2) Singleton Pattern:

const singleton = (function () {
  let instance = null;
  function createInstanceofCar() {
    return { name: "Zeeshan", age: 30, randon: Math.floor(Math.random() * 10) };
  }
  return {
    getInstanceofCar: function () {
      if (!instance) {
        instance = createInstanceofCar();
      }
      return instance;
    },
  };
})();

const instance1 = singleton.getInstanceofCar();
console.log(instance1);
const instance2 = singleton.getInstanceofCar();
console.log(instance2);









Structural Design Pattern: The Decorator Pattern 
The Decorator Pattern is a structural pattern that allows behavior to be added to an individual object dynamically without affecting the behavior of other objects from the same class. It’s useful in applications that have many distinct objects with the same underlying code. Instead of creating all of them using different subclasses, additional functionalities can be added to the objects using the decorator pattern.


class Text {
  constructor(value) {
    this.value = value;
  }
}

function applyHeadingStyles(text) {
  text.color = "gray";
  text.size = "18px";
  return text;
}

function changeFont(text, font) {
  text.font = font;
  return text;
}

const text = new Text("Hello world.");
const heading = applyHeadingStyles(text);
const textWithFont = changeFont(text, "Arial");

console.log(heading);
console.log(textWithFont);




Architectural Design Pattern:MVC Pattern

The MVC Pattern, which stands for model-view-controller pattern, is a very popular architectural pattern for web development that we can use to organize code by splitting application functionality into components. The model component manages the application data. The view renders data on the user-facing parts of the application. The controller connects the model and view components.