本文實例講述了javascript設計模式 ? 建造者模式原理與應用。分享給大家供大家參考，具體如下：

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

定義：將一個復雜對象的構建與他的表示分離，使得同樣的構建過程可以創建不同的表示。建造者模式是一種對象創建型模式。

示例：

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方法）一步一步建造一個完整的產品，相同的構造過程可以創建完全不同的產品。

建造者模式可以將復雜對象的構建與其表示相分離，使用相同構建過程可以創建不同的表示層，用戶只需要指定需要建造的類型就可以，而具體的建造過程和細節就不需要知道了。

為了簡化系統結構，去掉construct參數，可以將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>

建造者模式總結：

優點：* 建造者模式中，客戶端不需要知道產品內部組成的細節，將產品使用與其創建解耦，使得相同創建過程可以創建不同的產品對象* 每個具體的建造類都相對獨立，方便替換和新增，滿足開關原則

缺點：* 建造者模式需要多個產品存在相同的創建流程，如果產品差異性大，就不適用建造者模式。* 如果產品內部結構復雜多變，就需要定義很多建造類來實現這種變化，會導致系統變得龐大

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。