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.

3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

JavaScript: A private member variable design pattern

JavaScript does not include some of the common features of a class based language like Java or C++. Simple concepts such as private member variables are not available via in-built syntax. This can result in the global scope becoming littered with variables leading to name conflicts or variable corruption.

Raining google with HTML5′s Canvas

Following on from the Great Balls of Gravity post, I’ve used the code from the post and adjusted to animate Google’s logo.  Each letter within the famous name will free-fall from top, bounce at the base and then fall off the bottom and repeat.

HTML5 and JQuery: A simple matching game

HTML5 has exploded!  Old news I know.  Finally, it is possible to match the swish effects once reserved for Flash.  Thus, my next project was to write a simple (very simple!) game using HTML5.  On its own HTML5 is not a like-for-like replacement for Flash. It only becomes super-charged when mixed with a strong JavaScript library and some cool CSS.

Security: the Good, the Bad and the Ugly

In the physical world everyone applies basic security principles such as closing and locking doors when leaving their home.  We are, in the most, security conscious and the majority of us wouldn’t knock on the door of a con man and start a conversation.  It’s also true we have a good understanding of what  makes our world safe, such as fitting a car alarm, or, carrying a personal safety alarm.  In the digital world we seem to loose these basic instincts and brazenly click link after link, trusting that we’ll end up in a safe place.  Unfortunately, many innocent looking websites are acting for the forces of evil and it is not always obvious this is the case.

Eclipse, Java and a Rest API – An introduction

In this post I want to introduce a few real world tools and programming examples to anyone who is fed up with the hundred-and-one ‘Hello World’ examples.  More often than not, tutorials have little substance and leave students feeling that they want more.  My goal is to introduce several hot-industry topics which could help beginners on the path to becoming a software programmer.

2012 in review

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

4,329 films were submitted to the 2012 Cannes Film Festival. This blog had 27,000 views in 2012. If each view were a film, this blog would power 6 Film Festivals

Click here to see the complete report.

Should you fear QR Codes?

Would you scan it?

Quick Response (QR) Codes allow you to scan a square image which resembles a bar-code to open web pages on a compatible device.  This means retailers can direct you to their websites without you having to type a long URL.  The trend to include QR codes on advertisements within magazines is pretty standard.

Software Disconnect

The other day I attended a half-day (three hour) seminar on Practical Project Management. Although the seminar was very good the events of the day surrounding the seminar made me shake my head in disbelief. The disbelief came from my tendency to analyse and pick fault with computer systems: I am a computer programmer after all!