当前位置：首页 > 全部内容 > JS设计模式之建造者模式的使用方法详解

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

作者：木棉时间：2026-10-30 23:29:15浏览：582

本文详解JavaScript中的建造者模式，阐述其通过分离构建步骤与对象表示来简化复杂对象创建的原理。文章分析了产品、抽象建造者、具体建造者及指挥者的角色，并探讨了其在分离构建逻辑与业务场景中的优势。结合XHR请求配置与DOM元素创建的代码示例，展示了如何灵活控制对象构建过程，适用于多步骤且配置多变的对象生成场景。

定义

建造者模式属于创建型设计模式的一种，旨在处理复杂对象的构建流程。该模式通过将对象的构建步骤与其最终表现形式相分离，使得系统能够以灵活的方式构建出不同类型的对象。

参与者

  • 产品（Product）：指代需要被构建的复杂对象实体。
  • 抽象建造者（Abstract Builder）：定义了构建产品各部分所需的抽象接口，通常包含一个用于获取最终构建结果的方法（常命名为 build）。
  • 具体建造者（Concrete Builder）：实现抽象建造者接口，执行具体的产品构建逻辑。它定义了一系列构建步骤，并提供方法以获取最终完成的产品实例。
  • 指挥者（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

应用场景：

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

到此这篇关于JS设计模式之建造者模式的使用方法详解的文章就介绍到这了,更多相关JS建造者模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString

2026-11-05 17:09:21

JS中将数组和对象混合组装为JSON字符串

2026-11-05 16:41:42

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01