JS中的设计模式：设计模式简明指南

2024-01-27 04:30:26

在JavaScript中，设计模式是一种用于解决常见编程问题的通用解决方案。设计模式可以帮助我们编写出更易于维护、更可重用和更可靠的代码。

1. 单例模式

单例模式确保一个类只有一个实例，并提供一个全局访问点来获取该实例。

class Singleton {
  static instance;

  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }

    Singleton.instance = this;
  }

  // 业务逻辑
}

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

console.log(instance1 === instance2); // true

2. 命令模式

命令模式将请求封装成一个对象，从而使我们能够以不同的方式参数化请求、记录请求并支持可撤销的操作。

class Command {
  constructor(receiver, action) {
    this.receiver = receiver;
    this.action = action;
  }

  execute() {
    this.receiver[this.action]();
  }
}

class Receiver {
  doSomething() {
    console.log('Doing something');
  }

  undoSomething() {
    console.log('Undoing something');
  }
}

const receiver = new Receiver();
const doSomethingCommand = new Command(receiver, 'doSomething');
const undoSomethingCommand = new Command(receiver, 'undoSomething');

doSomethingCommand.execute(); // Doing something
undoSomethingCommand.execute(); // Undoing something

3. 观察者模式

观察者模式是一种对象行为型设计模式，它定义了一种一对多的依赖关系，以便当一个对象的状态发生改变时，所有依赖它的对象都得到通知并自动更新。

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

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

class Observer {
  constructor(observable) {
    observable.addObserver(this);
  }

  update() {
    // React to the change in the observable's state
  }
}

const observable = new Observable();
const observer1 = new Observer(observable);
const observer2 = new Observer(observable);

observable.notifyObservers(); // Observer1 and Observer2 will be notified

4. 工厂模式

工厂模式提供了一种创建对象的最佳方式，在工厂模式中，我们创建了一个工厂类，负责创建其他对象。

class Factory {
  createProduct(type) {
    switch (type) {
      case 'product1':
        return new Product1();
      case 'product2':
        return new Product2();
      default:
        throw new Error('Invalid product type');
    }
  }
}

class Product1 {
  // ...
}

class Product2 {
  // ...
}

const factory = new Factory();
const product1 = factory.createProduct('product1');
const product2 = factory.createProduct('product2');

5. 策略模式

策略模式定义了一系列算法，并将它们封装起来，使它们可以互换。策略模式可以使算法独立于使用它的客户。

class Context {
  constructor(strategy) {
    this.strategy = strategy;
  }

  executeStrategy() {
    this.strategy.execute();
  }
}

class Strategy1 {
  execute() {
    console.log('Strategy1 executed');
  }
}

class Strategy2 {
  execute() {
    console.log('Strategy2 executed');
  }
}

const context = new Context(new Strategy1());
context.executeStrategy(); // Strategy1 executed

context.strategy = new Strategy2();
context.executeStrategy(); // Strategy2 executed

6. 适配器模式

适配器模式将一个类的接口转换成另一个类的接口，使原本不兼容的两个类可以一起工作。

class Adaptee {
  specificRequest() {
    console.log('Specific request');
  }
}

class Adapter {
  constructor(adaptee) {
    this.adaptee = adaptee;
  }

  request() {
    this.adaptee.specificRequest();
  }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);

adapter.request(); // Specific request

7. 装饰器模式

装饰器模式动态地将责任附加到对象上。它提供了一种在不修改对象本身的情况下扩展对象功能的方法。

class Component {
  operation() {
    console.log('Component operation');
  }
}

class Decorator {
  constructor(component) {
    this.component = component;
  }

  operation() {
    this.component.operation();
  }
}

class ConcreteDecoratorA extends Decorator {
  operation() {
    super.operation();
    console.log('ConcreteDecoratorA operation');
  }
}

class ConcreteDecoratorB extends Decorator {
  operation() {
    super.operation();
    console.log('ConcreteDecoratorB operation');
  }
}

const component = new Component();
const decoratorA = new ConcreteDecoratorA(component);
const decoratorB = new ConcreteDecoratorB(decoratorA);

decoratorB.operation();
// Component operation
// ConcreteDecoratorA operation
// ConcreteDecoratorB operation

8. 代理模式

代理模式为另一个对象提供一个替代或占位符，以便控制对该对象的访问。

class Subject {
  request() {
    console.log('Subject request');
  }
}

class Proxy {
  constructor(subject) {
    this.subject = subject;
  }

  request() {
    // Pre-processing logic
    this.subject.request();
    // Post-processing logic
  }
}

const subject = new Subject();
const proxy = new Proxy(subject);

proxy.request();
// Pre-processing logic
// Subject request
// Post-processing logic