d'bug shares Web development advice, including CSS, JavaScript, PHP, Java, .NET and Ruby on Rails tips and tricks.

The facade design pattern in JavaScript

• Posted by Brian
• Posted on December 22nd, 2008
• View Comments

I started to think about design patterns recently while working on a big project. I realized I could probably benefit from one or more of these patterns as the complexity of the client-side portion of my application began to grow. After a little investigation I stumbled across the facade design pattern. This pattern promotes readability by grouping common tasks, and it can simplify a complex API by providing a single point of access. Especially with JavaScript it can help to reduce the size of the code base.

Accessing objects directly

When an event occurs in a Web application, like clicking a button, several actions may need to happen in succession. Usually these actions involve gaining direct access to a few different objects and their methods and properties, and depending on the event, the behavior of those objects may need to change. If the objects exist within an API, then that means every developer needs to learn the nuances of each object in order to extend the application. The following diagram helps to illustrate the point.

Accessing objects through the facade

In the previous example there is only one level of objects, and two events that use them, but in reality there might be dozens of objects and numerous events. If the events share some common functionality, then it makes sense to group that into a single implementation. The grouping is what is known as your facade. The facade sits between your events and objects, and it masks the details of the operation, distributing responsibilities to the objects appropriately.

In more complex examples it even returns values back through to the event call, as well as taking in arguments to use as method parameters. Only the architect who creates the facade will need to know the underlying objects that are utilized, while other programmers are free to use the simplified “interface”. The following diagram helps to illustrate the point.

Creating the facade

Creating a facade is fairly straightforward, and it is a great pattern to implement when refactoring code in order to gain a boost in performance. Remember, if you can find common tasks that are shared between events, then the facade is a great place to start. One of the better code abstracts I have read (written in Java), was from Wikipedia. It helps to visualize the concept in another language first before giving it a try in JavaScript.

The following example is an abstract that also uses the module pattern. The objects are labeled explicitly so that you can better spot the facade.

var DBUG = function() {
	_private = {
		getThis : function( count ) {
			/* ... implementation ... */
		},
		putThis : function() {
			/* ... implementation ... */
		},
		runThis : function() {
			/* ... implementation ... */
		}
	};
	return {
		facade : function( args ) {
			_private.getThis( args.count );
			_private.putThis();
			if ( args.runIt ) {
				_private.runThis();
			}
		}
	}
}();

window.onload = function() {
	DBUG.facade({
		runIt : true,
		count : 1
	});
	DBUG.facade({
		runIt : false,
		count : 2
	});
}

As I mentioned, this is really an abstract, but I think it aptly demonstrates the benefits of using a facade with JavaScript. I only used the window.onload event as an example, and you would likely have several events calling the same facade. In this example you can pass in arguments, which can be used for conditions that delegate specific behavior.

As you build any Web application that continues to grow, and objects are added to the namespace, think about how the facade design pattern can help you simplify the implementation. If you want to read more about patterns, check out Pro JavaScript Design Patterns, Head First Design Patterns and Design Patterns: Elements of Reusable Object-Oriented Software.

Tags: facade design pattern, JavaScript