1 什麼是製作者形式?

製作者形式(Builder)是將一個龐雜對象的構建層與其示意層互相星散，一樣的構建歷程可採納差別的示意。

製作者形式的特性是分步構建一個龐雜的對象，能夠用差別組合或遞次製作出差別意義的對象，一般運用者並不須要曉得製作的細節，一般運用鏈式挪用來舉行製作歷程，末了挪用build要領來天生終究對象。

一樣作為建立型的設想形式，須要注重和工場形式的區分，工場雖然也是建立對象，但如何建立無所謂，工場形式關注的是建立的結果；而製作者形式不僅獲得了結果，同時也介入了建立的詳細歷程，合適用來建立一個龐雜的複合對象。

2 ES6中的製作者形式

下面我們來假定一個出版社的書本背景錄入體系的營業場景，書本有四個必填信息，分別是：書名，作者，價錢，分類；我們願望建立一個書本對象返回給後端。下面我們來一步一步深切運用ES6的語法連繫製作者形式建立對象。

//書本製作者類
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
    }
  }
}

//挪用製作者類
const book = new BookBuilder()
  .withName("高效能人士的七個習氣")
  .withAuthor('史蒂芬·柯維')
  .withPrice(51)
  .withCategory('勵志')
  .build();

上面就經由過程我BookBuilder這個建立者類的寫法和挪用要領，然則僅僅是一個4個屬性的對象，我們運用了云云多的代碼去建立，這遠比直接在constructor通報參數建立對象要龐雜很多。這是因為在建立的歷程當中，我們有太多的withxxxx要領。我們實在能夠自動建立這類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;
      }
    })
  }
  
  //挪用製作者
  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("高效能人士的七個習氣")
  .withAuthor('史蒂芬·柯維')
  .withPrice(51)
  .withCategory('勵志')
  .build();

上面的BookBuilder這個類和第一個例子的結果一樣，然則長度確削減不少，在有更多屬性的時刻，削減的代碼量會更加顯著。我們將一切的製作要領withxxxx在constructor挪用時自動被建立，這裏我們運用了一些ES6的新語法：Object.keys獵取對象屬性數組，...的兼并對象的語法。

雖然該寫法在瀏覽起來會比第一個要領難以明白，然則如許寫法的真正作用在於，當我們須要很多的製作者類時，我們能夠將上面自動建立withxxx和build的代碼提取為一個父類。在建立其他製作者類時繼續該父類，這使得在建立多個製作者類時變得非常輕易。

//父類
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();
  }
}

//挪用書本製作者類
const book = new BookBuilder()
  .withName("高效能人士的七個習氣")
  .withAuthor('史蒂芬·柯維')
  .withPrice(51)
  .withCategory('勵志')
  .build();


//挪用印刷廠製作類
const printHouse = new printHouseBuilder()
  .withName('新華印刷廠')
  .withLocation('北京海淀區')
  .withQuality('A')
  .build();

總結

在之前提到的幾種工場形式中，他們都有一個配合特性，就是對象的建立歷程不得而知，我們在挪用一個函數后返回了終究的結果對象。然則在建立者形式中我們體貼的是對象的建立歷程，我們一般將建立龐雜對象的各個類模塊化，在ES6中，我們採納import和export的語法能夠很天真的援用和導出這些模塊舉行我們的製作形式終究天生一個結果對象。

能夠看出，製作者形式的運用有且只合適建立極為龐雜的對象。在前端的現實營業中，在沒有這類極為龐雜的對象的建立時，照樣應當直接運用對象字面或工場形式等體式格局建立對象。

參考內容:

[1]
An Exploration of JavaScript Builders —— Ryan Oglesby

[2] 《 JavaScript設想形式 》—— 張容銘