前端欧阳前端开发 2024-10-11

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

文章目录隐藏

1.单例模式：全局唯一的守护者
2. 观察者模式：事件驱动的核心
3. 工厂模式：对象创建的智能工厂
4. 模块模式：代码组织的艺术
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

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