本文實(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)建過(guò)程可以創(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>

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

建造者模式可以將復(fù)雜對(duì)象的構(gòu)建與其表示相分離，使用相同構(gòu)建過(guò)程可以創(chuàng)建不同的表示層，用戶只需要指定需要建造的類型就可以，而具體的建造過(guò)程和細(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)建過(guò)程可以創(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ù)雜多變，就需要定義很多建造類來(lái)實(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ì)有所幫助。