Design Patterns

Common

Creational Design Patterns

• Constructor

• Factory

• Singleton

• Builder

• Prototype

• Abstract

Structural Design Patterns

• Decorator

• Facade

• Flyweight

• Adapter

• Proxy

Behavioral Design Patterns

• Iterator

• Mediator

• Observer

• Visitor

Front-end specific

Module Pattern

• Object literal notation

• The Module pattern

• AMD modules

Creational Design Patterns

Constructor Pattern

Factory Pattern

use cases:

class ToyFactory {
    createToy({toyType,color,price}){
        switch(toyType){
            case 'car':
                return new ToyCar(color,price);
            case 'duck':
                return new ToyDuck(color,price);
        }
    }
}

class ToyDuck{
    constructor(color,price){
       this.color=color;
       this.price = price;
    }
}

class ToyCar {
   constructor(color,price){
       this.color=color;
       this.price = price;
    }
}

Singleton Pattern

use cases:

• Services: Services are single instances that store state, configuration, and resources. It's logical to have only one instance of a service in an application.

• Configurations: If there's an object with a specific configuration, there's no need for a new instance every time it's needed.

• Databases: Databases like MongoDB use the singleton pattern for connections.

class Configuration{
    static configure = null;
    constructor(config){
        this.endPoint = config.endPoint;
        this.retryStrategy = config.retryStrategy;
    }
    static getConfiguration(config){
        if (!Configuration.configure) {
            Configuration.configure = new Configuration(config)
            }
            return Configuration.configure;
    }
}

The Difference Between a Static Instance of a Class and a Singleton

Builder Pattern

use cases:

• Create complex objects: DOM where you may need to create a large number of nodes and attributes.

Prototype Pattern

var plane = {
    takeOff(){
        console.log("Start taking off")
        },
    landing(){
        console.log("Start landing")
    },
} 

const plane1 = Object.create(plane, {color :{value: "red"}});
plane1.takeOff();
plane1.landing();

const plane2 = Object.create(plane, {color :{value: "blue"}});
plane2.takeOff();
plane2.landing();

console.log(plane1.__proto__ === plane2.__proto__ && plane2.__proto__ === plane)

Structural Design Patterns

Decorator Pattern

use cases:

// The constructor to decorate
function MacBook() {
	this.cost = function () { return 997; };
	this.screenSize = function () { return 11.6; }; 
}
// Decorator 1
function Memory( macbook ) {
	var v = macbook.cost(); 
	macbook.cost = function() {
		return v + 75; };
}
// Decorator 2
function Engraving( macbook ){
	var v = macbook.cost(); 
	macbook.cost = function(){
		return v + 200; };
}
// Decorator 3
function Insurance( macbook ){
	var v = macbook.cost(); 
	macbook.cost = function(){
		return v + 250; };
}

var mb = new MacBook(); 
Memory( mb ); 
Engraving( mb ); 
Insurance( mb );

// Outputs: 1522
console.log( mb.cost() ); 
// Outputs: 11.6
console.log( mb.screenSize() );

Mainly it can replace the situation when we need to create subclass to add a method or properties to the base class.

Facade Pattern

use cases:

• Online shopping system: only expose a simple api, but the system actucally need to invoke the inventry, notification, payment systems internally.

Adapter Pattern

use cases:

// old interface
class TruthAndDare {
  constructor(){
    this.turn = Math.floor(Math.random() * 2) + 1;
  }
  Getturn(){
    if(this.turn == 1){
      this.turn = 2
    }else{
      this.turn = 1
    }
    return this.turn
  }
  playGame(playerOnename,playerTwoname){
    if(this.Getturn() == 1){
      return`${playerOnename}'s turn`
    }else{
      return `${playerTwoname}'s turn`
    }
  }
}

// new interface
class NewTruthAndDare {
  constructor(randomValue){
      this.turn = randomValue
  }
 
  newplayGame(playerOnename,playerTwoname){
    if((this.turn % 2) == 0){
      return `${playerOnename}'s turn`
    }else{
      return `${playerTwoname}'s turn`
    }
  }
}

// Adapter Class
class Adapter {
  constructor(randomValue) {
     this.newGame = new NewTruthAndDare(randomValue)
  }
	playGame(playerOnename,playerTwoname) {
     return this.newGame.newplayGame(playerOnename,playerTwoname)
   };
}

Bridge Pattern

use cases:

• Extend a class in several independent dimensions.

• Change the implementation at runtime.

• Share the implementation between objects.

Flyweight Pattern

use cases:

Proxy Pattern

use cases:

• The proxy pattern reduces the workload on the target object, especially when dealing with heavy applications that make numerous network requests. This prevents delays in responding to requests by ensuring that the target object is not overwhelmed with requests.

