javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS建造者模式

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

作者：慕仲卿

JS建造者模式是一种创建型设计模式,它可以用于构建复杂对象的创建过程,将对象的构建步骤和表示分离,以便能够灵活地构建不同的对象,本文将通过代码示例给大家详细的介绍一下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);

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

您可能感兴趣的文章:
阅读全文