快捷導(dǎo)航

javascript設(shè)計(jì)模式 – 建造者模式原理與應(yīng)用實(shí)例分析

更新時(shí)間：2020年04月10日 08:50:29 作者：李小強(qiáng)

這篇文章主要介紹了javascript設(shè)計(jì)模式 – 建造者模式,結(jié)合實(shí)例形式分析了javascript建造者模式相關(guān)概念、原理、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了javascript設(shè)計(jì)模式 – 建造者模式原理與應(yīng)用。分享給大家供大家參考，具體如下：

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

定義：將一個(gè)復(fù)雜對(duì)象的構(gòu)建與他的表示分離，使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。建造者模式是一種對(duì)象創(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方法）一步一步建造一個(gè)完整的產(chǎn)品，相同的構(gòu)造過程可以創(chuàng)建完全不同的產(chǎn)品。

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

為了簡(jiǎn)化系統(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)點(diǎn)：
* 建造者模式中，客戶端不需要知道產(chǎn)品內(nèi)部組成的細(xì)節(jié)，將產(chǎn)品使用與其創(chuàng)建解耦，使得相同創(chuàng)建過程可以創(chuàng)建不同的產(chǎn)品對(duì)象
* 每個(gè)具體的建造類都相對(duì)獨(dú)立，方便替換和新增，滿足開關(guān)原則

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: