JavaScript 设计模式：赋能清晰优雅的代码架构

前端

2023-11-21 19:15:37

在软件开发中，设计模式被视为一种行之有效的通用解决方案，用于解决软件设计中的常见问题。它们为复杂问题提供了经过验证的解决方案，并有助于提高代码的可复用性、可读性和可维护性。

JavaScript 设计模式是专门针对 JavaScript 语言及其独有特性而设计的一组解决方案。它们帮助 JavaScript 开发人员创建更加健壮、可扩展且易于维护的代码。

在本文中，我们将探讨 JavaScript 中常用的设计模式，并提供它们的示例，以便您能够将它们应用到自己的项目中。

1. 单例模式：确保只有一个实例

单例模式是一种设计模式，用于创建并管理一个类的一个实例。这意味着无论您何时创建该类的对象，它始终是同一个对象。

何时使用？

单例模式通常用于管理全局资源，如数据库连接、缓存或日志记录器。

示例：

class Database {
  static instance = null;

  constructor() {
    if (Database.instance) {
      return Database.instance;
    }

    Database.instance = this;
  }

  connect() {
    // ...
  }

  query(sql) {
    // ...
  }
}

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

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

2. 工厂模式：创建对象而不指定具体类型

工厂模式是一种设计模式，用于创建对象而不指定具体类型。工厂类负责创建对象，并根据提供的参数返回适当类型的对象。

何时使用？

工厂模式通常用于创建复杂的对象，或当您希望根据某些条件创建不同类型的对象时。

示例：

class ShapeFactory {
  static createShape(type) {
    switch (type) {
      case "circle":
        return new Circle();
      case "square":
        return new Square();
      case "triangle":
        return new Triangle();
      default:
        throw new Error("Invalid shape type");
    }
  }
}

const circle = ShapeFactory.createShape("circle");
const square = ShapeFactory.createShape("square");
const triangle = ShapeFactory.createShape("triangle");

console.log(circle.getArea()); // πr²
console.log(square.getArea()); // s²
console.log(triangle.getArea()); // 0.5 * b * h

3. 发布-订阅模式：实现组件之间的通信

发布-订阅模式是一种设计模式，用于实现组件之间的通信。它允许组件订阅感兴趣的事件，并在事件发生时收到通知。

何时使用？

发布-订阅模式通常用于实现松散耦合的组件，或当您需要在多个组件之间广播事件时。

示例：

class EventEmitter {
  constructor() {
    this.listeners = {};
  }

  on(event, listener) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }

    this.listeners[event].push(listener);
  }

  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(data));
    }
  }
}

const emitter = new EventEmitter();

emitter.on("message", data => {
  console.log("Received message:", data);
});

emitter.emit("message", "Hello, world!");