0%

javascript-design-pattern

Creational Design Patterns

Factory Method

Define an interface for creating an object, but let subclasses decide which class to instantiate. Lets a class defer instantiation to subclasses.

Abstract Factory

Provides an interface for creating families of related or dependent objects without specifying their concrete class.

Builder

Separate the construction of a complex object from its representing so that the same construction process can create different representations.

Prototype

Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype.

Singleton

Ensure a class only has one instance and provide a global point of access to it. implementation

Application scenarios:

  1. Logging: Singleton can be used to create a single log object that writes to a log file. This object can be used across the application without creating additional instances.

  2. Database Connections: Singleton can be used to create a single database connection that is shared across the application. This can help to prevent an over-allocation of resources.

  3. Configuration Settings: If your application has a set of configuration settings that need to be accessed in multiple places, a Singleton can be used to store these settings in one location.

  4. Caching: Singleton can be used to create a cache that is accessible throughout the application. This can be useful for storing data that is expensive or time-consuming to fetch.

  5. Shared Resource Access: If your application needs to control access to a shared resource, such as a printer or a file, you can use a Singleton to ensure that only one object is able to access the resource at a time.

Structural Design Patterns

Adapter

Convert the interface of a class into another interface clients expect. Lets classes work together that couldn’t otherwise because of incompatible interfaces. implementation

Bridge

Decouple an abstraction from its implementation so that the two can vary independently.

Composite

Compose objects into tree structures to represent part-whole hierarchies. Lets clients treat individual objects and compositions of objects uniformly.

Decorator

Attach additional responsibilities to an object dynamically. Provide a flexible alternative to extending functionality.

Facade

Provide unified interface to a set of interfaces in a subsystem. Defines a high-level interface that makes the subsystem easier to use.

Flyweight

Using sharing to support large numbers of fine grained objects efficiently.

Proxy

Provide a surrogate or placeholder for another object to control access to it.

Behavioral Design Patterns

Chain of Responsibility

Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chian the receiving objects and pass the request along the chain until an object handles it.

Command

Encapsulate a request as an object, thereby letting you parameterize clients with queues, queue or log requests, ans support undoable operations.

Interpreter

Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language.

Iterator

Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation.

Mediator

Define an object that encapsulates how a set of objects interact. Promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently.

Memento

Without violating encapsulation, capture and externalize an object’s internal state so that the object can be restored to this state later.

Observer

Define a one-to-many dependency between objects so that when on object changes state, all its dependents are notified and updated automatically.(Also known as Publish/Subscribe or Event-Subscriber pattern)
implementation

Application scenarios

  1. Event Handling: This is the most common use case in JavaScript. DOM events like clicks, key presses, form submissions etc., are handled using the Observer pattern.

  2. Model-View-Controller (MVC) Architecture: In MVC architecture, the model notifies the view and the controller about changes in the data. This is done using the Observer pattern.

  3. Web Sockets: Web sockets use the Observer pattern to listen for new messages from the server and update the UI accordingly.

  4. React/Redux: In Redux, the store is the subject and the React components are the observers. When the state in the store changes, the components are notified to re-render.

  5. Angular: Angular uses the Observer pattern in its event system and its HTTP module.

State

Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.

Strategy

Define a family of algorithms, encapsulate each one, and make them interchangeable. Lets the algorithm vary independently from clients that use it. implementation

Template Method

Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. Lets subclasses redefine certain steps of an algorithm without changing the algorithm’s structure.

Visitor

Represent an operation to be performed on the elements of an object structure. Lets ou define a new operation without changing the classes of the elements on which it operates.