快捷導(dǎo)航

JS設(shè)計(jì)模式之建造者模式的使用方法詳解

更新時(shí)間：2023年08月30日 09:42:20 作者：慕仲卿

JS建造者模式是一種創(chuàng)建型設(shè)計(jì)模式,它可以用于構(gòu)建復(fù)雜對象的創(chuàng)建過程,將對象的構(gòu)建步驟和表示分離,以便能夠靈活地構(gòu)建不同的對象,本文將通過代碼示例給大家詳細(xì)的介紹一下JS建造者模式的用法,需要的朋友可以參考下

定義

一種創(chuàng)建型設(shè)計(jì)模式，它可以用于構(gòu)建復(fù)雜對象的創(chuàng)建過程，將對象的構(gòu)建步驟和表示分離，以便能夠靈活地構(gòu)建不同的對象。

參與者

產(chǎn)品（Product）：需要被構(gòu)建的復(fù)雜對象。
抽象建造者（Abstract Builder）：定義了創(chuàng)建產(chǎn)品對象各個(gè)部分的抽象接口。它通常包含一個(gè)用于獲取最終產(chǎn)品的方法（一般名為 build）。
具體建造者（Concrete Builder）：實(shí)現(xiàn)了抽象建造者接口，負(fù)責(zé)具體的產(chǎn)品構(gòu)建過程。它會(huì)定義一系列的構(gòu)建步驟，并提供方法來獲取最終構(gòu)建完成的產(chǎn)品。
指揮者（Director）：負(fù)責(zé)控制構(gòu)建過程的順序和流程。它通過調(diào)用具體建造者的方法來構(gòu)建產(chǎn)品。

優(yōu)點(diǎn)

分離構(gòu)建過程和表示，使得構(gòu)建過程可復(fù)用，易于擴(kuò)展和修改。
可以細(xì)化構(gòu)建過程中的每個(gè)步驟，靈活控制對象的構(gòu)建。
隱藏了復(fù)雜對象的構(gòu)建細(xì)節(jié)，簡化了客戶端代碼。

適用場景

當(dāng)對象的構(gòu)建過程具有多個(gè)步驟，并且每個(gè)步驟都可以有不同的實(shí)現(xiàn)方式時(shí)。
當(dāng)需要構(gòu)建不同表示或配置的對象時(shí)，通過調(diào)整具體建造者的實(shí)現(xiàn)，可以創(chuàng)建不同的產(chǎn)品變體。
當(dāng)構(gòu)建過程獨(dú)立于對象的主要業(yè)務(wù)邏輯時(shí)，允許更靈活地構(gòu)建對象。

示例

// 產(chǎn)品類：電腦
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() {
    // 電腦產(chǎn)品的默認(rèn)配置為：Intel i7, 16G內(nèi)存, 512G硬盤
    this.computer = new Computer("Intel i7", 16, 512);
  }
  // 構(gòu)建處理器類型
  setProcessor(processor: string): void {
    this.computer = new Computer(
      processor,
      this.computer.memory,
      this.computer.storage
    );
  }
  // 構(gòu)建內(nèi)存大小
  setMemory(memory: number): void {
    this.computer = new Computer(
      this.computer.processor,
      memory,
      this.computer.storage
    );
  }
  // 構(gòu)建硬盤大小
  setStorage(storage: number): void {
    this.computer = new Computer(
      this.computer.processor,
      this.computer.memory,
      storage
    );
  }
  // 一個(gè)用于獲取最終產(chǎn)品的方法
  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

應(yīng)用場景：

XMLHttpRequest（XHR）對象的構(gòu)建：
- XHR 是瀏覽器提供的用于進(jìn)行 Ajax 請求的對象。
- 使用建造者設(shè)計(jì)模式，可以通過設(shè)置不同的屬性和方法來構(gòu)建不同類型的 XHR 對象。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data"); // 構(gòu)建url和method
xhr.setRequestHeader("Content-Type", "application/json"); // 構(gòu)建請求頭
xhr.onreadystatechange = function () {
  // 構(gòu)建回調(diào)
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(); // 構(gòu)建請求體

DOM 元素的創(chuàng)建：
- 在 JavaScript 中，我們可以使用 document.createElement() 方法來創(chuàng)建 DOM 元素。
- 使用建造者設(shè)計(jì)模式，可以按照特定的順序設(shè)置元素的屬性、樣式和子元素，然后將其添加到文檔中。

// 不算是嚴(yán)格意義上的構(gòu)建者設(shè)計(jì)模式
const div = document.createElement("div"); // 注意這里也使用了解釋器設(shè)計(jì)模式
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);

到此這篇關(guān)于JS設(shè)計(jì)模式之建造者模式的使用方法詳解的文章就介紹到這了,更多相關(guān)JS建造者模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: