javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用實(shí)例分析
本文實(shí)例講述了javascript設(shè)計(jì)模式 ? 建造者模式原理與應(yīng)用。分享給大家供大家參考,具體如下:
介紹:建造者模式又稱為生成器模式,它是一種較為復(fù)雜、使用頻率相對較低的創(chuàng)建型模式。建造者模式為客戶端返回的不是一個(gè)簡單的產(chǎn)品,而是一個(gè)由多個(gè)部件組成的復(fù)雜產(chǎn)品
定義:將一個(gè)復(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方法)一步一步建造一個(gè)完整的產(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)點(diǎn):* 建造者模式中,客戶端不需要知道產(chǎn)品內(nèi)部組成的細(xì)節(jié),將產(chǎn)品使用與其創(chuàng)建解耦,使得相同創(chuàng)建過程可以創(chuàng)建不同的產(chǎn)品對象* 每個(gè)具體的建造類都相對獨(dú)立,方便替換和新增,滿足開關(guān)原則
缺點(diǎn):* 建造者模式需要多個(gè)產(chǎn)品存在相同的創(chuàng)建流程,如果產(chǎn)品差異性大,就不適用建造者模式。* 如果產(chǎn)品內(nèi)部結(jié)構(gòu)復(fù)雜多變,就需要定義很多建造類來實(shí)現(xiàn)這種變化,會導(dǎo)致系統(tǒng)變得龐大
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(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é)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章:
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. 使用Python和百度語音識別生成視頻字幕的實(shí)現(xiàn)3. python基于socket模擬實(shí)現(xiàn)ssh遠(yuǎn)程執(zhí)行命令4. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟5. Java封裝數(shù)組實(shí)現(xiàn)包含、搜索和刪除元素操作詳解6. ASP中解決“對象關(guān)閉時(shí),不允許操作。”的詭異問題……7. Django:使用filter的pk進(jìn)行多值查詢操作8. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式9. idea打開多個(gè)窗口的操作方法10. JAVA上加密算法的實(shí)現(xiàn)用例
