摘要：書籍建造者類調(diào)用建造者高效能人士的七個(gè)習(xí)慣史蒂芬柯維勵(lì)志上面的這個(gè)類和第一個(gè)例子的效果一樣，但是長度確減少不少，在有更多屬性的時(shí)候，減少的代碼量會(huì)更為明顯。參考內(nèi)容設(shè)計(jì)模式張容銘

建造者模式(Builder)是將一個(gè)復(fù)雜對(duì)象的構(gòu)建層與其表示層相互分離，同樣的構(gòu)建過程可采用不同的表示。

建造者模式的特點(diǎn)是分步構(gòu)建一個(gè)復(fù)雜的對(duì)象，可以用不同組合或順序建造出不同意義的對(duì)象，通常使用者并不需要知道建造的細(xì)節(jié)，通常使用鏈?zhǔn)秸{(diào)用來進(jìn)行建造過程，最后調(diào)用build方法來生成最終對(duì)象。

同樣作為創(chuàng)建型的設(shè)計(jì)模式，需要注意和工廠模式的區(qū)別，工廠雖然也是創(chuàng)建對(duì)象，但怎樣創(chuàng)建無所謂，工廠模式關(guān)注的是創(chuàng)建的結(jié)果；而建造者模式不僅得到了結(jié)果，同時(shí)也參與了創(chuàng)建的具體過程，適合用來創(chuàng)建一個(gè)復(fù)雜的復(fù)合對(duì)象。

下面我們來假設(shè)一個(gè)出版社的書籍后臺(tái)錄入系統(tǒng)的業(yè)務(wù)場景，書籍有四個(gè)必填信息，分別是：書名，作者，價(jià)格，分類；我們希望創(chuàng)建一個(gè)書籍對(duì)象返回給后端。下面我們來一步一步深入使用ES6的語法結(jié)合建造者模式創(chuàng)建對(duì)象。

//書籍建造者類
class BookBuilder {
  constructor() {
    this.name = "";
    this.author = "";
    this.price = 0;
    this.category = "";
  }
  
  withName(name) {
    this.name = name;
    return this;
  }

  withAuthor(author) {
    this.author = author;
    return this;
  }

  withPrice(price) {
    this.price = price;
    return this;
  }

  withCategory(category) {
    this.category = category;
    return  this;
  }

  build() {
    return {
      name: this.name,
      author: this.author,
      prices: this.price,
      category: this.category
    }
  }
}

//調(diào)用建造者類
const book = new BookBuilder()
  .withName("高效能人士的七個(gè)習(xí)慣")
  .withAuthor("史蒂芬·柯維")
  .withPrice(51)
  .withCategory("勵(lì)志")
  .build();

上面就通過我BookBuilder這個(gè)創(chuàng)建者類的寫法和調(diào)用方法，但是僅僅是一個(gè)4個(gè)屬性的對(duì)象，我們使用了如此多的代碼去創(chuàng)建，這遠(yuǎn)比直接在constructor傳遞參數(shù)創(chuàng)建對(duì)象要復(fù)雜得多。這是由于在創(chuàng)建的過程中，我們有太多的withxxxx方法。我們其實(shí)可以自動(dòng)創(chuàng)建這類withxxxx方法以簡化代碼。

//書籍建造者類
class BookBuilder {
  constructor() {
    this.name = "";
    this.author = "";
    this.price = 0;
    this.category = "";
  
    Object.keys(this).forEach(key => {
      const withName = `with${key.substring(0, 1).toUpperCase()}${key.substring(1)}`;
      this[withName] = value => {
        this[key] = value;
        return this;
      }
    })
  }
  
  //調(diào)用建造者
  build() {
    const keysNoWithers = Object.keys(this).filter(key => typeof this[key] !== "function");

    return keysNoWithers.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key]
      }
    }, {})
  }
}

const book = new BookBuilder()
  .withName("高效能人士的七個(gè)習(xí)慣")
  .withAuthor("史蒂芬·柯維")
  .withPrice(51)
  .withCategory("勵(lì)志")
  .build();

上面的BookBuilder這個(gè)類和第一個(gè)例子的效果一樣，但是長度確減少不少，在有更多屬性的時(shí)候，減少的代碼量會(huì)更為明顯。我們將所有的建造方法withxxxx在constructor調(diào)用時(shí)自動(dòng)被創(chuàng)建，這里我們使用了一些ES6的新語法：Object.keys獲取對(duì)象屬性數(shù)組，...的合并對(duì)象的語法。

雖然該寫法在閱讀起來會(huì)比第一個(gè)方法難以理解，但是這樣寫法的真正作用在于，當(dāng)我們需要許多的建造者類時(shí)，我們可以將上面自動(dòng)創(chuàng)建withxxx和build的代碼提取為一個(gè)父類。在創(chuàng)建其他建造者類時(shí)繼承該父類，這使得在創(chuàng)建多個(gè)建造者類時(shí)變得十分容易。

//父類
class BaseBuilder {
  init() {
    Object.keys(this).forEach(key => {
      const withName = `with${key.substring(0, 1).toUpperCase()}${key.substring(1)}`;
      this[withName] = value => {
        this[key] = value;
        return this;
      }
    })
  }

  build() {
    const keysNoWithers = Object.keys(this).filter(key => typeof this[key] !== "function");

    return keysNoWithers.reduce((returnValue, key) => {
      return {
        ...returnValue,
        [key]: this[key]
      }
    }, {})
  }
}

//子類1: 書籍建造者類
class BookBuilder extends BaseBuilder {
  constructor() {
    super();

    this.name = "";
    this.author = "";
    this.price = 0;
    this.category = "";
    
    super.init();
  }
}

//子類2: 印刷廠建造者類
class printHouseBuilder extends BaseBuilder {
  constructor() {
    super();

    this.name = "";
    this.location = "";
    this.quality = "";

    super.init();
  }
}

//調(diào)用書籍建造者類
const book = new BookBuilder()
  .withName("高效能人士的七個(gè)習(xí)慣")
  .withAuthor("史蒂芬·柯維")
  .withPrice(51)
  .withCategory("勵(lì)志")
  .build();


//調(diào)用印刷廠建造類
const printHouse = new printHouseBuilder()
  .withName("新華印刷廠")
  .withLocation("北京海淀區(qū)")
  .withQuality("A")
  .build();

在之前提到的幾種工廠模式中，他們都有一個(gè)共同特點(diǎn)，就是對(duì)象的創(chuàng)建過程不得而知，我們?cè)谡{(diào)用一個(gè)函數(shù)后返回了最終的結(jié)果對(duì)象。但是在創(chuàng)建者模式中我們關(guān)心的是對(duì)象的創(chuàng)建過程，我們通常將創(chuàng)建復(fù)雜對(duì)象的各個(gè)類模塊化，在ES6中，我們采用import和export的語法可以很靈活的引用和導(dǎo)出這些模塊進(jìn)行我們的建造模式最終生成一個(gè)結(jié)果對(duì)象。

可以看出，建造者模式的使用有且只適合創(chuàng)建極為復(fù)雜的對(duì)象。在前端的實(shí)際業(yè)務(wù)中，在沒有這類極為復(fù)雜的對(duì)象的創(chuàng)建時(shí)，還是應(yīng)該直接使用對(duì)象字面或工廠模式等方式創(chuàng)建對(duì)象。

參考內(nèi)容: 
[1]  An Exploration of JavaScript Builders —— Ryan Oglesby
[2] 《 JavaScript設(shè)計(jì)模式 》—— 張容銘