Learning JavaScript Design Patterns

A Brief Note on Classes

Keep in mind that there will be patterns in this table that reference the concept of “classes.” JavaScript is a classless language; however, classes can be simulated using functions.

The most common approach to achieving this is by defining a JavaScript function in which you then create an object using the new keyword. Use this to define new properties and methods for the object as follows:

// A Car "class"
function Car( model ) {

  this.model = model;
  this.color = "silver";
  this.year  = "2012";

  this.getInfo = function () {
    return this.model + " " + this.year;
  };

}

We can then instantiate the object using the car constructor we defined above like this:

var myCar = new Car("ford");

myCar.year = "2010";

console.log( myCar.getInfo() );

For more ways to define classes using JavaScript, see Stoyan Stefanov’s useful post on them.

Let us now proceed to review the table.

Table 8-1. 

Creational	Based on the concept of creating an object	Â	Â	Â	Â	Â	Â
Class	Â	Â	Â	Â	Â	Â	Â
Factory method	Makes an instance of several derived classes based on interfaced data or events	Â	Â	Â	Â	Â	Â
Object	Â	Â	Â	Â	Â	Â	Â
Abstract factory	Creates an instance of several families of classes without detailing concrete classes	Â	Â	Â	Â	Â	Â
Builder	Separates object construction from its representation; always creates the same type of object	Â	Â	Â	Â	Â	Â
Prototype	A fully initialized instance used for copying or cloning	Â	Â	Â	Â	Â	Â
Singleton	A class with only a single instance with global access points	Â	Â	Â	Â	Â	Â
Â	Â	Â	Â	Â	Â	Â	Â
Structural	Based on the idea of building blocks of objects	Â	Â	Â	Â	Â	Â
Class	Â	Â	Â	Â	Â	Â	Â
Adapter	Matches interfaces of different classes so classes can work together despite incompatible interfaces	Â	Â	Â	Â	Â	Â
Object	Â	Â	Â	Â	Â	Â	Â
Adapter	Matches interfaces of different classes so classes can work together despite incompatible interfaces	Â	Â	Â	Â	Â	Â
Bridge	Separates an object’s interface from its implementation so the two can vary independently	Â	Â	Â	Â	Â	Â
Composite	A structure of simple and composite objects that makes the total object more than just the sum of its parts	Â	Â	Â	Â	Â	Â
Decorator	Dynamically adds alternate processing to objects	Â	Â	Â	Â	Â	Â
Facade	A single class that hides the complexity of an entire subsystem	Â	Â	Â	Â	Â	Â
Flyweight	A fine-grained instance used for efficient sharing of information that is contained elsewhere	Â	Â	Â	Â	Â	Â
Proxy	A placeholder object representing the true object	Â	Â	Â	Â	Â	Â
Â	Â	Â	Â	Â	Â	Â	Â
Behavioral	Based on the way objects play and work together	Â	Â	Â	Â	Â	Â
Class	Â	Â	Â	Â	Â	Â	Â
Interpreter	A way to include language elements in an application to match the grammar of the intended language	Â	Â	Â	Â	Â	Â
Template method	Creates the shell of an algorithm in a method, then defers the exact steps to a subclass	Â	Â	Â	Â	Â	Â
Object	Â	Â	Â	Â	Â	Â	Â
Chain of responsibility	A way of passing a request between a chain of objects to find the object that can handle the request	Â	Â	Â	Â	Â	Â
Command	A way to separate the execution of a command from its invoker	Â	Â	Â	Â	Â	Â
Iterator	Sequentially accesses the elements of a collection without knowing the inner workings of the collection	Â	Â	Â	Â	Â	Â
Mediator	Defines simplified communication between classes to prevent a group of classes from referring explicitly to each other	Â	Â	Â	Â	Â	Â
Memento	Captures an object’s internal state to be able to restore it later	Â	Â	Â	Â	Â	Â
Observer	A way of notifying change to a number of classes to ensure consistency between the classes	Â	Â	Â	Â	Â	Â
State	Alters an object’s behavior when its state changes	Â	Â	Â	Â	Â	Â
Strategy	Encapsulates an algorithm inside a class separating the selection from the implementation	Â	Â	Â	Â	Â	Â
Visitor	Adds a new operation to a class without changing the class	Â	Â	Â	Â	Â	Â