JavaScript Design Patterns: Common Patterns and Use Cases

Introduction

Design patterns are reusable solutions to common problems that occur in software design. These patterns provide guidelines on how to solve these problems efficiently, ensuring code maintainability and extensibility. In this article, we will explore some commonly used design patterns in JavaScript and their use cases.

1. Singleton Pattern

The Singleton pattern ensures that only one instance of a class is created and provides a global point of access to it. It is used when we want to restrict the instantiation of a class to a single object.

class Singleton {
  constructor(data) {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.data = data;
    Singleton.instance = this;
  }

  getData() {
    return this.data;
  }
}

Use Case: In a game application, we can use the Singleton pattern to create a GameManager class that manages game state and resources. Only one instance of GameManager is required throughout the game.

2. Observer Pattern

The Observer pattern defines a one-to-many dependency between objects, so that when one object changes its state, all its dependents are notified and updated automatically.

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notifyObservers() {
    this.observers.forEach((observer) => observer.update());
  }
}

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

  update() {
    console.log(`${this.name} is notified.`);
  }
}

Use Case: In a chat application, we can use the Observer pattern to notify users whenever a new message is received. The Subject class represents the chat server, and the Observer class represents the users.

3. Factory Pattern

The Factory pattern provides an interface for creating objects, but allows subclasses to decide which class to instantiate. It encapsulates object creation and provides flexibility in choosing the object type.

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

  speak() {
    throw new Error("Not implemented.");
  }
}

class Dog extends Animal {
  speak() {
    return "Woof!";
  }
}

class Cat extends Animal {
  speak() {
    return "Meow!";
  }
}

class AnimalFactory {
  createAnimal(type, name) {
    switch (type) {
      case "dog":
        return new Dog(name);
      case "cat":
        return new Cat(name);
      default:
        throw new Error("Invalid animal type.");
    }
  }
}

Use Case: In an animal shelter application, we can use the Factory pattern to create different types of animals based on user input. The AnimalFactory class handles the object creation logic.

4. Module Pattern

The Module pattern provides a way to encapsulate private and public members, allowing us to create self-contained and reusable components.

const module = (() => {
  const privateVariable = "Private";

  const privateMethod = () => {
    console.log("Private method");
  };

  const publicMethod = () => {
    privateMethod();
    console.log("Public method");
  };

  return {
    publicMethod,
  };
})();

Use Case: In a JavaScript library, the Module pattern can be used to create modules with private variables and public methods, ensuring encapsulation and preventing naming conflicts.

Conclusion

Design patterns are invaluable tools for software developers to solve common design problems. In this article, we explored some commonly used design patterns in JavaScript, including Singleton, Observer, Factory, and Module patterns. Understanding and applying these patterns can greatly improve the maintainability and extensibility of your code.

本文来自极简博客，作者：时光倒流，转载请注明原文链接：JavaScript Design Patterns: Common Patterns and Use Cases