javascript設計模式 – 建造者模式原理與應用實例分析

更新時間：2020年04月10日 08:50:29 作者：李小強

這篇文章主要介紹了javascript設計模式 – 建造者模式,結合實例形式分析了javascript建造者模式相關概念、原理、應用場景及操作注意事項,需要的朋友可以參考下

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

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

定義：將一個復雜對象的構建與他的表示分離，使得同樣的構建過程可以創(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方法）一步一步建造一個完整的產品，相同的構造過程可以創(chuàng)建完全不同的產品。

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

為了簡化系統(tǒng)結構，去掉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>

建造者模式總結：

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

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

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

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

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

您可能感興趣的文章: