JS设计模式之建造者模式的使用方法详解

// 产品类：电脑
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

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(); // 构建请求体

// 不算是严格意义上的构建者设计模式
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);