用不同视角探索JavaScript的设计模式

2023-11-24 15:27:12

前言

作为一名经验丰富的 JavaScript 开发人员，我深知深入理解设计模式对于提高代码质量和架构灵活性的重要性。然而，传统的介绍设计模式的文章往往拘泥于形式化的定义和枯燥的示例，让人难以真正领会其精髓。

在本文中，我将尝试用一种不同寻常的方式来探讨 JavaScript 中的几种常见设计模式。我将从自己的实践经验出发，分享我如何利用这些模式来解决实际问题，同时深入分析它们的优缺点。我希望通过这种独特视角，能够帮助你真正理解和掌握设计模式。

单例模式

单例模式是一种创建并确保某个类只有一个实例的模式。在 JavaScript 中，我们可以使用闭包来实现单例模式。

const Singleton = (function() {
  let instance;

  function createInstance() {
    const object = new Object();
    return object;
  }

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

这种实现方式的优点在于，它延迟了实例的创建，直到第一次访问它时才创建。此外，它还确保在应用程序的整个生命周期中只有一个实例存在。

工厂模式

工厂模式是一种创建对象的模式，无需直接调用其构造函数。在 JavaScript 中，我们可以使用工厂函数或类来实现工厂模式。

// 使用工厂函数
const createShape = (type) => {
  switch (type) {
    case 'circle':
      return new Circle();
    case 'square':
      return new Square();
    default:
      return null;
  }
};

// 使用工厂类
class ShapeFactory {
  createShape(type) {
    switch (type) {
      case 'circle':
        return new Circle();
      case 'square':
        return new Square();
      default:
        return null;
    }
  }
}

工厂模式的优点在于，它可以将对象的创建过程与应用程序的业务逻辑分离。这使得创建和管理对象更加灵活和可扩展。

观察者模式

观察者模式是一种允许对象订阅其他对象并接收其状态变化通知的模式。在 JavaScript 中，我们可以使用事件监听器或发布/订阅库来实现观察者模式。

// 使用事件监听器
const subject = document.querySelector('.subject');
const observer1 = document.querySelector('.observer1');
const observer2 = document.querySelector('.observer2');

subject.addEventListener('click', () => {
  observer1.classList.add('active');
  observer2.classList.add('active');
});

// 使用发布/订阅库
import EventEmitter from 'eventemitter3';

const subject = new EventEmitter();
const observer1 = new EventEmitter();
const observer2 = new EventEmitter();

subject.on('click', () => {
  observer1.emit('active');
  observer2.emit('active');
});