• Image preloading

JavaScriptCopy

var myImage = (function(){
  var imgNode = document.createElement('img');
  document.body.appendChild(imgNode);
  return {
    setSrc: function(src){
      imgNode.src = src;
    }
  };
})();

var proxyImage = (function(){
  var img = new Image;
  img.onload = function(){
    myImage.setSrc(this.src);
  };
  return {
    setSrc: function(src){
      myImage.setSrc('file:///C:/Users/svenzeng/Desktop/loading.gif');
      img.src = src;
    }
  };
})();

proxyImage.setSrc('http://imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');

Observer Parttern

use cases

• Break down large applications into loosely-coupled objects for better code management.

• Enable dynamic relationships between observers and subscribers to increase flexibility.

• Improve communication between different parts of the application.

• Create a one-to-many dependency between loosely-coupled objects.

import './style.css';
import {
  sendToGoogleAnalytics,
  sendToCustomAnalytics,
  sendToEmail,
} from './analytics.js';

const observer = {
  handlers: [],
  observe(handler) {
    this.handlers.push(handler);
  },
  notify(...args) {
    this.handlers.forEach((handler) => {
      handler.apply(this, args);
    });
  },
};

observer.observe(sendToGoogleAnalytics);
observer.observe(sendToCustomAnalytics);
observer.observe(sendToEmail);

const pinkBtn = document.getElementById('pink-btn');
const blueBtn = document.getElementById('blue-btn');

pinkBtn.addEventListener('click', () => {
  const data = '🎀 Click on pink button! 🎀';
  observer.notify(data);
});

blueBtn.addEventListener('click', () => {
  const data = '🦋 Click on blue button! 🦋';
  observer.notify(data);
});

Visitor Pattern

Command Pattern

use cases

• Redo or undo work

JavaScriptCopy

var Ryu = {
    attack: function(){
        console.log('attack');
    },
    defense: function(){
        console.log('defense');
    },
    jump: function(){
        console.log('jump');
    },
    crouch: function(){
        console.log('crouch');
    }
};

var makeCommand = function(receiver, state){
    return function(){
        receiver[state]();
    };
};

var commands = {
    "119": "jump", // W
    "115": "crouch", // S
    "97": "defense", // A
    "100": "attack" // D
};

var commandStack = [];

document.onkeypress = function(ev){
    var keyCode = ev.keyCode,
        command = makeCommand(Ryu, commands[keyCode]);

    if(command){
        command();
        commandStack.push(command);
    }
};

document.getElementById('replay').onclick = function(){
    var command;
    while(command = commandStack.shift()){
        command();
    }
};

• Command queue: For ordering food, if there are too many orders and not enough chefs, orders can be queued for processing. Queues are also used in animations. For example, if a ball motion program is only suitable for people with an APM of less than 20, users' clicks may interrupt ongoing animations. To solve this, we can encapsulate motion processes of the div into command objects and push them into a queue stack. When the animation is completed, the first command object waiting in the queue will be taken out and executed. To notify the queue after an animation is completed, callback functions or the publish-subscribe mode can be used.

• Macro command: A macro command is a collection of commands that can be executed all at once by running the macro command.

JavaScriptCopy

var closeDoorCommand = {
  execute: function() {
    console.log('Close Door');
  }
};
var openPcCommand = {
  execute: function() {
    console.log('Turn on PC');
  }
};
var openChromeCommand = {
  execute: function() {
    console.log('Open chrome');
  }
};

var MacroCommand = function() {
  return {
    commandsList: [],
    add: function(command) {
      this.commandsList.push(command);
    },
    execute: function() {
      for (var i = 0, command; command = this.commandsList[i++];) {
        command.execute();
      }
    }
  }
};

var macroCommand = MacroCommand();
macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openChromeCommand);
macroCommand.execute();

Strategy pattern

use cases:

• Calculate bons

JavaScriptCopy

var strategies = {
  "S": function(salary) {
    return salary * 4;
  },
  "A": function(salary) {
    return salary * 3;
  },
  "B": function(salary) {
    return salary * 2;
  }
};

var calculateBonus = function(level, salary) {
  return strategies[level](salary);
};

console.log(calculateBonus('S', 20000));
console.log(calculateBonus('A', 10000));
// Output: 80000
// Output: 30000

• Form validation

JavaScriptCopy

var Validator = function(){
    this.cache = []; // Save validation rules
};
Validator.prototype.add = function(rule, dom, errorMsg){
    var ary = rule.split( ':' );
    this.cache.push(function(){
        var strategy = ary.shift();
        ary.unshift(dom.value);
        ary.push(errorMsg);
        return strategies[strategy].apply(dom, ary);
    });
};
Validator.prototype.start = function(){
    for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
        var msg = validatorFunc();
        if ( msg ){
            return msg;
        }
    }
};

