JavaScript 中最受欢迎的 5 大设计模式，你用过吗？

今天，和大家聊一聊前端开发中最常用的五种设计模式，它们就像一把神奇的钥匙，能帮我们打开编程的大门。这些设计模式在 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 的这五种设计模式：单例、观察者、工厂、模块和装饰器，在 JavaScript 生态系统中极其实用，简直是开发者的救星。它们可以轻松解决各种常见问题，让我们的代码变得更加易于维护、扩展和理解。

虽然 JavaScript 设计模式有不下 20 种，但是以上五种设计模式是我们日常 JavaScript 开发中用得最多的。只要我们掌握了这些模式，我们的代码质量和开发效率将会大大提升。

以上关于JavaScript 中最受欢迎的 5 大设计模式，你用过吗？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。