我们在 JavaScript 中真正使用的 5 大设计模式 | 高级 JS/TS

• React Hook 深入浅出
• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在前端开发的广阔领域中，设计模式犹如一把万能钥匙，能够解锁众多常见的编程难题。本文将深入探讨JavaScript中最实用、最受欢迎的五种设计模式，这些模式不仅能提高代码的可维护性和可扩展性，还能让代码结构更加清晰。

1.单例模式：全局唯一的守护者

单例模式确保一个类仅有一个实例，并提供一个访问它的全局节点。这种模式在管理全局状态时尤其有效，比如处理应用配置、日志记录或缓存机制。

class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.config = {};
    ConfigManager.instance = this;
  }

  setConfig(key, value) {
    this.config[key] = value;
  }

  getConfig(key) {
    return this.config[key];
  }
}

const config1 = new ConfigManager();
const config2 = new ConfigManager();

console.log(config1 === config2); // 输出: true

在需要管理全局状态（如管理配置、日志或缓存）的情况下，单例模式至关重要。

2. 观察者模式：事件驱动的核心

观察者模式允许对象（主题）维护一系列依赖于它的对象（观察者），并在状态发生变化时通知它们。这种模式在构建响应式用户界面和实时系统时特别有用。

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

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

  unsubscribe(observer) {
    this.subscribers = this.subscribers.filter(sub => sub !== observer);
  }

  notifyAll(news) {
    this.subscribers.forEach(sub => sub.update(news));
  }

  publishNews(news) {
    this.notifyAll(news);
  }
}

class NewsSubscriber {
  constructor(name) {
    this.name = name;
  }

  update(news) {
    console.log(`${this.name} 收到新闻: ${news}`);
  }
}

const publisher = new NewsPublisher();
const sub1 = new NewsSubscriber('订阅者A');
const sub2 = new NewsSubscriber('订阅者B');

publisher.subscribe(sub1);
publisher.subscribe(sub2);
publisher.publishNews('重大突发新闻！');

观察者模式对于构建可扩展的模块化应用程序至关重要，尤其是在处理用户界面和实时系统时。

3. 工厂模式：对象创建的智能工厂

工厂模式提供了一个用于创建对象的接口，而无需指定将要创建的对象的确切类。这种模式在处理复杂对象创建逻辑时特别有用。

class VehicleFactory {
  createVehicle(type) {
    switch(type) {
      case 'car':
        return new Car();
      case 'bike':
        return new Bike();
      default:
        throw new Error('未知的车辆类型');
    }
  }
}

class Car {
  drive() {
    console.log('驾驶汽车');
  }
}

class Bike {
  ride() {
    console.log('骑自行车');
  }
}

const factory = new VehicleFactory();
const car = factory.createVehicle('car');
const bike = factory.createVehicle('bike');

car.drive();
bike.ride();

工厂模式简化了对象的创建，使代码更灵活，更易于扩展。

4. 模块模式：代码组织的艺术

模块模式用于封装相关的函数、变量和类到一个单独的单元中，提供了更清晰、更模块化的代码库。这种模式在JavaScript中特别有用，可以有效管理作用域并防止全局命名空间污染。

const Calculator = (function() {
  let result = 0;

  return {
    add: function(x) {
      result += x;
    },
    subtract: function(x) {
      result -= x;
    },
    getResult: function() {
      return result;
    }
  };
})();

Calculator.add(5);
Calculator.subtract(2);
console.log(Calculator.getResult()); // 输出: 3

模块模式对于创建独立的代码单元至关重要，这些单元可以很容易地重复使用和维护。

5. 装饰器模式：动态功能扩展

装饰器模式允许动态地向个别对象添加行为，而不影响同类中其他对象的行为。这种模式为扩展功能提供了一种灵活且可重用的方式。

class Coffee {
  cost() {
    return 5;
  }

  description() {
    return '普通咖啡';
  }
}

function milkDecorator(coffee) {
  const cost = coffee.cost();
  const description = coffee.description();
  
  coffee.cost = () => cost + 2;
  coffee.description = () => `${description}, 加牛奶`;
  
  return coffee;
}

function sugarDecorator(coffee) {
  const cost = coffee.cost();
  const description = coffee.description();
  
  coffee.cost = () => cost + 1;
  coffee.description = () => `${description}, 加糖`;
  
  return coffee;
}

let myCoffee = new Coffee();
myCoffee = milkDecorator(myCoffee);
myCoffee = sugarDecorator(myCoffee);

console.log(myCoffee.description()); // 输出: 普通咖啡, 加牛奶, 加糖
console.log(myCoffee.cost()); // 输出: 8

装饰器模式为扩展功能提供了一种灵活的子类化替代方式，使修改行为变得更加容易，而无需改变现有的代码库。

结语

这五种设计模式——单例、观察者、工厂、模块和装饰器——在JavaScript生态系统中极其实用。它们为常见问题提供了强大的解决方案，使代码更易于维护、扩展和理解。

虽然在一般编程中存在20多种设计模式，但这五种是日常JavaScript开发中最常用到的。掌握这些模式，将极大地提升我们的代码质量和开发效率。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。