Learning JavaScript Design Patterns

We Already Use Patterns Every Day

To understand how useful patterns can be, let’s review a very simple element selection problem that the jQuery library solves for us.

Imagine that we have a script where for each DOM element found on a page with class “foo,” we wish to increment a counter. What’s the most efficient way to query for this collection of elements? Well, there are a few different ways this problem could be tackled:

• Select all of the elements in the page and then store references to them. Next, filter this collection and use regular expressions (or another means) to store only those with the class “foo.”

• Use a modern native browser feature such as querySelectorAll() to select all of the elements with the class “foo.”

• Use a native feature such as getElementsByClassName() to similarly get back the desired collection.

So, which of these options is the fastest? It’s actually the third option by a factor of 8 to 10 times the alternatives. In a real-world application, however, the third option will not work in versions of Internet Explorer below 9; thus, it’s necessary to use the first option when neither of the others is supported.

Developers using jQuery don’t have to worry about this problem, however, as it’s luckily abstracted away for us using the Facade pattern. As we’ll review in more detail later, this pattern provides a simple set of abstracted interfaces (e.g., $el.css(), $el.animate()) to several more complex underlying bodies of code. As we’ve seen, this means less time ...