js 23种设计模型详解附代码详解

JavaScript 有常见的23种设计模式，可以分为三大类：

1. 创建型模式：用于描述对象的创建方式，包括单例模式、工厂模式、建造者模式、原型模式等。

2. 结构型模式：用于描述对象之间的组合方式，包括适配器模式、桥接模式、装饰者模式、外观模式、享元模式、组合模式等。

3. 行为型模式：用于描述对象之间的交互方式，包括观察者模式、命令模式、迭代器模式、模板方法模式、策略模式、职责链模式、状态模式、访问者模式、中介者模式等。

下面是这23种常见设计模式的简要介绍：

1. 单例模式（Singleton Pattern）：保证一个类仅有一个实例，并提供一个全局访问该实例的接口。

2. 工厂模式（Factory Pattern）：定义一个用于创建对象的接口，但让子类决定该实例化哪个类，使得一个类的实例化延迟到其子类。

3. 建造者模式（Builder Pattern）：将复杂对象的构建过程分离出来，使得相同的构建过程可以创建不同的对象。

4. 原型模式（Prototype Pattern）：通过复制现有的实例来创建新的实例，而不是通过实例化来创建对象。

5. 适配器模式（Adapter Pattern）：将一个类的接口转换成客户希望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

6. 桥接模式（Bridge Pattern）：将抽象部分与实现（或实现部分）分离，使它们可以独立变化。

7. 装饰者模式（Decorator Pattern）：动态地给一个对象添加一些额外的职责，同时又不改变其结构。

8. 外观模式（Facade Pattern）：为子系统中的一组接口提供一个一致的界面，使得子系统更容易被访问和使用。

9. 享元模式（Flyweight Pattern）：运用共享技术来有效地支持大量细粒度的对象。

10. 组合模式（Composite Pattern）：将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性。

11. 策略模式（Strategy Pattern）：定义一系列算法，把它们一个个封装起来，并且使它们可相互替换。

12. 模板方法模式（Template Method Pattern）：定义一个操作中的算法骨架，将一些步骤延迟到子类中，使得子类可以不改变这个算法的结构即可重定义该算法的某些特定步骤。

13. 观察者模式（Observer Pattern）：定义对象之间的一种一对多的依赖关系，当对象的状态发生改变时，所有依赖于它的对象都得到通知并自动更新。

14. 命令模式（Command Pattern）：将请求封装成对象，从而让你使用不同的请求、队列或日志请求来参数化其他对象。

15. 迭代器模式（Iterator Pattern）：提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象的内部表示。

16. 职责链模式（Chain of Responsibility Pattern）：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系。

17. 状态模式（State Pattern）：允许对象在其内部状态改变时改变其行为，从而使其看起来好像改变了其类。

18. 访问者模式（Visitor Pattern）：表示一个作用于某对象结构中的各元素的操作，它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作。

19. 中介者模式（Mediator Pattern）：用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。

20. 解释器模式（Interpreter Pattern）：给定一个语言，定义它的文法的一种表示，并定义一个解释器，该解释器使用该表示来解释语言中的句子。

21. 媒体模式（Memento Pattern）：在不破坏对象的封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。以后就可以将该对象恢复到原先保存的状态。

22. 远程代理模式（Remote Proxy Pattern）：为已经存在于远程服务器上的对象提供一个代理对象，使得用户在本地可以像访问本地对象一样的方式访问远程对象。

23. 保护代理模式（Protect Proxy Pattern）：控制对一个对象的访问，控制访问的方式可以是：延迟访问、验证访问、缓存访问等。

下面将介绍几种常用的设计模式及其代码详解。

1. 工厂模式

工厂模式是一种创建对象的方式，其不直接调用构造函数来创建对象，而是提供一个共同的接口来创建对象。此模式常用于大量对象的创建或需要动态创建对象的场景。

代码示例：

// 父类
class Animal {
  constructor(name) {
    this.name = name
  }
  say() {}
}
// 子类
class Dog extends Animal {
  constructor(name) {
    super(name)
  }
  say() {
    console.log(`汪汪，我的名字是${this.name}`)
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name)
  }
  say() {
    console.log(`喵喵，我的名字是${this.name}`)
  }
}

// 工厂函数
function createAnimal(type, name) {
  switch(type) {
    case 'dog':
      return new Dog(name)
    case 'cat':
      return new Cat(name)
    default:
      throw new Error('无法识别的类型')
  }
}

// 创建实例
const animal1 = createAnimal('dog', '小黑')
animal1.say()  // 汪汪，我的名字是小黑

const animal2 = createAnimal('cat', '小白')
animal2.say()  // 喵喵，我的名字是小白

2. 单例模式

单例模式是一种保证在整个应用中只有一个实例的模式。一般通过将构造函数定义为私有方法并提供一个公共方法来在需要时创建该类的一个新实例或返回现有实例。

代码示例：

class Singleton {
  static instance = null

  constructor(name) {
    if (Singleton.instance !== null) {
      return Singleton.instance
    }
    this.name = name
    Singleton.instance = this
  }

  say() {
    console.log(`我的名字是${this.name}`)
  }
}

// 创建实例
const singleton1 = new Singleton('小明')
singleton1.say()  // 我的名字是小明

const singleton2 = new Singleton('小红')
singleton2.say()  // 我的名字是小明

3. 观察者模式

观察者模式是一种当一个对象被修改时，会自动通知它的依赖者的模式。此模式的核心思想是将触发事件和执行动作分开，可以灵活实现事件的监听和处理。

代码示例：

class EventEmitter {
  constructor() {
    this.events = {}
  }

  on(type, listener) {
    if (!this.events[type]) {
      this.events[type] = []
    }
    this.events[type].push(listener)
  }

  emit(type, ...args) {
    if (!this.events[type]) {
      return
    }
    this.events[type].forEach(listener => {
      listener.apply(this, args)
    })
  }
}

// 创建观察者
const eventEmitter = new EventEmitter()

// 添加监听器
eventEmitter.on('hello', name => {
  console.log(`hello ${name}`)
})

// 发送消息
eventEmitter.emit('hello', 'world') // hello world

4. 命令模式

命令模式是一种将请求封装为一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或记录请求日志，以及支持可撤销操作的模式。命令模式将请求者和接受者解耦，使得它们不需要接触到具体的实现。

代码示例：

// 接收者
class Receiver {
  insert() {
    console.log('向数据库中插入数据')
  }
}

// 命令
class Command {
  constructor(receiver) {
    this.receiver = receiver
  }
}

// 具体命令1
class InsertCommand extends Command {
  execute() {
    console.log('执行插入数据')
    this.receiver.insert()
  }
}

// 发起者
class Invoker {
  setCommand(command) {
    this.command = command
  }
  execute() {
    console.log('执行命令')
    this.command.execute()
  }
}

// 创建接收者
const receiver = new Receiver()

// 创建命令
const command = new InsertCommand(receiver)

// 创建发起者
const invoker = new Invoker()
invoker.setCommand(command)

// 执行命令
invoker.execute()  // 执行命令 插入数据