JavaScript Design Pattern – The Chaining Pattern

The basic theory of a chaining pattern is to call method after method of a given object without having to split the calls over several lines. Here is an example of calling several methods procedurally:

myObj.method1();

myObj.method2();

myObj.method3();
...
myObj.methodX();

And with a chaining pattern:

method1().method2().method3().methodX();

I can imagine you are asking, “What use is this? And how does it work?”. Well let us first look at a real world example. The JQuery library makes extensive use of this pattern. Take the following example for instant:

$('div').fadeOut(1800).
    fadeIn(1800).
    slideUp(800).
    slideDown(800).
    animate({height:'20px'}, 500).
    animate({width:'20px'}, 500).
    fadeOut(1800);

This implementation allows a user of JQuery to ‘chain’ together animations provided by JQuery. Very powerful! Other libraries such as ExtJS make similar use of the pattern.

To implement the chaining pattern each method must return the instance of the object being called. In other words they return the ‘this’ variable. In JavaScript ‘this’ always refers to the “owner” of the function we’re executing. Thus, this enables the next chained method to execute. A theoretical example of the above JQuery example follows:

var $ = function(selector) { 
    
    this.fadeOut = function(duration) {
        console.log('fadeOut');
        return this;
    }
    
    this.fadeIn = function(duration) {
        console.log('fadeIn');
        return this;
    }
    
    this.slideUp = function(duration) {
        console.log('slideUp');
        return this;
    }
    
    this.slideDown = function(duration) {
        console.log('slideDown');
        return this;
    }
    
    this.animate = function(style, duration) {
        console.log('animate');
        return this;
    }
    
    return this;
}

$('div').fadeOut(1800).
    fadeIn(1800).
    slideUp(800).
    slideDown(800).
    animate({height:'20px'}, 500).

This example simply prints the name of each invoked method to the console; however, it illustrates the pattern quite well.

With anything in life the pattern has advantages and disadvantages. The beauty of the pattern is that it makes the chained method read like a book: almost self documenting syntax! It is also concise and there is less to type for us busy developers. Another advantage of the pattern is that it forces us to split down our methods into smaller reusable chunks.

The disadvantages are it is harder to debug. If any of the methods within the chain fails you will only be informed that the line of code that failed is the one invoking the chain. Meaning the true error is hidden within the chained methods.

Advertisements

One thought on “JavaScript Design Pattern – The Chaining Pattern

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s