Software Design Patterns

Introduction

Design patterns are proven solutions to common software design problems. They represent best practices evolved over time by experienced developers. Think of them as blueprints you can customize to solve recurring design problems in your code.

Part 1: CREATIONAL PATTERNS

Focus: Object creation mechanisms

1. Factory Method

Problem: Create objects without specifying exact class

Use when: Object type decided at runtime

// Product classes
class Car {
  drive() { console.log("Driving car"); }
}

class Bike {
  ride() { console.log("Riding bike"); }
}

// Factory
class VehicleFactory {
  static create(type) {
    if (type === "car") return new Car();
    if (type === "bike") return new Bike();
  }
}

// Usage
const myCar = VehicleFactory.create("car");
myCar.drive(); // Driving car

2. Abstract Factory

Problem: Create families of related objects

Use when: System needs to be independent of how products are created

// Abstract products
class WinButton { render() { return "Windows Button"; } }
class MacButton { render() { return "Mac Button"; } }

// Abstract factory
class UIFactory {
  static getFactory(os) {
    if (os === "win") return new WinFactory();
    return new MacFactory();
  }
}

class WinFactory {
  createButton() { return new WinButton(); }
}

// Usage
const factory = UIFactory.getFactory("win");
const button = factory.createButton();
console.log(button.render()); // Windows Button

3. Singleton

Problem: Ensure only one instance exists

Use when: Need single point of control (database connection, config)

class Database {
  constructor() {
    if (Database.instance) return Database.instance;
    this.connection = "Connected to DB";
    Database.instance = this;
  }

  query(sql) { console.log(`Executing: ${sql}`); }
}

// Usage
const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true

4. Prototype

Problem: Create objects by cloning existing ones

Use when: Object creation is expensive

const carPrototype = {
  wheels: 4,
  start() { console.log("Engine started"); },
  clone() { return Object.create(this); }
};

// Usage
const sportsCar = carPrototype.clone();
sportsCar.color = "red";
sportsCar.start(); // Engine started

5. Builder

Problem: Construct complex objects step by step

Use when: Object has many optional parts

class Computer {
  constructor() {
    this.parts = [];
  }
}

class ComputerBuilder {
  constructor() {
    this.parts = [];
  }

  addCPU() { this.parts.push("Intel i7"); return this; }
  addRAM() { this.parts.push("16GB DDR4"); return this; }
  addSSD() { this.parts.push("512GB NVMe"); return this; }
  build() { return this.parts; }
}

// Usage
const gamingPC = new ComputerBuilder()
  .addCPU()
  .addRAM()
  .addSSD()
  .build();

console.log(gamingPC); // ["Intel i7", "16GB DDR4", "512GB NVMe"]

Part 2: STRUCTURAL PATTERNS

Focus: Class and object composition

6. Adapter

Problem: Make incompatible interfaces work together

Use when: Need to integrate old code with new system

// Old system
class OldAPI {
  getUserData() { return { name: "John", age: 30 }; }
}

// New expected format
class UserAdapter {
  constructor(oldAPI) { 
    this.oldAPI = oldAPI; 
  }

  getUser() {
    const data = this.oldAPI.getUserData();
    return `${data.name} is ${data.age} years old`;
  }
}

// Usage
const oldAPI = new OldAPI();
const adapter = new UserAdapter(oldAPI);
console.log(adapter.getUser()); // John is 30 years old

7. Bridge

Problem: Separate abstraction from implementation

Use when: Want to avoid permanent binding between abstraction and implementation

// Implementation
class LEDTV { on() { console.log("LED TV ON"); } }
class OLEDTV { on() { console.log("OLED TV ON"); } }

// Abstraction
class Remote {
  constructor(tv) { this.tv = tv; }
  powerOn() { this.tv.on(); }
}

// Usage
const ledTV = new LEDTV();
const remote = new Remote(ledTV);
remote.powerOn(); // LED TV ON

8. Composite

Problem: Treat individual and group objects uniformly

Use when: Need tree structure of objects

class File {
  constructor(name) { this.name = name; }
  display() { console.log(`File: ${this.name}`); }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(item) { this.children.push(item); }

  display() {
    console.log(`Folder: ${this.name}`);
    this.children.forEach(child => child.display());
  }
}

// Usage
const file1 = new File("doc.txt");
const file2 = new File("image.jpg");
const folder = new Folder("Documents");

folder.add(file1);
folder.add(file2);
folder.display();

9. Decorator

Problem: Add behavior dynamically without modifying class

Use when: Need to extend functionality at runtime

class Coffee {
  cost() { return 5; }
  description() { return "Coffee"; }
}

