建造者设计模式在Js中的使用

建造者设计模式（Builder Design Pattern）

定义

一种创建型设计模式，它可以用于构建复杂对象的创建过程，将对象的构建步骤和表示分离，以便能够灵活地构建不同的对象。

参与者

1. 产品（Product）：需要被构建的复杂对象。
2. 抽象建造者（Abstract Builder） ：定义了创建产品对象各个部分的抽象接口。它通常包含一个用于获取最终产品的方法（一般名为 build）。
3. 具体建造者（Concrete Builder）：实现了抽象建造者接口，负责具体的产品构建过程。它会定义一系列的构建步骤，并提供方法来获取最终构建完成的产品。
4. 指挥者（Director） ：负责控制构建过程的顺序和流程。它通过调用具体建造者的方法来构建产品。

优点

• 分离构建过程和表示，使得构建过程可复用，易于扩展和修改。
• 可以细化构建过程中的每个步骤，灵活控制对象的构建。
• 隐藏了复杂对象的构建细节，简化了客户端代码。

适用场景

• 当对象的构建过程具有多个步骤，并且每个步骤都可以有不同的实现方式时。
• 当需要构建不同表示或配置的对象时，通过调整具体建造者的实现，可以创建不同的产品变体。
• 当构建过程独立于对象的主要业务逻辑时，允许更灵活地构建对象。

示例

// 产品类：电脑
class Computer {
  private processor: string;
  private memory: number;
  private storage: number;
  constructor(
    public processor: string,
    public memory: number,
    public storage: number
  ) {}

  public getSpecs(): void {
    console.log(
      `Processor: ${this.processor} | Memory: ${this.memory}GB | Storage: ${this.storage}GB`
    );
  }
}

// 抽象建造者接口
interface ComputerBuilder {
  setProcessor(processor: string): void;
  setMemory(memory: number): void;
  setStorage(storage: number): void;
  build(): Computer;
}

// 具体建造者A
class GamingComputerBuilder implements ComputerBuilder {
  private computer: Computer;

  constructor() {
    // 电脑产品的默认配置为：Intel i7, 16G内存, 512G硬盘
    this.computer = new Computer("Intel i7", 16, 512);
  }
  // 构建处理器类型
  setProcessor(processor: string): void {
    this.computer = new Computer(
      processor,
      this.computer.memory,
      this.computer.storage
    );
  }
  // 构建内存大小
  setMemory(memory: number): void {
    this.computer = new Computer(
      this.computer.processor,
      memory,
      this.computer.storage
    );
  }
  // 构建硬盘大小
  setStorage(storage: number): void {
    this.computer = new Computer(
      this.computer.processor,
      this.computer.memory,
      storage
    );
  }
  // 一个用于获取最终产品的方法
  build(): Computer {
    return this.computer;
  }
}

// 具体建造者B
class OfficeComputerBuilder implements ComputerBuilder {
  private computer: Computer;

  constructor() {
    this.computer = new Computer("Intel i5", 8, 256);
  }

  setProcessor(processor: string): void {
    this.computer = new Computer(
      processor,
      this.computer.memory,
      this.computer.storage
    );
  }

  setMemory(memory: number): void {
    this.computer = new Computer(
      this.computer.processor,
      memory,
      this.computer.storage
    );
  }

  setStorage(storage: number): void {
    this.computer = new Computer(
      this.computer.processor,
      this.computer.memory,
      storage
    );
  }

  build(): Computer {
    return this.computer;
  }
}

// 指挥者
class ComputerDirector {
  private builder: ComputerBuilder;

  constructor(builder: ComputerBuilder) {
    this.builder = builder;
  }

  constructComputer(): Computer {
    this.builder.setProcessor("Intel i7");
    this.builder.setMemory(16);
    this.builder.setStorage(512);
    return this.builder.build();
  }
}

// 客户端代码
const gamingBuilder: ComputerBuilder = new GamingComputerBuilder();
const officeBuilder: ComputerBuilder = new OfficeComputerBuilder();

const gamingDirector: ComputerDirector = new ComputerDirector(gamingBuilder);
const gamingComputer: Computer = gamingDirector.constructComputer();
gamingComputer.getSpecs(); // 输出：Processor: Intel i7, Memory: 16GB, Storage: 512GB

const officeDirector: ComputerDirector = new ComputerDirector(officeBuilder);
const officeComputer: Computer = officeDirector.constructComputer();
officeComputer.getSpecs(); // 输出：Processor: Intel i5, Memory: 8GB, Storage: 256GB

应用场景：

1. XMLHttpRequest（XHR）对象的构建：
   • XHR 是浏览器提供的用于进行 Ajax 请求的对象。
   • 使用建造者设计模式，可以通过设置不同的属性和方法来构建不同类型的 XHR 对象。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data"); // 构建url和method
xhr.setRequestHeader("Content-Type", "application/json"); // 构建请求头
xhr.onreadystatechange = function () {
  // 构建回调
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(); // 构建请求体

2. DOM 元素的创建：
   • 在 JavaScript 中，我们可以使用 document.createElement() 方法来创建 DOM 元素。
   • 使用建造者设计模式，可以按照特定的顺序设置元素的属性、样式和子元素，然后将其添加到文档中。

// 不算是严格意义上的构建者设计模式
const div = document.createElement("div"); // 注意这里也使用了解释器设计模式
div.classList.add("container");
div.style.setProperty("width", "300px");
div.style.setProperty("height", "200px");

const heading = document.createElement("h1");
div.appendChild(heading);

document.body.appendChild(div);