JS設計模式之建造者模式的使用方法詳解

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

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

定義

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

參與者

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

優(yōu)點

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

適用場景

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

示例

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

應用場景：

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 () {
  // 構建回調(diào)
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(); // 構建請求體

DOM 元素的創(chuàng)建：
- 在 JavaScript 中，我們可以使用 document.createElement() 方法來創(chuàng)建 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建造者模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: