Show Menu
Cheatography

Design Pattern Examples Cheat Sheet by

Examples for implementing SOLID and other design patterns with JavaScript.

Abstract Factory

function ClassFactory() {
   this.type = 'class'
   this.logType = function () {
      console.log('Type', this.type)
   }
}

function WarriorClass() {
   ClassFactory.call(this)
   this.subtype = 'warrior'
   this.logSubtype = function () {
      console.log('Subtype', this.subtype)
   }
}

function WizardClass() {
   ClassFactory.call(this)
   this.subtype = 'wizard'
   this.logSubtype = function () {
      console.log('Subtype', this.subtype)
   }
}

const $warrior = new WarriorClass()
$warrior.logType()
$warrior.logSubtype()
Type class
Subtype warrior

Dynamic Function From String

global.runFoo = function runFoo() {
   if (arguments.length) {
      let args = []
      for (let i = 0; i < arguments.length; i++) {
         args.push(arguments[i])
      }
      console.log(
executed runFoo(${args.join()})
)    } else {       console.log('executed runFoo()')    } } const fn = 'runFoo' const fnParams = [1,2,3] global[fn]() globalfn
executed runFoo()
executed runFoo­(1,2,3)

Functional Interface (Interface Segreg­ation)

global.oven = function Oven() {
   this.on = false
   this.turnOn = function () {
      this.on = true
   }
   this.turnOff = function () {
      this.on = false
   }
   this.cook = function (item) {
      console.log(
Cooking ${item} in the oven
)    } } // function Stove() { // ES6 global.stove = function Stove() {    this.on = false    this.turnOn = function () {       this.on = true    }    this.turnOff = function () {       this.on = false    }    this.cook = function (item) {       console.log(
Cooking ${item} in the stove
)    } } function ICooker(cooker) {    // let fn = window[cooker]; // ES6    let fn = global[cooker] // Node.js    return new fn() } function Restaurant(name, cooker) {    this.name = name    this.cooker = new ICooker(cooker)    this.cook = function (item) {       this.cooker.turnOn()       this.cooker.cook(item)       this.cooker.turnOff()    } } const cookerTypes = {    OVEN: 'oven',    STOVE: 'stove', } const bakery = new Restaurant('Bakery', cookerTypes.OVEN) bakery.cook('cookies') const crepery = new Restaurant('Crepery', cookerTypes.STOVE) crepery.cook('crepes')
Cooking cookies in the oven
Cooking crepes in the stove
 

Functional Constr­uctor

function Robot(name, job) {
   this.name = name
   this.job = job
   this.introduce = function () {
      console.log(
Name ${this.name}
)       console.log(
Job ${this.job}
)    } } const walle = new Robot('Wall-E', 'clean') console.log(walle instanceof Robot) walle.introduce()
true
Name Wall-E
Job clean

Functional Inheri­tance (Liskov Substi­tution)

const Scientist = {
   init: function (name) {
      this.name = name
   },

   run_experiment: function () {
      console.log(
${this.name} is running experiment
)    }, } const MadScientist = {    ...Scientist,    run_experiment: function () {       const sabotage = !!Math.floor(Math.random() * 2)       if (sabotage) {          console.log(
${this.name} is sabotaging experiment!
)       } else {          console.log(
${this.name} is running experiment
)       }    }, } const neil = Object.create(Scientist) neil.init('Neil') const hubert = Object.create(MadScientist) hubert.init('Hubert') neil.run_experiment() hubert.run_experiment()
Neil will always return "Neil is running experi­men­t"
Hubert will possibly return "­Hubert is running experi­men­t" or "­Hubert is sabatoging experi­men­t!"

Open/Close Principle

function announce(collection) {
   console.log(collection.description)

   collection.logItems()
}

var favoriteCities = {
   items: {
      Denmark: 'Copenhagen',
      Uganda: 'Kampala',
      Uraguay: 'Montevideo',
   },

   description: 'My favorite cities around the world:',

   logItems: function () {
      Object.keys(this.items).forEach(function (key) {
         console.log(this.items[key])
      }, this)
   },
}

announce(favoriteCities)
My favorite cities around the world:
Copenhagen
Kampala
Montevideo
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Object Oriented Rules Cheat Sheet
          SOLID for Unity Cheat Sheet
          OOP key terms and principles Cheat Sheet