Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

JavaScript patterns simplified

4.78/5 (32 votes)
14 Oct 2014CPOL2 min read 55.4K  
Presents 4 JavaScript patterns

Introduction

JavaScript language exists since 1995 (if I am not mistaken) and it was always a language of choice for the web client-side development. The language is very simple to learn and start writing code but it's not easy to become an expert. One of the reasons is that JavaScript is a dynamic language and because of that there are multiple ways to do the same things. It's easy to write a spagetti code which makes it much harder to maintain later. 

One of the ways to make a code in any language more maintainable is to use design patterns and JavaScript is no exception. There are a lot of article describing the JavaScript patterns and I am not claiming to re-invent a wheel. I just thought it could be a good idea to list some of them in one place and provide a short explanation and an implementation.

There are 4 basic patterns in JavaScript:

  • Prototype pattern
  • Module pattern
  • Revealing Module pattern
  • Revealing Prototype pattern

Prototype pattern

  • Leverages intrinsic JavaScript functionality
  • Comprised of a constructor and a prototype
  • Provides extension capabilities
  • Properties are shared across all object instances, that includes any "private" variables.
JavaScript
// Define a class like this
function Person(name) {
   // Add object properties like this
   this.name = name;
}
// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function() {
    alert('Hi, my name is ' + this.name);
}
// Instantiate new objects with 'new'
var person = new Person('John');
// Invoke methods like this
person.speak();

Module pattern

  • Provides encapsulation of variables and functions
  • Provides a way to add visibility (public versus private) to members
  • Each object instance creates new copies of functions in memory
  • Extending objects can be difficult since no prototyping is used
JavaScript
// Define a class like this
function Person() {
    // Add methods like this.  All Person objects will be able to invoke this
    this.speak = function speak(name) {
        alert('Hi, my name is ' + name);
    }
}
// Instantiate new objects with 'new'
var person = new Person();
// Invoke methods like this
person.speak('John');

Revealing Module pattern

  • Provides encapsulation of variables and functions
  • Provides a way to add visibility (public versus private) to members
  • Cleaner way to expose public members compared to Module pattern
  • Extending objects can be difficult since no prototyping is used
JavaScript
// Define a class like this
function Person() {
    // Add methods like this. This is a private method
    var speak = function speak(name) {
        alert('Hi, my name is ' + name);
    }
    
    // Return public methods when this object is instantiated. All Person objects will be able to invoke this
    return {
        say: speak
      };
}
// Instantiate new objects with 'new'
var person = new Person();
// Invoke methods like this
person.say('John');
person.speak('John'); // undefined

Revealing Prototype pattern

  • Provides encapsulation of variables and functions
  • Combines the best parts of the Prototype pattern and the Revealing Module pattern
  • Provides a way to add visibility (public versus private) to members
  • Provides extension capabilities
// Define a class like this
function Person(name) {
   // Add object properties like this
   this.name = name;    
}
   
// Add methods like this
Person.prototype = function() {
    // Private method
    var speak = function() {
        alert('Hi, my name is ' + this.name);
    };
    // Public method
    return {
        say: speak
    };
}(); // Execute the function for the prototype to become the returned object 

// Instantiate new objects with 'new'
var person = new Person('John');
// Invoke methods like this
person.say();
person.speak(); // undefined

Hopefully, reading this will help you to write a better code which will be much easier to maintain.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)