var strategies = {
  isNonEmpty: function(value, errorMsg) {
    if (value === '') {
      return errorMsg;
    }
  },
  minLength: function(value, length, errorMsg) {
    if (value.length < length) {
      return errorMsg;
    }
  },
  isMobile: function(value, errorMsg) { // mobile number format
    if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  }
};

var validateFunc = function(){
	var validator = new Validator(); // Create a validator object
	/***************Add some validation rules****************/
	validator.add( registerForm.userName, 'isNonEmpty', 'Username cannot be empty' );
	validator.add( registerForm.password, 'minLength:6', 'Password length cannot be less than 6 characters' );
	validator.add( registerForm.phoneNumber, 'isMobile', 'Incorrect mobile phone number format' );
	var errorMsg = validator.start(); // Get validation results
	return errorMsg; // Return validation results
}

var registerForm = document.getElementById( 'registerForm' );

registerForm.onsubmit = function(){
	var errorMsg = validateFunc(); // If errorMsg has a specific return value, it means validation has not passed
	if ( errorMsg ){
		alert ( errorMsg );
		return false; // Prevent form submission
	}
};

Publish/Subscribe Pattern

• Node.js — EventEmitter

• Vue.js — EventBus

 class Myevent{
		constructor(){
			this.eventMap = {}
		}

		on(type, handler){
			if(!(handler instanceof Function)){
				throw new Error('pass a function');
			}
			if(!this.eventMap[type]){
				this.eventMap[type] = []
			}
			this.eventMap[type].push(handler);
		}

		emit(type,params){
		  if(this.eventMap[type]){
			   this.eventMap[type].forEach((handler,index)=>{
				  hander(params)
		})
		}

		off(type,handler){ 
			if(this.eventMap[type]){
			this.eventMap[type].splice(this.eventMap[type].indexOf(handler)>>>0,1)
			}
		}
		}
}

Behavioral Design Patterns

The chain of responsibility

use cases:

• The process of event bubbling in the DOM

Mediator Pattern (Centralized Controller)

• Event delegation

Command Pattern

Mixin Pattern

Provider Pattern

Container/Presentational Pattern

Module Pattern

Progressive Hydration

Static Rendering (SSG)

Incremental Static Generation (ISSG)

Server-Side Rendering

1. Managing a large number of HTML files: Every possible route that the user may access requires an individual HTML file to be generated. For example, when using it for a blog, an HTML file will be generated for every blog post available in the data store. Subsequently, edits to any of the posts will require a rebuild for the update to be reflected in the static HTML files. Maintaining a large number of HTML files can be challenging.

2. Hosting dependency: For an SSG site to be super-fast and responsive, the hosting platform used to store and serve the HTML files should also be good. Superlative performance is possible if a well-tuned SSG website is hosted on multiple CDNs to take advantage of edge-caching.

3. Limited dynamic content: An SSG site needs to be rebuilt and redeployed every time the content changes. The content displayed may be stale if the site has not been rebuilt and redeployed after any content change. This makes SSG unsuitable for highly dynamic content.

Client-Side Rendering

Import on Visibility

• Eager: load resource right away (the normal way of loading scripts)

• Lazy (Route-based): load when a user navigates to a route or component

• Lazy (On interaction): load when the user clicks UI (e.g Show Chat)

• Lazy (In viewport): load when the user scrolls towards the component

• Prefetch: load prior to needed, but after critical resources are loaded

• Preload: eagerly, with a greater level of urgency

Dynamic import and static import

• Abstraction

• Encapsulation

• Polymorphism

• Inheritance

• Encapsulate what varies

• Favor composition over inheritance

• Program to interfaces, not implementations

• Strive for loosely coupled designs between objects that interact.

• Classes should be open for extension, but closed for modification.

• Strategy - defines a family of algorithms, encapsulates each one, and makes them interchangeable. Strategy lets the algorithm vary independently from clients that use it.

MVC

MVP

MVVM

Templating (Handlebars.js, Underscore.js)

• Drawbacks
difficult to read

• Advantages
dynamically load and store templates externally.

Controllers

• Easier overall maintenance. When updates need to be made to the application it is very clear whether the changes are data-centric, meaning changes to models and possibly controllers, or merely visual, meaning changes to views.

• Decoupling models and views means that it is significantly more straight-forward to write unit tests for business logic.

• Duplication of low-level model and controller code (i.e., what we may have been using instead) is eliminated across the application.

• Depending on the size of the application and separation of roles, this modularity allows developers responsible for core logic and developers working on the user interfaces to work simultaneously.

Reference

Patterns.dev

Learn JavaScript design and performance patterns for building more powerful web applications.

https://www.patterns.dev/