JavaScript的設(shè)計(jì)模式經(jīng)典之建造者模式
一、建造者模式模式概念
建造者模式可以將一個(gè)復(fù)雜的對(duì)象的構(gòu)建與其表示相分離,使得同樣的構(gòu)建過(guò)程可以創(chuàng)建不同的表示。也就是說(shuō)如果我們用了建造者模式,那么用戶就需要指定需要建造的類型就可以得到它們,而具體建造的過(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é)省了白富美的和工人之間溝通的成本,白富美也不需要知道房子具體怎么建,最后能拿到房就可以了。
建造者模式結(jié)構(gòu)圖

二、建造者模式的作用和注意事項(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>
相關(guān)文章
Javascript 圓角div的實(shí)現(xiàn)代碼
為什么要做圓角的div: 圓角div平滑美觀,某些情況下有比較不錯(cuò)的效果。比如說(shuō)要做一個(gè)報(bào)message的消息框,那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。2009-10-10
js+flash實(shí)現(xiàn)的5圖變換效果廣告代碼(附演示與demo源碼下載)
這篇文章主要介紹了js+flash實(shí)現(xiàn)的5圖變換效果廣告代碼,涉及JavaScript結(jié)合flash調(diào)用圖片實(shí)現(xiàn)幻燈廣告效果,并附帶演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
js將鍵值對(duì)字符串轉(zhuǎn)為json字符串的方法
下面小編就為大家分享一篇js將鍵值對(duì)字符串轉(zhuǎn)為json字符串的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
javascript函數(shù)以及基礎(chǔ)寫法100多條實(shí)用整理
100多個(gè)很有用的JavaScript函數(shù)以及基礎(chǔ)寫法匯總,在項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)使用到,本文整理了一些,希望對(duì)你們有幫助2013-01-01
javascript保留兩位小數(shù)的實(shí)現(xiàn)方法你了解嗎
這篇文章主要為大家介紹了javascript保留兩位小數(shù)的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-01-01
js調(diào)用后臺(tái)、后臺(tái)調(diào)用前臺(tái)等方法總結(jié)
這篇文章主要對(duì)js調(diào)用后臺(tái),后臺(tái)調(diào)用前臺(tái)等方法做個(gè)總結(jié),需要的朋友可以參考下2014-04-04
關(guān)于uniApp editor微信滑動(dòng)問(wèn)題
這篇文章主要介紹了關(guān)于uniApp editor微信滑動(dòng)問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
js自定義方法通過(guò)隱藏iframe實(shí)現(xiàn)文件下載
通過(guò)隱藏iframe實(shí)現(xiàn)文件下載,不可思議吧,但確實(shí)是可以實(shí)現(xiàn)的,不懂的看下代碼,或許可以幫助到你,而且此功能是用js實(shí)現(xiàn)的,感興趣的你可不要錯(cuò)過(guò)了哈2013-02-02

