简介：

JavaScript 设计模式是一系列被广泛接受的最佳实践，用于解决不同场景下的代码组织和复杂性问题。本文将介绍一些常见的 JavaScript 设计模式，并提供简单的示例代码，帮助您更好地理解如何应用这些模式。

单例模式（Singleton Pattern）：

概念： 单例模式是一种创建型设计模式，旨在确保一个类只有一个实例，并提供一个全局访问点来访问该实例。它常用于需要全局共享资源、控制实例数量的情况，以及确保某个类只有一个实例的情况。

示例场景： 在某些情况下，我们希望确保某个类只有一个实例存在，例如全局配置、日志记录器、数据库连接池等。

示例代码：

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

  getData() {
    return this.data;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出：true，同一个实例
console.log(instance1.getData()); // 输出：Singleton Data
console.log(instance2.getData()); // 输出：Singleton Data

在这个示例中，我们通过 Singleton 类实现了单例模式。无论我们创建多少个实例，它们都引用同一个实例，确保全局只有一个实例存在。

观察者模式（Observer Pattern）：

概念： 观察者模式是一种行为型设计模式，用于定义对象之间的一对多依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会收到通知并自动更新。观察者模式将主题（被观察者）和观察者解耦，使得它们可以独立变化，提高了系统的灵活性和可维护性。

示例场景： 观察者模式适用于需要实现对象之间的状态更新通知机制的情况，比如事件处理、UI更新、发布-订阅系统等。

示例代码：

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

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

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

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

class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
  }
}

const subject = new Subject();
const observerA = new Observer();
const observerB = new Observer();

subject.addObserver(observerA);
subject.addObserver(observerB);

subject.notify("Hello, Observers!");

// 输出：
// Received data: Hello, Observers!
// Received data: Hello, Observers!

在这个示例中，我们通过观察者模式实现了一个简单的观察者系统。Subject 代表被观察者，负责维护观察者列表和通知机制。Observer 代表观察者，当被观察者状态发生变化时，观察者会收到通知并执行相应操作。

观察者模式的优点：

• 解耦：被观察者和观察者之间解耦，使得它们可以独立变化。
• 可扩展：可以轻松增加新的观察者，而不影响其他部分的代码。
• 实时更新：观察者能够实时接收到被观察者的状态变化。

观察者模式在现代前端框架和事件处理中有广泛应用，它能够使不同部分的代码保持一致性，同时实现解耦和模块化。

工厂模式（Factory Pattern）：

概念： 工厂模式是一种创建型设计模式，它提供了一种方法来创建对象，而无需指定具体类的类型。工厂模式通过定义一个共同的接口来创建对象，然后由具体的工厂类来实现这个接口以创建不同类型的对象。

示例场景： 假设你正在开发一个汽车制造系统，你需要创建不同型号的汽车，每个型号有不同的配置。工厂模式可以帮助你创建一个统一的工厂接口，并为每个汽车型号创建具体的工厂类，以便按需创建不同型号的汽车。

示例代码：

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getInfo() {
    return `${this.make} ${this.model}`;
  }
}

class CarFactory {
  createCar(make, model) {
    return new Car(make, model);
  }
}

const carFactory = new CarFactory();

const carA = carFactory.createCar("Toyota", "Camry");
const carB = carFactory.createCar("Honda", "Civic");

console.log(carA.getInfo()); // 输出：Toyota Camry
console.log(carB.getInfo()); // 输出：Honda Civic

在这个示例中，我们使用工厂模式通过 CarFactory 创建了不同的汽车实例，而无需直接使用 Car 类的构造函数。

策略模式（Strategy Pattern）：

概念： 策略模式是一种行为型设计模式，它定义了一系列算法，并将每个算法封装在单独的策略类中，使这些算法可以相互替换，而不影响客户端代码。策略模式可以让客户端代码独立于算法的变化，提高代码的灵活性和可维护性。

示例场景： 假设你正在开发一个电商平台，需要实现不同类型的折扣策略，如满100减20、打折等。策略模式可以帮助你将每种折扣策略封装在不同的策略类中，并根据需要在运行时切换不同的策略。

示例代码：

class DiscountStrategy {
  applyDiscount(price) {
    throw new Error("This method should be overridden.");
  }
}

class FullDiscountStrategy extends DiscountStrategy {
  applyDiscount(price) {
    return price - 20;
  }
}

class HalfDiscountStrategy extends DiscountStrategy {
  applyDiscount(price) {
    return price * 0.5;
  }
}

class ShoppingCart {
  constructor(discountStrategy) {
    this.discountStrategy = discountStrategy;
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getTotal() {
    const total = this.items.reduce((sum, item) => sum + item.price, 0);
    return this.discountStrategy.applyDiscount(total);
  }
}

const fullDiscountStrategy = new FullDiscountStrategy();
const cartWithFullDiscount = new ShoppingCart(fullDiscountStrategy);
cartWithFullDiscount.addItem({ name: "Product A", price: 50 });
cartWithFullDiscount.addItem({ name: "Product B", price: 30 });
console.log(cartWithFullDiscount.getTotal()); // 输出：60

const halfDiscountStrategy = new HalfDiscountStrategy();
const cartWithHalfDiscount = new ShoppingCart(halfDiscountStrategy);
cartWithHalfDiscount.addItem({ name: "Product A", price: 50 });
cartWithHalfDiscount.addItem({ name: "Product B", price: 30 });
console.log(cartWithHalfDiscount.getTotal()); // 输出：40

在这个示例中，我们通过策略模式实现了不同的折扣策略，并将其封装在不同的策略类中。ShoppingCart 类接受一个折扣策略作为参数，并在计算总价时使用该策略。

结论： JavaScript 设计模式为我们提供了解决代码组织和复杂性问题的工具。通过运用这些模式，我们可以更加优雅地编写可维护、可扩展的代码。从单例模式到观察者模式，再到工厂模式，每个模式都有着特定的应用场景，有助于我们更好地组织和管理代码。