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

在 JavaScript 开发中，设计模式是提高代码质量、可维护性和可扩展性的重要工具。以下将介绍 5 种在实际开发中经常被使用的设计模式。

1. 单例模式（Singleton Pattern）

单例模式确保一个类只有一个实例存在。在 JavaScript 中，可以通过创建一个立即执行的函数表达式来实现。这种模式常用于全局状态管理，比如配置对象或数据库连接。

const Singleton = (function () {
  let instance;

  function createInstance() {
    return {
      // 实例的属性和方法
    };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

2. 工厂模式（Factory Pattern）

工厂模式用于创建对象，将对象的创建逻辑封装在一个函数或方法中。这有助于隐藏对象创建的复杂性，并提供了灵活性，使得可以根据不同的条件创建不同类型的对象。

function createProduct(type) {
  if (type === 'A') {
    return {
      // 产品 A 的属性和方法
    };
  } else if (type === 'B') {
    return {
      // 产品 B 的属性和方法
    };
  }
}

3. 观察者模式（Observer Pattern）

观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。在 JavaScript 中，可以通过事件机制来实现。

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  notify() {
    this.observers.forEach(observer => observer.update());
  }
}

class Observer {
  update() {
    // 执行更新操作
  }
}

4. 装饰器模式（Decorator Pattern）

装饰器模式动态地为对象添加额外的功能，而无需修改对象的结构。在 JavaScript 中，可以通过函数包装或代理对象来实现。

function decorate(obj, decoratorFunction) {
  return {
  ...obj,
    decoratedMethod: decoratorFunction(obj.method)
  };
}

5. 策略模式（Strategy Pattern）

策略模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换。这使得算法的选择和切换变得更加灵活。

function calculate(strategy, num1, num2) {
  return strategy(num1, num2);
}

const addStrategy = (num1, num2) => num1 + num2;
const subtractStrategy = (num1, num2) => num1 - num2;

熟练掌握并合理运用这些设计模式，可以让我们的 JavaScript 代码更加优雅、高效和易于维护，提升开发效率和项目质量。