前端設計模式-建造者模式

建造者模式(builder pattern)

提到建造者，咱們可能第一印象就是城市中建高樓大廈，建房子通常設計到業主，項目負責人，建築隊工人。業主告訴項目負責人，須要建造什麼樣的房子，項目負責人告訴工人應該怎麼修建，不一樣工人完成不一樣工做。你們各司其職，最終獲得一個建成的房子。雖然在建房子過程當中，各個部分都須要打交道，可是更多的仍是各司其職，每一個人完成每一個人的工做。其實就是把一個複雜的建房子工程，拆分紅了若干部分由不一樣人來完成。在編程中也是如此，若是咱們須要建立一個複雜的對象，能夠把這個對象進行構建，使得不一樣部分，完成不一樣功能。

建造者模式定義：將一個複雜的對象分解成多個簡單的對象來進行構建，將複雜的構建層與表示層分離，使得相同的構建過程能夠建立不一樣的表示的模式即是建造者模式。看定義一般是沒法直接理解這種設計模式的，仍是直接看代碼：

假設咱們須要建立一輛車，車的組件包括車名，車牌號，車的價錢，車的引擎等。咱們先看不使用建造者模式應該如何建立：

class Car{
  constructor(){
    this.name = '';
    this.number = '';
    this.price = '';
    this.engine = '';
  }
//設置名字
  setName(){
    this.name = '寶馬';
  }
//設置車牌號
  setNumber(){
    this.number = '888888'
  }
//設置價錢
  setPrice(){
    this.price = '100萬'
  }
//設置引擎
  setEngine(){
    this.engine = '最好的引擎'
  }
//車的建立
  getCar(){
    this.setName();
    this.setNumber();
    this.setPrice();
    this.setEngine();
  }
}

//建立一個車：
let car = new Car();
car.getCar();
console.log(car)

 

從上面的代碼中，咱們能夠看到建立一輛車須要的元素包括：name,number,price,engine。每一種元素又須要setxx來單獨實現，最終車的建立還須要經過getCar來完成。也就是說在建立車的過程當中須要的元素較多，建立過程相互影響，相互耦合。這只是簡單的4個元素，並且耦合性也不是過高，可是假設元素他特別多，代碼的耦合性也特別多，若是出現添加新的要素，那麼實現起來要修改的代碼就太多了。所以，咱們須要對代碼進行解耦，這就是建造者模式。

上面咱們提到了建造一個房子，須要業主，項目負責人，建築工人。其實建造者模式也包括這三個類:產品類(客戶提出產品須要)，指揮者類，建造者類。
建造者模式的使用流程以下：

1.  客戶提出產品需求：好比上面產品就是一輛小汽車，產品要素包括name,number,price,engine
2. 指揮者根據產品需求，安排建造者完成需求的各個部分
3. 建造者完成相應的部分

使用建造者模式修改上面的代碼以下：

 

//產品類：產品要素
class Car{
  constructor(){
    this.name = '';
    this.number = '';
    this.price = '';
    this.engine = '';
  }
}


//建造者類：各類工人完成相應的部分
class CarBuilder{
  setName(){
    this.name = '寶馬';
  }
  setNumber(){
    this.number = '888888';
  }
  setPrice(price){
    this.price = '100萬';
  }
  setEngine(engine){
    this.engine = '最好的引擎';
  }
  getCar(){
    var car = new Car();
    car.name = this.name;
    car.number = this.number;
    car.price = this.price;
    car.engine = this.engine;
    return car;
  }
}

//指揮官類：指揮工人完成各部分工做
class Director{
  action(builder){
    builder.setName();
    builder.setNumber();
    builder.setPrice();
    builder.setEngine();
  }
}

//使用方法：

let builder = new CarBuilder();
let director = new Director();
director.action(builder);
let car = builder.getCar();
console.log(car)

 

從上面的代碼中，咱們能夠看出：定義了產品類，主要負責定義產品的需求；建造者類，主要負責完成需求的各個部分；指揮者類，主要負責指揮工人完成各部分工做。實際上就是把一輛車的複雜的建立過程抽離成三個簡單的類來完成，你們各司其職，減小了代碼的耦合。當之後須要添加新的需求時，只須要在各個部分單獨定義便可，好比如今造汽車還須要安裝玻璃，那麼只須要在每一個類裏面定義玻璃相關的要素，建造者，指揮者便可。而不須要考慮代碼的各部分耦合。這就是建造者模式。