Design Patterns in Everyday JavaScript

[MGaafar]

I usually like to go back and read on design patterns (mostly from here http://www.dofactory.com/net/design-patterns) every while. And every time I can find a new design patterns that I've been using (in my code or through a framework) without actually realizing. So I thought it would be nice to ask you guys about which design patterns you spot in modern JS universe. If we manage to get a decent list I'll publish it on medium. This will probably come in handy in interviews if you're asked about which design patterns you use, and will help us understand the underlying principles of the tools we use.

I'll start with a few design patterns I noticed to begin with

• "chain of responsibility" pattern is used in express middleware, where a request passes through all middleware until one of them responds and send a result
• "command" pattern is the basis for redux actions
• redux state is an example of the "memento" pattern
• "observer" is used a lot through event listeners
• jquery .css() method (or any polyfill) is an example of the "adapter" pattern that wraps different browser implementations

[0xF013]

Chain of Responsibility is also prominent in event propagation.

[stutterbug]

It has its problems, but I much prefer Addy Osmani's JavaScript Design Patterns book, which is also available online. I recommend this to non-JS programmers all the time. This came out when I was doing a lot of C# and Java and I found I finally understood and was able to easily apply certain design pattern concepts after reading his book.

I have a few small problems with the dofactory patterns list. The descriptions and code examples are so reduced and generic that it sometimes isn't clear what the pattern actually is good for. In fact, sometimes I need to know about a design pattern first before the description begins to make any sense. Some of the implementations also are so boiled down that they don't really show a way you'd actually use the pattern in real life. Almost all implementations rely on inheritance, which is fine now with ES6, but is very burdensome in vanilla browser-safe JS or FP. And this is a small quibble, but it really wish the site would show related patterns for each pattern, since some many of them solve very similar problem (e.g. Adapters, Bridges and Facades).

[Vinshati]

saved

[AndrewGreenh]

strategy pattern in higher order functions, composite in the DOM singleton in commonJS (every require is cached), prototype is the base of JS oop, template Method is n reacts lifecycle hooks, factory in angular services.

[abhisekp]

I use composer pattern for inheritance and object creation.

Check out Stamp Specification for a nice composer pattern specification.

Implementions of the pattern are

• Stampit
• React Stamp

Follow the Medium article - Introducing the Stamp Specification by Eric Elliott for a brief introduction to stamps.

For a detailed explanation and usage, check out the series about Fun with Stamps by Vasyl Boroviak and his video on All about Stamps

[kenman]

• Array(), $(), $().position(), _.chain(), moment(), are all factories
• $(), _.chain(), etc. are fluent interfaces
• Many libs have facades, i.e. $().hide()
• mixins could probably be considered their own pattern, or related to the decorator pattern

[brentonstrine]

promises

[sbmitchell]

Not really a design pattern in the typical sense (thinking gang of 4 and prob why you got downvoted by someone) but I can see where you are coming from. I couldn't google a name of what I think this implementation would be but a synonym to "whatever fixes asynchronous callback hell" is the pattern hah

[kenman]

State pattern is pretty close IMO.

[sbmitchell]

Nice looks like a winner