透过代码片段巧妙学习JavaScript设计模式

2024-01-15 11:02:17

前言

设计模式 是软件工程领域中常用的解决方案，它为软件设计提供了经过验证的解决方案，可以帮助开发者提高代码的可重用性、可维护性和可扩展性。然而，设计模式的概念通常较为抽象，对于初学者来说理解起来可能有一定难度。

本文将以代码片段的方式展示常见的设计模式，以便读者能够更轻松地理解和应用这些设计模式。同时，我们也推荐一本通俗易懂的书籍——《JavaScript设计模式》，帮助读者深入理解设计模式的概念和应用。

观察者模式

观察者模式是一种一对多的设计模式，它允许一个对象（称为主题）向多个对象（称为观察者）广播消息。当主题的状态发生变化时，它会通知所有观察者，以便观察者可以相应地更新自己的状态。

以下是一个JavaScript代码片段，展示了观察者模式的实现：

// 主题类
class Subject {
  constructor() {
    this.observers = [];
  }

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

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

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

// 观察者类
class Observer {
  constructor(subject) {
    this.subject = subject;
    subject.addObserver(this);
  }

  update() {
    console.log('Observer notified of change.');
  }
}

// 使用观察者模式
const subject = new Subject();
const observer1 = new Observer(subject);
const observer2 = new Observer(subject);

subject.notifyObservers(); // 输出：Observer notified of change. Observer notified of change.

在这个例子中，Subject类是主题类，它维护了一个观察者列表。当Subject对象的状态发生变化时，它会调用notifyObservers()方法，通知所有的观察者。Observer类是观察者类，它通过update()方法来处理来自主题的通知。

单例模式

单例模式是一种创建单一实例的设计模式，它确保某个类只有一个实例存在。单例模式通常用于创建全局对象，如数据库连接、缓存等。

以下是一个JavaScript代码片段，展示了单例模式的实现：

// 单例类
class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }

    Singleton.instance = this;
  }

  // ...其他方法
}

// 使用单例模式
const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出：true

在这个例子中，Singleton类是一个单例类。当我们第一次创建Singleton对象时，Singleton.instance为null，因此它会创建一个新的实例并将其分配给Singleton.instance。当我们第二次创建Singleton对象时，Singleton.instance已经存在，因此它会直接返回这个现有的实例。

工厂模式

工厂模式是一种创建对象的工厂类，它将对象的创建过程与对象的实际类分开。这样，我们可以通过工厂类来创建不同的对象，而无需直接实例化具体的类。

以下是一个JavaScript代码片段，展示了工厂模式的实现：

// 工厂类
class Factory {
  createProduct(type) {
    switch (type) {
      case 'A':
        return new ProductA();
      case 'B':
        return new ProductB();
      default:
        throw new Error('Invalid product type.');
    }
  }
}

// 产品类
class ProductA {
  // ...
}

class ProductB {
  // ...
}

// 使用工厂模式
const factory = new Factory();
const productA = factory.createProduct('A');
const productB = factory.createProduct('B');

console.log(productA instanceof ProductA); // 输出：true
console.log(productB instanceof ProductB); // 输出：true