JavaScript Design Patterns: Facade

In our 4^th installment of the JavaScript Design Patterns Series, we’ll be taking a look at the Facade pattern. Whether you know it or not, I can almost guarantee that you’ve used the Facade pattern if you’ve been programming in any language for more than a second (that might be a bit of a hyperbole, but you’ll forgive me, right?). You can define the Facade pattern as a piece of code that simplifies a more complex interface. You can pretty much call any form of abstraction a facade. Have you ever made a named function that had more than one line of code within it? Yup, that’s technically an example of the Facade pattern.

Before we get too much further though, I want to remind you of the other members within this JavaScript Design Patterns series. It all started with the Singleton and then moved on to the Bridge pattern. The final precursor to this pattern was the Composite.

Back to Business with some Examples

Getting back on course with the Facade, I’ll be throwing some examples at you that demonstrate its intention quite well. Let’s start it off with jQuery. If you don’t know what jQuery is, then you have been living in a box and you haven’t read any of my previous posts (you should probably do that some time). jQuery and other JavaScript libraries, such as Prototype and YUI, essentially serve as a group of facades to make our lives as programmers easier. They turn complex code (usually containing some bit of feature detection to make sure they use the correct code for the browser it is being run on) and hand it to you as a single function call.

Another great example that has nothing to do with JavaScript programming is application shortcuts, such as the ones on your computer’s desktop. All you do is (double-)click it and it jumps through several levels of folder structure to open/execute a file.

JavaScript Coding Example

I know that the concept of the facade is pretty simple to grasp and that you may not necessarily need a JavaScript coding example, but there are those out there who care more about the code and understand much more easily that way. Not to mention that any JavaScript article without some code is just completely lame and should be ripped from its place on the internet.

We’ll start with a simple event listener example. Most people know that adding an event listener is not a simple ordeal unless they’re planning on having their code work on a tiny subset of browsers. You have to test multiple methods in order to make sure they’re using the right one for the browser that’s currently running the code. In this code example we just add this feature detection into a function that we call upon to run this annoying code for us:

function addEvent(element, type, func) {
    if (window.addEventListener) {
        element.addEventListener(type, func, false);
    }
    else if (window.attachEvent) {
        element.attachEvent('on'+type, func);
    }
    else {
        element['on'+type] = func;
    }
}

It’s that simple! I kinda wish all the code samples I have to write were this easy, but if that were true it wouldn’t be any fun and you wouldn’t read this site, would you? I didn’t think so. In light of that fact, I figured I’d show you something with a wee bit more complexity. Let’s just say that originally your code looked a little something like this:

var foo = document.getElementById('foo');
    foo.style.color = 'red';
    foo.style.width = '150px';

var bar = document.getElementById('bar');
    bar.style.color = 'red';
    bar.style.width = '150px';

var baz = document.getElementById('baz');
    baz.style.color = 'red';
    baz.style.width = '150px';

Lame! You’re doing the exact same thing to each one of those elements! I think there’s something we can do to make this a little easier on our parts. Maybe a little something like this:

function setStyle(elements, property, value) {
    for (var i=0, length = elements.length; i < length; i++) {
        document.getElementById(elements[i]).style[property] = value;
    }
}

// Now you can write this:
setStyle(['foo', 'bar', 'baz'], 'color', 'red');
setStyle(['foo', 'bar', 'baz'], 'width', '150px');

Do you think we’re golden? Come on! We’re JavaScript programmers! Let’s put our brains to some real use and come up with something that really shines. Maybe we can set all of the styles in one call too. Check it out:

function setStyles(elements, styles) {
    for (var i=0, length = elements.length; i < length; i++) {
        var element = document.getElementById(elements[i]);

        for (var property in styles) {
            element.style[property] = styles[property];
        }
    }
}

//Now you can just write this:
setStyles(['foo', 'bar', 'baz'], {
    color: 'red',
    width: '150px'
});

That code could actually save us a lot of time if we have a lot of elements that we want to style the same way.

Concluding the JavaScript Goodness

Well that’s about all I have for this episode of JavaScript Design Patterns. I hope you enjoyed the pleasure of my company. If you did (or didn’t) go ahead and tell me about your experiences with a comment below. Also, if you could find it in your heart to be so kind, maybe you could spread the word about this humble little blog throughout the social interwebs by using the share buttons that you’ll run into on your way down to the comments section. Seriously, that would make my day/week/month.

JavaScript Design Patterns series:

• Singleton Pattern
• Bridge Pattern
• Composite Pattern
• Facade Pattern
• Adapter Pattern
• Decorator Pattern
• Factory Pattern Part 1
• Factory Pattern Part 2
• Proxy Pattern
• Observer Pattern
• Command Pattern
• Chain of Responsibility Pattern