DhiWise
Published in

DhiWise

Advanced Javascript Design Patterns

Overview

About Me

I am a react.js developer at DhiWise, which is a ProCode platform that helps you build clean, scalable, and customizable Node.js’(Open-source), Android(Kotlin), iOS, Laravel, Flutter and React code. Focus on what matters as a programmer and let DhiWise do the rest.

Also, If you wish to learn
- Advanced react component patterns, please find it here.
- Advanced React Roadmap, please find it here.

🚀 What are Design Patterns?

Design Patterns are the solutions to commonly occurring problems in software design. These patterns are easily re-usable and are expressive.

According to Wikipedia

Types of Design Patterns

  • Creational
  • Structural
  • Behavioral

Creational Design Patterns

Creational Design Patterns will create objects for you instead of instantiating an object directly.

According to Wikipedia

  • Factory Method
  • Abstract Factory
  • Builder
  • Prototype
  • Singleton

Factory Method
It defines an interface for creating a single object and lets child classes decide which class to instantiate.

According to Wikipedia:

Example

Let’s take an example of a point. We have a class of points and we have to create a Cartesian point and a Polar point. We will define a Point factory that will do this work

Javascript factory pattern

Now we will create Point Factory and we will use our factory now,

Abstract Factory

It creates families or groups of common objects without specifying their concrete classes.

According to Wikipedia

Example

We will be using the example of a Drink and Drink making machine.

Making Drink Factory

Builder

It constructs complex objects from simple objects.

According to Wikipedia

Example

We will be using ab example of a person class that stores a Person’s information.

Now we will create Person Builder, Person Job Builder, and Person Address Builder.

Javascript class factory pattern

Now we will use our builder,

Javascript factory pattern

Prototype

It creates new objects from the existing objects.

According to Wikipedia

Example

We will be using the example of a car.

Object prototype class

Singleton

It ensures that there’s only one object created for a particular class.

According to Wikipedia

Example

Creating a Singleton class,

Javascript singleton class pattern

Structural Design Patterns

These patterns concern class and object composition. They use inheritance to compose interfaces.

According to Wikipedia

  • Adapter
  • Bridge
  • Composite
  • Decorator
  • Facade
  • Flyweight
  • Proxy

Adapter

This pattern allows classes with incompatible interfaces to work together by wrapping their own interface around existing class

According to Wikipedia

Example

We are using an example of a calculator. Calculator1 is an old interface and Calculator2 is a new interface. We will be building an adapter that will wrap up the new interface and will give us results using its new methods,

Javascript adapter pattern

Bridge

It separates the abstraction from the implementation so that the two can vary independently.

According to Wikipedia

Example

We will be creating Renderer classes for rendering multiple shapes,

Javascript Bridge structural design pattern

Composite

It composes objects so that they can be manipulated as single objects.

According to Wikipedia

Example

We will be using job examples,

Composite class pattern

Decorator

It dynamically adds or overrides the behavior of an object.

According to Wikipedia

Example

We will be taking the example of color and shapes. If we have to draw a circle we will create methods and will draw a circle. If we have to draw a red circle. Now the behavior is added to an object and the Decorator pattern will help me in that.

Javascript decorator pattern

Facade

It provides a simplified interface to complex code.

According to Wikipedia

Example

Let’s take an example of a client interacts with the computer.

Javascript facade pattern

Flyweight

It reduces the memory cost of creating similar objects.

According to Wikipedia

Example

Let’s take the example of a user. Let’s have multiple users with the same name. We can save our memory by storing a name and give it a reference to the users having the same names.

Flyweight for reducing memory in javascript

That’s how we will use this.
Now we will make memory comparsion without Flyweight and with Flyweight, by making 10k users.

Flayweight pattern example

Proxy

By using Proxy, a class can represent the functionality of another class.

According to Wikipedia

Example

Let’s take the example of value proxy.

Proxy class pattern

Behavioral Design Patterns

Behavioral Design Patterns are specifically concerned with communication between objects.

According to Wikipedia

  • Chain of Responsibility
  • Command
  • Iterator
  • Mediator
  • Memento
  • Observer
  • Visitor
  • Strategy
  • State
  • Template Method

Chain of Responsibility

It creates a chain of objects. Starting from a point, it stops until it finds a certain condition.

According to Wikipedia

Example

We will be using an example of a game having a creature. The creature will increase its defense and attack when it reaches a certain point. It will create a chain and attack and defense will increase and decrease.

Chain of Responsibility

Increase attack,

Increase defense

That’s how we will use this,

Command

It creates objects which encapsulate actions in objects.

According to Wikipedia

Example

We will be taking a simple example of a bank account in which we give a command if we have to deposit or withdraw a certain amount of money.

Creating our commands,

That’s how we will use this,

Iterator

Iterator accesses the elements of an object without exposing its underlying representation.

According to Wikipedia

Example

We will be taking an example of an array in which we print the values of an array and then by using an iterator we print its value backwords.

That’s how we will use this,

Mediator

The mediator pattern adds a third-party object to control the interaction between two objects. It allows loose coupling between classes by being the only class that has detailed knowledge of their methods.

According to Wikipedia

Example

We will be using an example of a person using a chat room. Here, a chatroom acts as a mediator between two people communicating.

Creating chat room,

That’s how we will use this,

Memento

Memento restores an object to its previous state.

According to Wikipedia

Example

We will be taking an example of a bank account in which we store our previous state and will have the functionality of undoing.

Observer

It allows a number of observer objects to see an event.

According to Wikipedia

Example

We will be taking an example of a person in which if a person falls ill, it will display a notification.

That’s how we will use this,

Visitor

It adds operations to objects without having to modify them.

According to Wikipedia

Example

We will be taking an example of NumberExpression in which it gives us the result of the given expression.

Strategy

It allows one of the algorithms to be selected in certain situations.

According to Wikipedia

Example

We will take an example in which we have a text processor that will display data based on strategy(HTML or Markdown).

Creating TextProcessor class,

That’s how we will use this,

State

It alters the behavior of an object when its internal state changes.

According to Wikipedia

Example

We will be taking an example of a light switch in which if we turn on or off the switch, its state changes.

Let’s create a Switch class to use these On/Off state

Template Method

It defines the skeleton of an algorithm as an abstract class, that how should it be performed.

According to Wikipedia

Example

We will be taking an example of a chess game,

Creating our chess class,

That’s how we will use this,

Overview

As we have seen all these patterns are widely used all over big organizations. Hope you might find it useful in your own adventurous project.

Reference

Design Patterns in JavaScript on Udemy by Dmitri Nesteruk.

--

--

DhiWise enables developers to build web and mobile apps rapidly, with an intelligent platform. It combines people, technology and data in a single workflow. It helps companies solve the problem of resource scarcity by optimizing business resources with limited teams.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store