Examples of practical javascript object oriented design patterns

The following are three popular JavaScript patterns. These happen to be easily implementable because of closures:

• The Module Pattern - Example (and made popular) by Eric Miraglia
• Memoization - Example by Oliver Steele
• Currying - Example by Dustin Diaz

You may also want to check out:

• Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz

The following is a Google I/O talk from 2008 presented by Diaz, where he discusses some topics from his book:

• Google I/O 2008 - Design Patterns in an Expressive Language

Inheritance

I use a notation for inheritance that is based on ExtJS 3, which I find works pretty close to emulating classical inheritance in Java. It basically runs as follows:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

Namespaces

I also agree with Eric Miraglia on sticking to namespaces so the code above should be run within its own context outside the window object, this is critical if you intend your code to run as one of many concurrent frameworks / libraries executing in the browser window.

This means that the only way to the window object is via your own namespace / module object:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

Interfaces

You can also make use of more advances OOP constructs such as interfaces to enhance your application design. My approach to these is to enhance the Function.prototype in order to get a notation along these lines:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

OO Patterns

As for 'Patterns' in the Java sense, I've only found use for the Singleton pattern (great for caching) and the Observer pattern for event-driven functionality such as assigning some actions when a user clicks on a button.

An example of utilising the Observer Pattern would be:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

And thats just a couple of tricks in my bag of OO JS, hope they are useful to you.

I recommend if you intend to go down this road that you read Douglas Crockfords Javascript: the Good Parts. Its a brilliant book for this stuff.

I am a fan of the Module Pattern. It's a way of implementing extensible, non-dependent (most of the time) frameworks.

Example:

The framework, Q, is defined like this:

var Q = {};

To add a function:

Q.test = function(){};

These two lines of code are used together to form modules. The idea behind modules is that they all extend some base framework, in this case Q, but are not reliant on each other (if designed correctly) and can be included in any order.

In a module, you first create the framework object if it does not exist (which is an example of the Singleton pattern):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

That way, you can have multiple modules (like the one above) in separate files, and include them in any order. Any one of them will create the framework object, and then extend it. No manual need to check if the framework exists. Then, to check if a module/function exists in custom code:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

The singleton pattern is often very helpful for 'encapsulation' and organization stuff. You can even change accesibility.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

cleanest way to implement a singleton in javascript

I really like jquery's method chaining pattern, allowing you to call several methods on one object. It makes it really easy to perform several operations in a single line of code.

Example:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});