Structuring JavaScript Code by Dan Wahlin

This course is similar to JavaScript Design Patterns in so far as it is all about design patterns in JavaScript, however this course covers the design patterns aimed at improving the structure of your code, rather than implementing any specific feature. I found this course easier to understand than Aaron’s course, even when watching it at a higher speed. I am not sure why, but perhaps the design patterns covered here are simpler.

A great companion to these courses is Learning JavaScript Design Patterns by Addy Osmani. This book is available free online, so I will include the links relevant to each pattern below.

Why do we need JavaScript patterns

This module begins by talking about spaghetti code and naming conflicts that arise from spaghetti code.

Then Dan introduces closures and how they provide encapsulation. He gives a simple easy to understand date.milliseconds example.

Also covered is different ways to define variables

Prototype pattern

Prototype is a built-in part of JavaScript. Dan shows how to use this to create a calculator, and also explains how to create the equivalent of namespaces to keep objects out of the global scope.

Addy Osmani: Prototype Pattern

Module pattern

The module pattern “modularizes” your code, removes variables and functions from the global scope, and hides private members.

Dan explains that there are some disadvantages: potentially high memory usage (duplicated objects), difficulty in extending it, and greater difficulty with debugging.

Dan uses the same calculator example for the demo, so that you can compare the prototype and module patterns in a like for like way.

Addy Osmani: Module Patttern

Revealing Module pattern

Dan says that the main difference between the module pattern and the revealing module pattern is the way to expose public members is a little bit “cleaner”. Dan prefers this pattern. It has the same disadvantages that the module pattern has.

Again, the demo creates a calculator, but Dan also shows an example of using this pattern when creating a population chart using the HTML5 Canvas object.

Addy Osmani: Revealing Module Pattern

Revealing Prototype pattern

The revealing prototype is a combination of the revealing module pattern and the prototype pattern, providing the benefits of both.

It still has some of the disadvantages of the prototype pattern, but Dan shows a few tips for effectively using the ‘this’ keyword. In JavaScript, when a function calls a function, the this keyword changes context, which is something that trips up quite a lot of Java and C# developers.

Dan shows a couple of different techniques, and likes using the prototype call method

This pattern is not included in Addy Osmani’s book, but you can read more about it on Dan’s blog: Revealing Prototype Pattern – Techniques, Strategies and Patterns for Structuring JavaScript Code – make sure you also read the comments section for the tip on using the call method

Recommended speeds:

Experienced amateurs – 1.5x
Pros – 1.8-2.0x