5 分钟 JS 设计模式 - 单例与观察者模式（第19节）

5 分钟 JS 说 第19节：JavaScript 设计模式

“设计模式是解决软件设计问题的经典解决方案。” —— Erich Gamma

引言

设计模式是软件开发中的“武功秘籍”，它们为常见问题提供了经过验证的解决方案。在 JavaScript 中，设计模式不仅能提升代码的可维护性和可扩展性，还能让你的代码更具艺术性。本文将带你深入探索三种常用的 JavaScript 设计模式：单例模式、工厂模式和观察者模式。

---

1. 什么是设计模式？

设计模式是软件开发中针对常见问题的经典解决方案。它们不是具体的代码，而是一种设计思想或模板，帮助开发者编写更高效、可维护和可扩展的代码。

1.1 设计模式的分类

设计模式通常分为三大类：

类别	描述	示例模式
创建型模式	关注对象的创建机制，旨在使系统独立于对象的创建、组合和表示。	单例模式、工厂模式、建造者模式
结构型模式	关注类和对象的组合，旨在通过继承或组合创建更复杂的结构。	适配器模式、装饰器模式、代理模式
行为型模式	关注对象之间的职责分配和通信，旨在使对象之间的交互更灵活。	观察者模式、策略模式、命令模式

1.2 为什么需要设计模式？

• 提高代码复用性：设计模式提供了一种标准化的解决方案，避免重复造轮子。
• 增强代码可维护性：通过清晰的模式，代码更易于理解和修改。
• 提升开发效率：设计模式是经过验证的解决方案，能减少开发中的试错成本。

---

2. 单例模式

单例模式是一种创建型模式，确保一个类只有一个实例，并提供一个全局访问点。

2.1 单例模式的核心思想

• 唯一性：无论调用多少次，始终返回同一个实例。
• 全局访问：通过一个全局访问点获取实例。

2.2 实现单例模式

2.2.1 基本实现

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }

  log(message) {
    console.log(`Log: ${message}`);
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 结果为：true
instance1.log("Hello, Singleton!");   // 结果为：Log: Hello, Singleton!

2.2.2 目录结构

singleton/
├── index.js          # 主入口文件，包含单例模式的实现
├── test.js           # 测试文件，验证单例模式的唯一性

2.2.3 代码注释

• Singleton.instance：静态属性，用于存储单例实例。
• constructor：构造函数中检查是否已存在实例，若不存在则创建并存储。

2.3 单例模式的应用场景

• 全局状态管理：如 Redux 中的 Store。
• 日志记录器：确保日志记录器唯一。
• 数据库连接池：避免重复创建连接。

---

3. 工厂模式

工厂模式是一种创建型模式，提供了一种创建对象的方式，而无需指定具体的类。

3.1 工厂模式的核心思想

• 封装对象的创建逻辑：将对象的创建过程集中在一个地方。
• 解耦代码：客户端无需知道具体的类名，只需通过工厂方法获取对象。

3.2 实现工厂模式

3.2.1 简单工厂模式

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

class CarFactory {
  static createCar(make, model) {
    return new Car(make, model);
  }
}

const myCar = CarFactory.createCar("Toyota", "Corolla");
console.log(myCar); // 结果为：Car { make: 'Toyota', model: 'Corolla' }

3.2.2 目录结构

factory/
├── index.js          # 主入口文件，包含工厂模式的实现
├── Car.js            # Car 类定义
├── CarFactory.js     # CarFactory 类定义

3.2.3 代码注释

• CarFactory.createCar：静态方法，封装了 Car 对象的创建逻辑。

3.3 工厂模式的应用场景

• 动态创建对象：根据条件创建不同的对象。
• 解耦代码：客户端无需依赖具体的类。

---

4. 观察者模式

观察者模式是一种行为型模式，定义了对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会收到通知。

4.1 观察者模式的核心思想

• 发布-订阅机制：主题（Subject）维护一个观察者列表，并在状态改变时通知观察者。
• 松耦合：主题和观察者之间没有直接的依赖关系。

4.2 实现观察者模式

4.2.1 基本实现

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

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

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

class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify("Hello, Observers!"); 
// 结果为：
// Received data: Hello, Observers!
// Received data: Hello, Observers!

4.2.2 目录结构

observer/
├── index.js          # 主入口文件，包含观察者模式的实现
├── Subject.js        # Subject 类定义
├── Observer.js       # Observer 类定义

4.2.3 代码注释

• Subject.observers：存储观察者列表。
• Subject.notify：通知所有观察者。

4.3 观察者模式的应用场景

• 事件处理系统：如 DOM 事件监听。
• 数据绑定：如 Vue.js 的响应式系统。
• 消息队列：如 RabbitMQ 的消息订阅。

---

5. 设计模式对比

模式	类型	核心思想	应用场景
单例模式	创建型模式	确保一个类只有一个实例	全局状态管理、日志记录器
工厂模式	创建型模式	封装对象的创建逻辑	动态创建对象、解耦代码
观察者模式	行为型模式	定义对象之间的一对多依赖关系	事件处理系统、数据绑定

---

6. 总结

设计模式是 JavaScript 开发中的利器，它们不仅能提升代码质量，还能让开发过程更加高效。通过本文的学习，你已经掌握了单例模式、工厂模式和观察者模式的核心概念和实现方法。接下来，尝试将这些模式应用到你的项目中，感受它们的魅力吧！

---

7. 互动与分享

欢迎在评论区分享你对设计模式的理解或提问！如果你觉得这篇文章有帮助，别忘了分享给你的朋友哦！

• 分享到 Twitter
• 分享到QQ空间
• 分享到知乎
• 分享到微博

---

上一篇：JavaScript ES6 新特性 - let、箭头函数与解构赋值
下一篇：JavaScript 性能优化 - 代码优化与内存管理