JavaScript设计模式——链模式

介绍

链模式，用于链式调用，例如 Promise 的链式调用。

// 建造者，汽车部件厂家
class CarBuilder {
  constructor(param) {
      this.param = param
  }
  // 生产部件 part1
  buildPart1() {
      this.part1 = 'part1'
      return this
  }
  // 生产部件 part2
  buildPart2() {
      this.part2 = 'part2'
      return this
  }
}

// 汽车装配，获取产品实例
const car = new CarBuilder('param').buildPart1().buildPart2()

// 由于每个方法都返回 this，所以可以在同一行代码上调用多个方法，并将它们串联起来来执行

在 vue 中我们经常会看见类似下面的链式调用,使用了多个插件。

app.use(router).use(Antd).use(pinia);

vue3 中 App 的接口描述如下：

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

可以看到 use 方法返回了 this，实现了链式调用。 当然我们也可以返回其他的对象，在责任链模式中可以返回下一个处理者，实现链式调用。