js常见的设计模式有哪些

JavaScript中常见设计模式有哪些？

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 Method):定义一个用于创建对象的接口，让子类决定实例化哪一个类，工厂方法使一个类的实例化延迟到其子类。

class Animal {
  speak() {}
}
class Dog extends Animal {
  speak() {
    console.log('汪汪汪');
  }
}
class Cat extends Animal {
  speak() {
    console.log('喵喵喵');
  }
}
function getAnimal(type) {
  if (type === 'Dog') {
    return new Dog();
  } else if (type === 'Cat') {
    return new Cat();
  } else {
    throw new Error('Invalid animal type');
  }
}
const dog = getAnimal('Dog');
dog.speak(); // 汪汪汪

3、抽象工厂模式(Abstract Factory):提供一个接口，用于创建相关或依赖对象的家族，而不需要明确指定具体类。

class AbstractFactory {
  createProductA() {}
  createProductB() {}
}
class ConcreteFactory1 extends AbstractFactory {
  createProductA() { return new ProductA1(); }
  createProductB() { return new ProductB1(); }
}
class ConcreteFactory2 extends AbstractFactory {
  createProductA() { return new ProductA2(); }
  createProductB() { return new ProductB2(); }
}

4、建造者模式(Builder):将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示，构造函数参数接受一个表示对象，后续的操作都是对这个表示对象的操作，最终生成一个复杂对象。

class Product {}
class Director {}
class Builder extends Director {}
class ConcreteBuilder extends Builder {}
class ConcreteProduct extends Product {}

结构型模式

1、适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口，适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

class Target {}
class Source {}
class Adapter extends Source {}
class TargetAdapter extends Target {}

桥接模式(Bridge):将抽象部分与实现部分分离，使它们都可以独立地变化，这个模式的关键在于它将抽象部分和实现部分分别放在两个独立的类中，从而避免了它们之间的耦合关系，桥接模式通过组合的方式来组织各个组成部分之间的关系，使得系统更加灵活、可扩展。