JavaScript设计模式简介及常见设计模式

简介

设计模式是一套被广泛使用的解决问题的模板，通过这些模板可以提高代码的可复用性、可维护性和可扩展性。在 JavaScript 中，设计模式可以帮助开发者解决各种常见的问题，同时也促进了代码的组织和结构。

常见设计模式

1. 单例模式（Singleton）

单例模式确保一个类只有一个实例，并提供全局访问点。这在需要使用唯一对象或资源的场景中非常有用，比如配置文件、数据库连接等。

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

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

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

2. 工厂模式（Factory）

工厂模式通过一个工厂方法来创建对象，而不需要直接使用构造函数。这样可以隐藏具体的实现细节，提供一种简单的方式来创建对象。

class ShapeFactory {
  createShape(type) {
    if (type === 'circle') {
      return new Circle();
    } else if (type === 'rectangle') {
      return new Rectangle();
    } else if (type === 'triangle') {
      return new Triangle();
    }
  }
}

const shapeFactory = new ShapeFactory();

const circle = shapeFactory.createShape('circle');
const rectangle = shapeFactory.createShape('rectangle');
const triangle = shapeFactory.createShape('triangle');

3. 观察者模式（Observer）

观察者模式定义了对象之间的一对多关系，使得当一个对象状态发生改变时，它的所有依赖对象都会收到通知并自动更新。这在实现用户界面和事件系统时非常有用。

class Subject {
  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);
    }
  }

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

class Observer {
  constructor() {
    // ...
  }
  
  update() {
    // ...
  }
}

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

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

subject.notify();

4. 原型模式（Prototype）

原型模式通过克隆现有对象来创建新对象，而不需要使用繁琐的构造函数。这可以在创建对象时提高性能，并隐藏创建对象的细节。

class Shape {
  constructor() {
    this.type = '';
  }

  clone() {
    return Object.create(this);
  }
}

const circle = new Shape();
circle.type = 'circle';

const cloneCircle = circle.clone();

总结

JavaScript设计模式为开发者提供了解决问题的模板，在实际开发中能够提高代码的可复用性、可维护性和可扩展性。本文介绍了单例模式、工厂模式、观察者模式和原型模式这些常见的设计模式，并给出了相应的示例代码。通过适当地应用这些设计模式，你可以更好地组织和结构化你的代码。

本文来自极简博客，作者：编程艺术家，转载请注明原文链接：JavaScript设计模式简介及常见设计模式