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