JavaScript Design Patterns: Observer

Table of Contents

Observer is one of the most popular design patterns and chances are you’re probably already using it. If you’ve ever written an event listener with addEventListener or used one of jQuery’s many versions: on, delegate, live, click, etc… then you should already be comfortable with the concept. In a nutshell the Observer pattern allows a Subject to publish updates to a group of Observers. The Subject maintains a list of Observers and provides an interface for objects to register as Observers. Otherwise the Subject doesn’t care who or what is listening to it. In this way the Subject is decoupled from the Observers allowing easy replacement of one Observer for another or even one Subject for another so long as it maintains the same lexicon of events/notifications.

JavaScript Design Patterns: Iterator

Table of Contents

If you’re coming from Ruby or Java you probably think of an Iterator as an object which gives you a consistent interface for traversing a collection of some kind. If you’re coming from JavaScript or Actionscript you probably just think of an iterator as the i value in a for loop. The term has mixed meanings but in this case we’re refering to the former, an object which gives us a consistent interface for iterating over a collection of some kind. If you’ve never used them before that might seem kind of silly. “If I need to loop over something I’m just going to loop over it!” For many use cases that’s totally fine. Where Iterator objects are useful is in situations where you might need to loop in an async fashion (stopping and restarting) or if you want to preclude an object from knowing too much about the inner workings of a collection.

JavaScript Design Patterns: Singleton

Table of Contents

Ah yes the Singleton, a pattern whose name lives in infamy. For the uninitiated a little explanation is in order. A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and in this way one can ensure that they don’t accidentally create, say, two Users in a single User application. Doesn’t sound too bad, right? Well, if you’re responsible then it arguably is OK but there are many caveats. Before I get into those though, let’s throw in the formal definition a la the Gang of Four.

JavaScript Design Patterns: Strategy

Table of Contents

The Strategy pattern is one of my personal favorites and you’ve probably seen or used it in some fashion without even knowing it. Its primary purpose is to help you separate the parts of an object which are subject to change from the rest of the static bits. Using Strategy objects versus subclasses can often result in much more flexible code since you’re creating a suite of easily swappable algorithms.

JavaScript Design Patterns: Table of Contents

Creational

  • Abstract Factory
  • Builder
  • Factory Method
  • Object Pool
  • Prototype
  • Singleton

Structural

  • Adapter
  • Bridge
  • Composite
  • Decorator
  • Facade
  • Flyweight
  • Private Class Data
  • Proxy

Behavioral

  • Chain of Responsibility
  • Command
  • Interpreter
  • Iterator
  • Mediator
  • Memento
  • Null Object
  • Observer
  • State
  • Strategy
  • Template Method
  • Visitor
  • Monad Pattern / Promises

I’ve been trying to think up a new chain since coming back from Europe but nothing was enticing me. Then a few days ago I had a conversation with one of my friends in which we discussed using Promises in JavaScript. And later on we discussed Builders. I was doing my best to explain the two but really wished that I had a resource where I could just show some simple code examples. It occurred to me that I’ve always wanted to go through the Gang of Four book and just write my own interpretation of each pattern. Since I’m currently working primarily in JavaScript I thought it might be an interesting challenge to convert their examples, often in strongly typed languages, to something as dynamic and loosey-goosey as JS.

Ending My First Chain

On April 28th, I vowed to write a blog post a day until I had to go to Europe. Of course the real threat was that if I failed to do so I would have to give 500 dollars to the Republican party, most likely to John Boehner. In my original post I said I would write till the 27th but I’ve moved that date up so I can spend tomorrow night packing and wrapping things up in the city before I head out on my trip. So tonight’s post will mark the end of my first chain which means it’s time for a little post-mortem.