如何使用javascript中的建造者模式

發(fā)布時間：2020-08-04 14:14:39 來源：億速云閱讀：116 作者：小豬欄目：web開發(fā)

這篇文章主要講解了如何使用javascript中的建造者模式，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

介紹：建造者模式又稱為生成器模式，它是一種較為復(fù)雜、使用頻率相對較低的創(chuàng)建型模式。建造者模式為客戶端返回的不是一個簡單的產(chǎn)品，而是一個由多個部件組成的復(fù)雜產(chǎn)品

定義：將一個復(fù)雜對象的構(gòu)建與他的表示分離，使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。建造者模式是一種對象創(chuàng)建型模式。

示例：

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '公告';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '提示';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
function construct(ab){
  ab.setType();
  ab.setName();
  ab.setElement();
  return ab.getDialog();
}
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
 
noticeIns.show(); //公告: notice<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

在建造者模式中，客戶端需要通過指揮類（construct方法）一步一步建造一個完整的產(chǎn)品，相同的構(gòu)造過程可以創(chuàng)建完全不同的產(chǎn)品。

建造者模式可以將復(fù)雜對象的構(gòu)建與其表示相分離，使用相同構(gòu)建過程可以創(chuàng)建不同的表示層，用戶只需要指定需要建造的類型就可以，而具體的建造過程和細(xì)節(jié)就不需要知道了。

為了簡化系統(tǒng)結(jié)構(gòu)，去掉construct參數(shù)，可以將construct合并到builder：

var Dialog = function (){
  this.type = '';
  this.name = '';
  this.element = '';
  this.show = function(){
    console.log(this.name + ': ' + this.type + this.element);
  }
}
var Construct = function(){
  this.construct = function(){
    this.setType();
    this.setName();
    this.setElement();
    return this.getDialog();
  }
}
 
var noticeBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'notice';
  }
  this.setName = function(){
    this.dialog.name = '公告';
  }
  this.setElement = function(){
    this.dialog.element = '<div>notice</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
 
var toastBuilder = function(){
  this.dialog = new Dialog();
  this.setType = function(){
    this.dialog.type = 'toast';
  }
  this.setName = function(){
    this.dialog.name = '提示';
  }
  this.setElement = function(){
    this.dialog.element = '<div>toast</div>';
  }
  this.getDialog = function(){
    return this.dialog;
  }
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
 
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
 
noticeIns.show(); //公告: notice<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

建造者模式總結(jié)：

優(yōu)點：
* 建造者模式中，客戶端不需要知道產(chǎn)品內(nèi)部組成的細(xì)節(jié)，將產(chǎn)品使用與其創(chuàng)建解耦，使得相同創(chuàng)建過程可以創(chuàng)建不同的產(chǎn)品對象
* 每個具體的建造類都相對獨立，方便替換和新增，滿足開關(guān)原則

缺點：
* 建造者模式需要多個產(chǎn)品存在相同的創(chuàng)建流程，如果產(chǎn)品差異性大，就不適用建造者模式。
* 如果產(chǎn)品內(nèi)部結(jié)構(gòu)復(fù)雜多變，就需要定義很多建造類來實現(xiàn)這種變化，會導(dǎo)致系統(tǒng)變得龐大

看完上述內(nèi)容，是不是對如何使用javascript中的建造者模式有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何使用javascript中的建造者模式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