Skip to content

This repository focuses mainly on the design patterns and their examples in Javascript

Notifications You must be signed in to change notification settings

Eishta/javascript-patterns

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

javascript-patterns

What is a pattern?

Design patterns are commonly used solutions to common software development problems.

Anti-pattern

Like changing the Object prototype is an anti-pattern. It will affect all the object in your code

Categories

  1. Creational design patterns
    • This patterns deal with object creation on a more optimized way than the basic object creation.
  1. Structural design patterns
    • These patterns work with relations between objects. They guarantee that if a system’s part change, nothing else has to change with it.
  1. Behavioral design patterns
    • This kind of pattern acknowledge, implement and improve communication between objects of the system.
  1. Concurrency design patterns
    • When you are dealing with multi threading programming these are the patterns that you will want to use.
  1. Architectural design patterns
    • Design patterns that are used on the system’s architecture, like MVC or MVVM.
Creational
  1. Constructor
    • allows to create objects using Classes with constructors
    • also can be created using constructor functions
    • make use of the prototype property to add the methods to be shared among all object instances
  1. Module
    • makes use of closures to encapsulate the private and public properties
    • only a public API is returned, keeping everything else within the closure private.
    • utilizes an immediately-invoked function expression where object is returned
    • makes use of import and export to use the public keys in different modules
    • The greatest utility of this pattern is to make a clear separation between the public and private parts of an object.
  1. Singleton
    • when we need only one instanse like a DB connection
  1. Prototype
    • useful way to share properties among many objects of the same type
    • Instead of creating a duplicate of the property each time, we can simply add the property to the prototype, since all instances have access to the prototype object.
    • if not found in its own prototype, it goes through the prototype chain to find the property
  1. Factory
    • function that returns a new object without using new keyword
    • this function is not a constructor nor a class
    • when we want to create multiple small objects with same config
    • these objects can be modified after creation
  1. Abstract Factory pattern
    • allows us to produce families of related objects without specifying concrete classes
    • like a factory of automobiles => car, truck, motorcycle can be created
    • we have a single function to be called to get a new object of any of these types
    • we use switch to match the type and return the object of that type of automobile
  1. Builder Pattern
    • create objects in "steps".
    • we separate the creation of properties and methods into different entities.
    • we can create an object and apply to it only the "steps" we need, which is a more flexible approach.
    • all the objects may not have all the functions attached to them
Structural
  1. Adapter
    • allows two objects with incompatible interfaces to interact with each other.
    • Example:- XML response from one API needs to be sent to API that consumes JSON, we need to adapt the XML to JSON first
  1. Decorator
    • lets you attach new behaviors to objects by placing them inside wrapper objects that contain the behaviors.
    • Like HOCs in React.js
  1. Facade
    • provides a simplified interface to a library, a framework, or any other complex set of classes.
    • like React, or MUI , or map, reduce, filter functions which use for loop under the hood.
  1. Proxy
    • pattern provides a substitute or placeholder for another object.
    • The idea is to control access to the original object, performing some kind of action before or after the request gets to the actual original object.
    • example -> middlewears, ExpressJs is used to build node js APIs
Behavioural
  1. Chain of Responsibility
    • passes requests along a chain of handlers. Each handler decides either to process the request or to pass it to the next handler in the chain.
    • render function renders the UI , another function calls and api , that data is passd to another handler to sort , and then this data is rendered on UI
  1. Iterator Pattern
    • used to traverse elements of a collection
    • for, forEach, for...of, for...in, map, reduce, filter, and so on
    • an iterator can be a function that return two functions => hasNext() and next()
  1. Observer Pattern
    • lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.
    • useEffect can be good example
How Pub Sub is different from Observer?
  1. Observer
    • Synchronous
    • Tightly coupled - subject knows the observers observing its state
  2. PubSub
    • Asynchronous behaviour
    • Pub and Sub are loosly coupled - they both are not aware about each others existance also

Releases

No releases published

Packages

No packages published