JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程
本文實(shí)例講述了JavaScript設(shè)計(jì)模式之建造者模式。分享給大家供大家參考,具體如下:
一、建造者模式模式概念
建造者模式可以將一個(gè)復(fù)雜的對(duì)象的構(gòu)建與其表示相分離,使得同樣的構(gòu)建過(guò)程可以創(chuàng)建不同的表示。也就是說(shuō)如果我們用了建造者模式,那么用戶就需要指定需要建造的類(lèi)型就可以得到它們,而具體建造的過(guò)程和細(xì)節(jié)就不需要知道了。建造者模式實(shí)際就是一個(gè)指揮者,一個(gè)建造者,一個(gè)使用指揮者調(diào)用具體建造者工作得出結(jié)果的客戶。
建造者模式主要用于“分步驟構(gòu)建一個(gè)復(fù)雜的對(duì)象”,在這其中“分步驟”是一個(gè)穩(wěn)定的算法,而復(fù)雜對(duì)象的各個(gè)部分則經(jīng)常變化。
通俗的說(shuō):就是一個(gè)白富美需要建一個(gè)別墅,然后直接找包工頭,包工頭再找工人把別墅建好。這其中白富美不用直接一個(gè)一個(gè)工人的去找。而且包工頭知道白富美的需求,知道哪里可以找到工人,工人可以干活,中間節(jié)省了白富美的和工人之間溝通的成本,白富美也不需要知道房子具體怎么建,最后能拿到房就可以了。
二、建造者模式的作用和注意事項(xiàng)
模式作用:
1.分步創(chuàng)建一個(gè)復(fù)雜的對(duì)象
2.解耦封裝過(guò)程和具體創(chuàng)建組件
3.無(wú)需關(guān)心組件如何組裝
注意事項(xiàng):
1.一定要一個(gè)穩(wěn)定的算法進(jìn)行支持
2.加工工藝是暴露的--白富美不用關(guān)心如何建房子,但可以隨時(shí)去看房子建得怎么樣
三、建造者模式代碼和實(shí)戰(zhàn)總結(jié)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>建造者模式</title> </head> <body> <script> //1.產(chǎn)出東西是房子 //2.包工頭調(diào)用工人進(jìn)行開(kāi)工 而且他要很清楚工人們具體的某一個(gè)大項(xiàng) //3.工人是蓋房子的 工人可以建臥室 建客廳 建廚房 //4.包工頭只是一個(gè)接口而已 他不干活 他只對(duì)外說(shuō)我能建房子 function Fangzi(){//Fangzi可以理解為單例模式 if(!(this instanceof Fangzi)){ return new Fangzi(); } this.woshi = ""; this.keting = ""; this.chufang = ""; } function Baogongtou(){ if(!(this instanceof Baogongtou)){ return new Baogongtou(); } this.jianfangzi = function(gongren){ gongren.jian_chufang(); gongren.jian_keting(); gongren.jian_woshi(); } } function Gongren(){ if(!(this instanceof Gongren)){ return new Gongren(); } this.jian_woshi = function(){ console.log("建臥室"); } this.jian_keting = function(){ console.log("建客廳"); } this.jian_chufang = function(){ console.log("建廚房"); } this.jiaofang = function(){ var _fangzi = new Fangzi(); _fangzi.woshi = "ok"; _fangzi.keting = "ok"; _fangzi.chufang = "ok"; return _fangzi; } } var gongren = new Gongren(); var baogongtou = new Baogongtou(); baogongtou.jianfangzi(gongren); var myfangzi = gongren.jiaofang(); console.log(myfangzi); </script> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下:
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
IE,firefox(火狐)瀏覽器無(wú)提示關(guān)閉窗口js實(shí)現(xiàn)代碼小結(jié)
在不是js打開(kāi)的頁(yè)面上按window.close(),會(huì)有提示框,很煩,現(xiàn)在可以不用了,沒(méi)有提示框直接關(guān)閉窗口。下面腳本之家編輯特為大家整理了一些。2009-09-09js 編碼轉(zhuǎn)換 gb2312 和 utf8 互轉(zhuǎn)的2種方法
這篇文章介紹了gb2312 和 utf8 互轉(zhuǎn)的JS方法,有需要的朋友可以參考一下2013-08-08關(guān)于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題
這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07學(xué)習(xí)使用Bootstrap頁(yè)面排版樣式
這篇文章主要教大家學(xué)習(xí)使用Bootstrap頁(yè)面排版樣式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JS操作COOKIE實(shí)現(xiàn)備忘記錄的方法
這篇文章主要介紹了JS操作COOKIE實(shí)現(xiàn)備忘記錄的方法,涉及JavaScript針對(duì)cookie的讀寫(xiě)操作相關(guān)技巧,需要的朋友可以參考下2016-04-04基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼
這篇文章主要介紹了基于JS實(shí)現(xiàn)頁(yè)面懸浮框的實(shí)例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12