JavaScript 中最常用的设计模式

JavaScript 中最常用的设计模式

作为一名 JavaScript 开发人员，设计模式是我们提升代码质量和可维护性的重要工具。本文将深入探讨 JavaScript 中四种最常用的设计模式，包括单例模式、观察者模式、工厂模式和策略模式。

单例模式

单例模式确保一个类只有一个实例，并且提供一个访问该实例的全球访问点。JavaScript 中的单例模式通常用于创建单例对象，如状态管理或日志记录。

class Singleton {
  private static instance;

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

  // 业务逻辑...
}

观察者模式

观察者模式定义了一对多依赖关系，其中一个对象（发布者）状态的变化会自动通知多个其他对象（观察者）。JavaScript 中的观察者模式常用于事件处理和数据绑定。

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

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

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

class Observer {
  constructor(publisher) {
    this.publisher = publisher;
    publisher.subscribe(this);
  }

  update() {
    // 处理发布者的变化...
  }
}

工厂模式

工厂模式提供了一种创建对象的方式，而不指定创建它们的具体类。JavaScript 中的工厂模式可用于解耦创建过程，使代码更易于扩展和维护。

class Factory {
  createProduct(type) {
    switch (type) {
      case 'A':
        return new ProductA();
      case 'B':
        return new ProductB();
      default:
        throw new Error('Invalid product type');
    }
  }
}

class ProductA {
  // 产品 A 的逻辑...
}

class ProductB {
  // 产品 B 的逻辑...
}

策略模式

策略模式定义了一组算法，并使算法能够独立于使用它们的客户而改变。JavaScript 中的策略模式可用于封装不同的业务逻辑，使代码更具可扩展性和可维护性。

class Strategy {
  execute() {
    // 业务逻辑...
  }
}

class ConcreteStrategyA extends Strategy {
  execute() {
    // 算法 A 的逻辑...
  }
}

class ConcreteStrategyB extends Strategy {
  execute() {
    // 算法 B 的逻辑...
  }
}

class Context {
  constructor(strategy) {
    this.strategy = strategy;
  }

  executeStrategy() {
    this.strategy.execute();
  }
}

这些设计模式只是 JavaScript 中许多设计模式中的几个。掌握这些模式可以帮助我们编写更可维护、更可扩展的代码。