class MilkDecorator {
  constructor(coffee) { this.coffee = coffee; }
  cost() { return this.coffee.cost() + 2; }
  description() { return this.coffee.description() + ", Milk"; }
}

// Usage
let myCoffee = new Coffee();
myCoffee = new MilkDecorator(myCoffee);
console.log(myCoffee.description()); // Coffee, Milk
console.log(myCoffee.cost()); // 7

10. Facade

Problem: Provide simple interface to complex subsystem

Use when: Want to hide system complexity

// Complex subsystems
class CPU { freeze() { console.log("CPU frozen"); } }
class Memory { load() { console.log("Memory loaded"); } }
class HardDrive { read() { console.log("Hard drive reading"); } }

// Facade
class Computer {
  constructor() {
    this.cpu = new CPU();
    this.memory = new Memory();
    this.hdd = new HardDrive();
  }

  start() {
    this.cpu.freeze();
    this.memory.load();
    this.hdd.read();
    console.log("Computer started!");
  }
}

// Usage
const pc = new Computer();
pc.start(); // Clean, simple interface

11. Flyweight

Problem: Share objects to support large numbers efficiently

Use when: Many similar objects, memory is concern

// Shared object
class Character {
  constructor(char) { this.char = char; }
  display(x, y) { console.log(`'${this.char}' at (${x},${y})`); }
}

// Factory
class CharacterFactory {
  constructor() { this.chars = {}; }

  get(char) {
    if (!this.chars[char]) {
      this.chars[char] = new Character(char);
    }
    return this.chars[char];
  }
}

// Usage
const factory = new CharacterFactory();
const a1 = factory.get('A');
const a2 = factory.get('A');
console.log(a1 === a2); // true (same object)

12. Proxy

Problem: Control access to object

Use when: Need lazy loading, access control, logging

class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadFromDisk();
  }

  loadFromDisk() { console.log(`Loading ${this.filename}`); }
  display() { console.log(`Displaying ${this.filename}`); }
}

class ProxyImage {
  constructor(filename) {
    this.filename = filename;
    this.realImage = null;
  }

  display() {
    if (!this.realImage) {
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display();
  }
}

// Usage
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays
image.display(); // Only displays (already loaded)

Part 3: BEHAVIORAL PATTERNS

Focus: Object communication and responsibility

13. Command

Problem: Encapsulate request as object

Use when: Need to parameterize, queue, or log requests

class Light {
  on() { console.log("Light ON"); }
  off() { console.log("Light OFF"); }
}

class Command {
  constructor(receiver) { this.receiver = receiver; }
  execute() {}
}

class LightOnCommand extends Command {
  execute() { this.receiver.on(); }
}

class Remote {
  setCommand(cmd) { this.command = cmd; }
  press() { this.command.execute(); }
}

// Usage
const light = new Light();
const onCommand = new LightOnCommand(light);
const remote = new Remote();

remote.setCommand(onCommand);
remote.press(); // Light ON

14. Iterator

Problem: Access elements sequentially without exposing structure

Use when: Need to traverse collection

class Playlist {
  constructor() { this.songs = []; }

  add(song) { this.songs.push(song); }

  [Symbol.iterator]() {
    let index = 0;
    let songs = this.songs;

    return {
      next() {
        if (index < songs.length) {
          return { value: songs[index++], done: false };
        }
        return { done: true };
      }
    };
  }
}

// Usage
const playlist = new Playlist();
playlist.add("Song 1");
playlist.add("Song 2");

for (let song of playlist) {
  console.log(song); // Song 1, Song 2
}

15. Mediator

Problem: Reduce direct communication between objects

Use when: Many-to-many communication needed

class ChatRoom {
  constructor() { this.users = []; }

  add(user) {
    this.users.push(user);
    user.room = this;
  }

  send(message, from) {
    this.users.forEach(user => {
      if (user !== from) {
        user.receive(message, from.name);
      }
    });
  }
}

class User {
  constructor(name) { this.name = name; }

  send(message) { this.room.send(message, this); }

  receive(message, from) {
    console.log(`${this.name} got: "${message}" from ${from}`);
  }
}

// Usage
const room = new ChatRoom();
const ali = new User("Ali");
const ahmed = new User("Ahmed");

room.add(ali);
room.add(ahmed);
ali.send("Hello!"); // Ahmed got: "Hello!" from Ali

16. Memento

Problem: Save and restore object state

Use when: Need undo/redo functionality

class Editor {
  constructor() { this.content = ""; }

  write(text) { this.content += text; }
  save() { return new Memento(this.content); }
  restore(m) { this.content = m.content; }
}

class Memento {
  constructor(content) { this.content = content; }
}

// Usage
const editor = new Editor();
editor.write("Hello ");
const saved = editor.save();
editor.write("World");

console.log(editor.content); // Hello World

editor.restore(saved);
console.log(editor.content); // Hello

17. Observer

Problem: Notify multiple objects about state changes

Use when: One-to-many dependency needed

class NewsChannel {
  constructor() {
    this.subscribers = [];
    this.news = "";
  }

