Factory mode is used to create objects without exposing construction logic, and generate different types of objects through a unified interface, which is suitable for creating scenarios of multiple similar types of objects; 2. Singleton mode ensures that a class has only one instance and provides global access points, which are often used in scenarios such as configuration management and loggers that require a single state; 3. Observer mode establishes a one-to-many dependency relationship, which automatically notifies all observers when the subject state changes, and is widely used in event systems and data binding. These three modes solve the problems of object creation, instance uniqueness and state response, and use them in combination can improve the modularity, maintainability and scalability of the code.

Factory , Singleton , and Observer in the JavaScript design pattern are three very practical and common patterns that can help us write more modular, maintainable and extensible code. The following are their uses, implementation methods and usage scenarios.

1. Factory Pattern

Factory pattern is used to create objects without exposing specific construct logic. It generates different types of objects through a unified interface, which is particularly suitable for situations where object creation is logically complex or needs to dynamically determine the type according to conditions.

Use scenarios:

• Create multiple objects of similar types (such as different types of users, UI components, etc.)
• Avoid repeated new operations and conditional judgments scattered throughout the code

Sample code:

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

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

class AnimalFactory {
  createAnimal(type) {
    if (type === "dog") {
      return new Dog();
    } else if (type === "cat") {
      return new Cat();
    }
    throw new Error("Unknown animal type");
  }
}

// Use const factory = new AnimalFactory();
const dog = factory.createAnimal("dog");
const cat = factory.createAnimal("cat");

console.log(dog.speak()); // Woof!
console.log(cat.speak()); // Meow!

? Advantages : Decoupled object creation and use, making it easy to expand new types.

2. Singleton Pattern

Singleton pattern ensures that a class has only one instance and provides a global access point. In JavaScript, since objects are reference types, implementing singletons is relatively simple.

Use scenarios:

• Global configuration management
• Logger
• Database connection pool
• State management (such as Redux store is also a singleton in nature)

Implementation method:

 class Database {
  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    this.url = "localhost:3000";
    Database.instance = this;
    return this;
  }

  connect() {
    console.log("Connected to DB at " this.url);
  }
}

// Use const db1 = new Database();
const db2 = new Database();

console.log(db1 === db2); // true

?? Note: In the constructor, determine whether an instance already exists. If it exists, return the existing instance to avoid repeated creation.

? Advantages : Save resources and ensure the overall state is consistent.

?Note : Overuse may make the code difficult to test or have high coupling.

3. Observer Pattern

The observer pattern defines a one-to-many dependency. When an object's state changes, all objects that depend on it will be automatically notified. It is the basis of event systems and responsive programming.

Use scenarios:

• Event listening mechanism (such as DOM events)
• Data binding (such as Vue's responsive principle)
• Subscription updates in status management

Sample code:

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

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

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

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

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

  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

// Use const subject = new Subject();

const observer1 = new Observer("Alice");
const observer2 = new Observer("Bob");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New message!"); 
// Alice received: New message!
// Bob received: New message!

subject.unsubscribe(observer1);
subject.notify("Second message!");
// Bob received: Second message!

? Advantages : loosely coupled, supports dynamic subscription/cancellation, suitable for asynchronous communication.

? Tips: In modern JS, you can use EventTarget or publish/subscribe (Pub/Sub) mode to simplify the implementation.

Summary and comparison

These three modes are often used in actual projects. for example:

• Manage global status with Singleton
• Use Observer to listen for state changes and refresh the UI
• Dynamically create components or services with Factory

Basically that's it. Mastering them can make your JavaScript architecture clearer and easier to deal with complex business logic.

The above is the detailed content of JavaScript Design Patterns: Factory, Singleton, and Observer. For more information, please follow other related articles on the PHP Chinese website!