Understanding JavaScript’s 3 Most Basic Design Patterns

Design patterns are software solutions that can be used over and over again to solve a specific type of problem frequently encountered when developing software applications. As a developer, you need to keep updated with all the available design patterns out there and you JavaScript bookmust have basic understanding on when to apply them.

Types of design patterns

Design patterns are grouped into several categories. Explained below, with examples, are the 3 most important types of design patterns:

1. Creational Design Patterns – focus on the different ways of creating objects and classes.

Example: Builder Pattern – allows you to construct objects without the need to explicitly create them; you only have to specify the type and the content of the object that you are creating. See the jQuery code snippet below:

var sampleDiv = $('<div id="sampleDiv">This is a div</div>');
 //a DOM node is now being referenced by the sampleDiv jQuery object
var sampleText = $('<p/>');
 //the HTML ParagraphElement is now being referenced by the sampleText JQuery object
var sampleInput = $('<sampleInput />');

The result of the 3 lines of code above is a jQuery object referencing a DOM element.

By using the builder pattern, you will be able to focus on the type and content of the object that you’re creating instead of spending time to explicitly create it.

2. Structural Design Patterns – focus on the different ways of managing relationships between objects for an application to be architected in a scalable way. These patterns ensure that a change or update in one part of an application is independent and does not affect other parts.

Example: Facade Pattern – provides browser incompatibility solutions while providing users with a simple interface to use. The ready() method is one of the more popular JavaScript library method implementing the Facade pattern.

$(document).ready(function() {
//code goes here });

Other methods implemented using Facade include animate() and css().

3. Behavioral Design Patterns – All object-oriented software systems will involve communication between objects. The purpose of Behavioral Patterns is to provide different ways of organizing this communication.

Example: Observer Pattern – works with a subject and an observer

• subject has several observers interested in its lifecycle
• a subject updates or does something interesting, a notification is sent to all of its observers
• If an observer does not find the update interesting or is no longer interested with future updates, it can then remove itself from the list of observers

Here are 3 methods, supported by most JavaScript libraries, to further describe the pattern:

publish(data): called everytime the subjetc has a notification to be sent
• subscribe(observer): called everyitme the subject wants to add another observer to its current list of observers
• unsubscribe(observer): called everytime the subject wants to remove an observer from its current list of observers
var observer = $({});

$.subscribe = observer.on.bind(observer);
 $.unsubscribe = observer.off.bind(observer);
 $.publish = observer.trigger.bind(observer);
//usage
 document.on( 'tweetsReceived', function(tweets)){
//code for performing actions and firing an event goes here
 $.publish('tweetShow', tweets);
 });
//subsribing to the event created above
 $.subscribe('tweetsShow', function() {
                //code to display the tweets
//publish the action after they're  shown
 $.publish('tweetsDisplayed');
 });
$.subscribe('tweetsDisplayed, function() {
 });

The great thing about using design patterns is that other developers have already applied them successfully in the past, plus they are event-based so JavaScript can easily adopt them.

Image by Flickr

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.


Comments are closed.