Design Patterns in JavaScript

Lets look into constructing few of the common design patterns in JavaScript by using Object Oriented Code. We will be discussing one pattern from each of the three common types - Creational - Singleton, Behavioral - Observer and Structural - Decorator pattern. Before getting to code, lets see what is a Design Pattern.

What is a Design Pattern ?

A design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code but a description or template for how to solve a problem that can be used in many different situations. [Source : Wikipedia]

Singleton Pattern

Singleton pattern is a design pattern that restricts the instantiation of a class to one object. We may need to do this to make sure there is only one resource on which any action is taking place. For example, a Logger class - here we will always want every thread/process to write things in a single log file and without any over-writing. Another example would be publishing scores in a game. So how to go about creating a class for this particular requirement. Here is my take -

The code above looks clean and simple. All we are doing is making sure whichever way we create the object, It will always point to a single instance.

Observer Pattern

Observer pattern is a design pattern in which an object, called the Observer, maintains a list of its dependents, called Subscribers, and notifies them automatically of any state changes, usually by calling one of their methods. This pattern is very useful and is basically the creme logic behind an MVC Pattern where the view represents Subscriber and Model represents Observable. There are tons of other applications and a simple google on it will enlist all. Lets dive into writing the code -

We have a class named Observable which maintains a list of Subscribers. In Observable Prototype, we have simple functions to Subscribe, Unsubscribe, Publish and ShowSubscribers. I do not think more description is required to explain each as the code is pretty simple, shoot me an Email if you want this to be explained. Here is the output of the above code -

Subscriber Tony Registered.
Subscriber Anthony Registered.
Subscriber Martial Registered.
Tony received the message - Stock Price gets Cheap
Anthony received the message - Stock Price gets Cheap
Martial received the message - Stock Price gets Cheap
Subscriber - 1 : Name is - Tony
Subscriber - 2 : Name is - Anthony
Subscriber - 3 : Name is - Martial
Subscriber Anthony UnRegistered.
Tony received the message - Stock Price gets Higher
Martial received the message - Stock Price gets Higher

Decorator Pattern

Decorator pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class. This pattern is part of Structural Design Patterns and it is very easy to understand what actually is happening because we deal with extension of classes all the time. Specifically Decorator creates a class that extends a particular feature and adds extra information to it. Examples of this pattern involve GUI Libraries, that require addition of components almost every time. Here is a simple example of Pizza -

Here, a decorator function is available that gives the option of adding cheese to pizza. Once added, the price changes dynamically. Here is the output -

Initial Price of Pizza - 10
After Adding Extra Cheese, New Price of Pizza - 11

That is it folks. Will be back with more interesting articles. In the mean time, please EMAIL to send your feedback.