  subscribe(sub) { this.subscribers.push(sub); }

  setNews(news) {
    this.news = news;
    this.notify();
  }

  notify() {
    this.subscribers.forEach(sub => sub.update(this.news));
  }
}

class Subscriber {
  constructor(name) { this.name = name; }
  update(news) { console.log(`${this.name} got news: ${news}`); }
}

// Usage
const channel = new NewsChannel();
const ali = new Subscriber("Ali");

channel.subscribe(ali);
channel.setNews("Breaking: Design Patterns!");
// Ali got news: Breaking: Design Patterns!

18. State

Problem: Change behavior based on internal state

Use when: Object has many states with different behaviors

class TrafficLight {
  constructor() { this.state = new RedState(); }

  change() {
    this.state.handle();
    this.state = this.state.next();
  }
}

class RedState {
  handle() { console.log("RED: Stop"); }
  next() { return new GreenState(); }
}

class GreenState {
  handle() { console.log("GREEN: Go"); }
  next() { return new YellowState(); }
}

class YellowState {
  handle() { console.log("YELLOW: Wait"); }
  next() { return new RedState(); }
}

// Usage
const light = new TrafficLight();
light.change(); // RED: Stop
light.change(); // GREEN: Go
light.change(); // YELLOW: Wait

19. Strategy

Problem: Select algorithm at runtime

Use when: Multiple algorithms for same task

class Payment {
  constructor(strategy) { this.strategy = strategy; }
  pay(amount) { this.strategy.pay(amount); }
}

class CreditCard {
  pay(amount) { console.log(`Paid $${amount} with Credit Card`); }
}

class PayPal {
  pay(amount) { console.log(`Paid $${amount} with PayPal`); }
}

class Crypto {
  pay(amount) { console.log(`Paid $${amount} with Bitcoin`); }
}

// Usage
const payment = new Payment(new CreditCard());
payment.pay(100); // Paid $100 with Credit Card

payment.strategy = new PayPal();
payment.pay(50); // Paid $50 with PayPal

20. Template Method

Problem: Define skeleton with customizable steps

Use when: Steps are same but implementations differ

class DataProcessor {
  process() {
    this.loadData();
    this.processData();
    this.saveData();
  }

  loadData() { console.log("Loading data..."); }
  saveData() { console.log("Saving data..."); }
}

class CSVProcessor extends DataProcessor {
  processData() { console.log("Processing CSV data"); }
}

class JSONProcessor extends DataProcessor {
  processData() { console.log("Processing JSON data"); }
}

// Usage
const csv = new CSVProcessor();
csv.process(); // Loading > Processing CSV > Saving

21. Visitor

Problem: Add operations to objects without modifying them

Use when: Many unrelated operations on same objects

class Car {
  accept(visitor) { visitor.visitCar(this); }
}

class Bike {
  accept(visitor) { visitor.visitBike(this); }
}

class TaxCalculator {
  visitCar(car) { console.log("Car tax: $200"); }
  visitBike(bike) { console.log("Bike tax: $50"); }
}

class InsuranceCalculator {
  visitCar(car) { console.log("Car insurance: $500"); }
  visitBike(bike) { console.log("Bike insurance: $100"); }
}

// Usage
const car = new Car();
const tax = new TaxCalculator();
car.accept(tax); // Car tax: $200

Quick Reference Table

Need	Pattern
Need one instance only	Singleton
Need to create objects	Factory / Abstract Factory
Need to add features dynamically	Decorator
Need to notify others of changes	Observer
Need to choose algorithm at runtime	Strategy
Need to undo/redo actions	Command / Memento
Need to traverse a collection	Iterator
Need to simplify complex subsystem	Facade
Need to handle many similar objects	Flyweight
Need to control access to object	Proxy

When to Use What?

Need one instance only? → Singleton
Need to create objects? → Factory / Abstract Factory
Need to add features? → Decorator
Need to notify others? → Observer
Need to choose algorithm? → Strategy
Need to undo actions? → Command / Memento
Need to traverse collection? → Iterator
Need to simplify complex system? → Facade

Conclusion

Design patterns are not templates to copy-paste, but guidelines to solve common problems. Master these 23 patterns, and you'll:

Write more maintainable code
Communicate better with other developers
Solve design problems faster
Build more flexible systems

Remember: Don't force patterns where they're not needed. Use them when they genuinely solve a problem! 🎯

Resources

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

推荐订阅源

DEV Community