JavaScript设计模式的魔法：让你的代码舞动起来

1. 单例模式

单例模式确保应用程序中只有一个特定类的实例。它对于共享资源（如数据库连接）或确保在整个应用程序中一致的配置非常有用。例如：

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

const db = new Database(); // Creates a new instance
const db2 = new Database(); // Returns the existing instance

2. 观察者模式

观察者模式允许对象订阅并对其他对象的事件做出反应。这可以实现松散耦合，因为观察者无需了解被观察对象的内部状态。例如：

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

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

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

class Observer {
  constructor(subject) {
    this.subject = subject;
    subject.addObserver(this);
  }

  update() {
    // Respond to changes in the subject
  }
}

3. 工厂模式

工厂模式负责创建对象，同时将创建逻辑与客户端代码分离。这允许您轻松地创建不同类型的对象，而无需修改客户端代码。例如：

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

const factory = new ProductFactory();
const productA = factory.createProduct("A"); // Creates a ProductA instance
const productB = factory.createProduct("B"); // Creates a ProductB instance

4. 装饰器模式

装饰器模式允许动态地扩展对象的现有行为，而无需修改其原始类。它广泛用于增强或包装对象。例如：

class BaseCar {
  drive() {
    console.log("Driving a base car");
  }
}

class CarWithTurbo extends BaseCar {
  constructor(car) {
    super();
    this.car = car;
  }

  drive() {
    this.car.drive();
    console.log("Driving with turbo boost");
  }
}

const car = new BaseCar();
const carWithTurbo = new CarWithTurbo(car);
carWithTurbo.drive(); // Output: "Driving a base car
Driving with turbo boost"

5. 代理模式

代理模式提供一个替代对象，该对象控制对原始对象的访问。它用于延迟加载、安全控制或其他中介场景。例如：

class ImageProxy {
  constructor(class="lazy" data-src) {
    this.class="lazy" data-src = class="lazy" data-src;
    this.image = null;
  }

  load() {
    if (!this.image) {
      this.image = new Image(this.class="lazy" data-src);
    }
  }

  draw() {
    this.load();
    this.image.draw();
  }
}

const imageProxy = new ImageProxy("my-image.png");
imageProxy.draw(); // Loads the image and draws it only when needed

结语

JavaScript 设计模式是增强代码质量和提高开发效率的宝贵工具。通过了解和应用这些模式，开发者可以创建更可扩展、更灵活和更容易维护的应用程序。