JavaScript 设计模式：赋能灵动开发

好的，以下是根据您的输入生成的专业级别文章：

JavaScript 作为一门强大的编程语言，在Web开发领域备受推崇。为了让 JavaScript 代码更加灵活可扩展，设计模式应运而生。设计模式是一套通用的解决方案，可以帮助开发者解决常见的问题，提高代码的可读性和可维护性。本文将深入剖析JavaScript 中常见的5种设计模式，为您的开发之旅增添灵动活力。

1. 装饰者模式

装饰者模式是一种动态地向对象添加职责的模式，它可以为对象添加新的功能，而无需修改其原始结构。这使得装饰者模式非常适合扩展现有类的功能，而无需创建子类。

例如，假设我们有一个Plane类，它可以发射普通子弹。现在，我们想创建一个新的Plane2类，它不仅可以发射普通子弹，还可以发射制导导弹。我们可以使用装饰者模式来实现这一点，如下代码所示：

class Plane {
  fire() {
    console.log("发射普通子弹");
  }
}

class Plane2 extends Plane {
  fireMissile() {
    console.log("发射制导导弹");
  }
}

const plane = new Plane();
plane.fire();

const plane2 = new Plane2();
plane2.fire();
plane2.fireMissile();

输出结果：

发射普通子弹
发射普通子弹
发射制导导弹

从上面的代码中，我们可以看到，Plane2类继承了Plane类，并添加了fireMissile()方法。这样，Plane2类就可以在发射普通子弹的基础上，还可以发射制导导弹。

2. 策略模式

策略模式是一种定义一系列算法并让算法之间可以互换的模式。策略模式可以将算法封装成独立的类，从而使得算法可以独立于使用它的客户端进行修改。

例如，假设我们有一个Shape类，它可以绘制各种形状。现在，我们想创建一个新的Shape2类，它可以绘制新的形状。我们可以使用策略模式来实现这一点，如下代码所示：

class Shape {
  constructor(drawStrategy) {
    this.drawStrategy = drawStrategy;
  }

  draw() {
    this.drawStrategy.draw();
  }
}

class DrawSquareStrategy {
  draw() {
    console.log("绘制正方形");
  }
}

class DrawCircleStrategy {
  draw() {
    console.log("绘制圆形");
  }
}

const shape = new Shape(new DrawSquareStrategy());
shape.draw();

const shape2 = new Shape(new DrawCircleStrategy());
shape2.draw();

输出结果：

绘制正方形
绘制圆形

从上面的代码中，我们可以看到，Shape类使用了一个drawStrategy属性，该属性可以存储一个绘图策略。绘图策略是一个独立的类，它负责绘制特定的形状。这样，Shape类就可以使用不同的绘图策略来绘制不同的形状。

3. 单例模式

单例模式是一种确保一个类只有一个实例的模式。单例模式可以防止创建多个实例，并且可以保证所有对该类的访问都通过同一个实例进行。

例如，假设我们有一个Database类，它负责连接数据库。现在，我们想确保只有一个Database实例被创建。我们可以使用单例模式来实现这一点，如下代码所示：

class Database {
  private static instance: Database;

  private constructor() {}

  public static getInstance(): Database {
    if (!Database.instance) {
      Database.instance = new Database();
    }
    return Database.instance;
  }

  public connect() {
    console.log("连接数据库");
  }
}

const database1 = Database.getInstance();
database1.connect();

const database2 = Database.getInstance();
database2.connect();

输出结果：

连接数据库
连接数据库

从上面的代码中，我们可以看到，Database类使用了一个静态方法getInstance()来获取该类的实例。getInstance()方法会检查Database类的实例是否已经存在，如果不存在则创建一个新的实例，如果存在则返回现有的实例。这样，我们就可以确保只有一个Database实例被创建。

4. 观察者模式

观察者模式是一种定义对象间一对多的依赖关系的模式，以便当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。

例如，假设我们有一个Subject类，它可以存储一个值。现在，我们想创建一个Observer类，当Subject类的值发生改变时，Observer类可以收到通知并更新自己的值。我们可以使用观察者模式来实现这一点，如下代码所示：

class Subject {
  private observers: Observer[];
  private state: number;

  constructor() {
    this.observers = [];
    this.state = 0;
  }

  public attach(observer: Observer) {
    this.observers.push(observer);
  }

  public detach(observer: Observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  public notify() {
    for (const observer of this.observers) {
      observer.update(this.state);
    }
  }

  public setState(state: number) {
    this.state = state;
    this.notify();
  }
}

class Observer {
  private subject: Subject;

  constructor(subject: Subject) {
    this.subject = subject;
    this.subject.attach(this);
  }

  public update(state: number) {
    console.log(`收到通知，新的状态为：${state}`);
  }
}

const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

subject.setState(1);
subject.setState(2);

输出结果：

收到通知，新的状态为：1
收到通知，新的状态为：1
收到通知，新的状态为：2
收到通知，新的状态为：2

从上面的代码中，我们可以看到，Subject类维护了一个观察者列表。当Subject类的状态发生改变时，它会调用notify()方法来通知所有观察者。观察者收到通知后，会更新自己的值。

5. 发布-订阅模式

发布-订阅模式是一种发布者和订阅者之间的松散耦合的通信机制。发布者负责发布事件，订阅者负责订阅事件。当发布者发布事件时，所有订阅了该事件的订阅者都会收到通知。

例如，假设我们有一个EventManager类，它可以发布事件。现在，我们想创建一个Subscriber类，当EventManager类发布事件时，Subscriber类可以收到通知。我们可以使用发布-订阅模式来实现这一点，如下代码所示：

class EventManager {
  private subscribers: Subscriber[];

  constructor() {
    this.subscribers = [];
  }

  public subscribe(subscriber: Subscriber) {
    this.subscribers.push(subscriber);
  }

  public unsubscribe(subscriber: Subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index > -1) {
      this.subscribers.splice(index, 1);
    }
  }

  public publish(event: string) {
    for (const subscriber of this.subscribers) {
      subscriber.update(event);
    }
  }
}

class Subscriber {
  private eventManager: EventManager;

  constructor(eventManager: EventManager) {
    this.eventManager = eventManager;
    this.eventManager.subscribe(this);
  }

  public update(event: string) {
    console.log(`收到通知，新的事件为：${event}`);
  }
}

const eventManager = new EventManager();
const subscriber1 = new Subscriber(eventManager);
const subscriber2 = new Subscriber(eventManager);

eventManager.publish("事件1");
eventManager.publish("事件2");

输出结果：

收到通知，新的事件为：事件1
收到通知，新的事件为：事件1
收到通知，新的事件为：事件2
收到通知，新的事件为：事件2

从上面的代码中，我们可以看到，EventManager类维护了一个订阅者列表。当EventManager类发布事件时，它会调用publish()方法来通知所有订阅了该事件的订阅者。订阅者收到通知后，会更新自己的值。

以上就是JavaScript 中常见的5种设计模式。这些设计模式可以帮助我们编写出更灵活、更可扩展的代码