怎樣用Javascript實(shí)現(xiàn)建造者模式
概述
建造者模式是相對比較簡單的一種設(shè)計(jì)模式,屬于創(chuàng)建型模式的一種;
定義:將一個(gè)復(fù)雜的對象分解成多個(gè)簡單的對象來進(jìn)行構(gòu)建,將復(fù)雜的構(gòu)建層與表現(xiàn)層分離,使相同的構(gòu)建過程可以創(chuàng)建不同的表示模式;
優(yōu)點(diǎn):
- 建造者模式的封裝性比較好,創(chuàng)建對象和構(gòu)建過程解耦;
- 建造者模式很容易擴(kuò)展,當(dāng)我們需要擴(kuò)展的時(shí)候,通過一個(gè)新的建造者就可以實(shí)現(xiàn);
模式作用:
- 分步創(chuàng)建一個(gè)復(fù)雜的對象
- 解耦封裝過程和具體創(chuàng)建組件
- 無需關(guān)心組件如何組裝
注意事項(xiàng):
- 一定要一個(gè)穩(wěn)定的算法支持
- 加工工藝是暴露的,也就是說土豪可以隨時(shí)去看房子建的怎么樣了
白話解釋:
某土豪想建一個(gè)房子,某土豪只需要找包工頭,包工頭再去找施工團(tuán)隊(duì)來建造房子,而不需要土豪自己去一個(gè)個(gè)的找工人搭建施工團(tuán)隊(duì)開始施工;包工頭知道土豪的需求,也知道哪里能找到工人搭建施工團(tuán)隊(duì),工人可以直接干活,中間節(jié)省了土豪直接和工人溝通的成本;土豪不需要知道房子該怎么建,土豪只需要最后能驗(yàn)收到房就行;
代碼實(shí)現(xiàn)
在寫代碼之前我們先分析一下:
1、產(chǎn)出的東西是房子
2、包工頭調(diào)用工人進(jìn)行開工而且他要很清楚工人們具體的某一個(gè)大項(xiàng)
3、工人是蓋房子的工人可以建臥室建客廳建廚房
4、包工頭只是一個(gè)接口,他只對外說蓋房子,他不用做事情;
function Fangzi(){
this.woshi = "";
this.keting = "";
this.chufang = "";
}
function Baogongtou(){
this.jianfangzi = function(gongren){
gongren.jian_woshi();
gongren.jian_keting();
gongren.jian_chufang();
}
}
function Gongren(){
this.jian_woshi = function(){
console.log("臥室建好了!");
}
this.jian_keting = function(){
console.log("客廳建好了!");
}
this.jian_chufang = function(){
console.log("廚房建好了!");
}
this.wangong = function(){
var fangzi = new Fangzi();
fangzi.woshi = "ok";
fangzi.keting = "ok";
fangzi.chufang = "ok";
return fangzi;
}
}
let gongren = new Gongren();
let baogongtou = new Baogongtou();
//臥室建好了!
//客廳建好了!
//廚房建好了!
baogongtou.jianfangzi(gongren);
var my_fangzi = gongren.wangong();
/*
Fangzi={
chufang: "ok"
keting: "ok"
woshi: "ok"
}
*/
console.log(my_fangzi);
上述代碼中我們可以看到,Gongren()里面是具體的施工過程,也就是具體做的事情,F(xiàn)angzi()里面一開始都是空的,沒有客廳、廚房、臥室;Baogongtou()里面只是對外宣傳可以建房子,然后傳入工人方法調(diào)用工人進(jìn)行施工;工人方法執(zhí)行完了也就是施工完了,然后就是交房;一個(gè)新的方法里面實(shí)例化Fangzi()的方法,在新方法里面重新賦值即可;
以上就是怎樣用Javascript實(shí)現(xiàn)建造者模式的詳細(xì)內(nèi)容,更多關(guān)于Javascript建造者模式的資料請關(guān)注腳本之家其它相關(guān)文章!
- javascript設(shè)計(jì)模式 – 建造者模式原理與應(yīng)用實(shí)例分析
- JavaScript設(shè)計(jì)模式之建造者模式實(shí)例教程
- JavaScript的設(shè)計(jì)模式經(jīng)典之建造者模式
- JS建造者模式基本用法實(shí)例分析
- 深入理解JavaScript系列(27):設(shè)計(jì)模式之建造者模式詳解
- JavaScript設(shè)計(jì)模式之建造者模式介紹
- JS 設(shè)計(jì)模式之:工廠模式定義與實(shí)現(xiàn)方法淺析
- JS 設(shè)計(jì)模式之:單例模式定義與實(shí)現(xiàn)方法淺析
- javascript設(shè)計(jì)模式 – 訪問者模式原理與用法實(shí)例分析
- javascript設(shè)計(jì)模式 – 模板方法模式原理與用法實(shí)例分析
相關(guān)文章
js檢測IE8及以下瀏覽器版本并做出提示的函數(shù)代碼
這篇文章主要介紹了js檢測IE8及以下瀏覽器版本并做出提示的函數(shù)代碼,需要的朋友可以參考下2023-02-02
Rxjs?中處理錯(cuò)誤和抓取錯(cuò)誤的代碼案例
這篇文章主要介紹了Rxjs?中怎么處理和抓取錯(cuò)誤,本文,我們學(xué)習(xí)了如何使用?catchError?在數(shù)據(jù)流中抓取錯(cuò)誤,怎么去修改和返回?observable,或者使用?EMPTY?不去觸發(fā)組件中的錯(cuò)誤,需要的朋友可以參考下2022-08-08
靜態(tài)的動(dòng)態(tài)續(xù)篇之來點(diǎn)XML
靜態(tài)的動(dòng)態(tài)續(xù)篇之來點(diǎn)XML...2006-12-12
uniapp實(shí)現(xiàn)app檢查更新與升級詳解(uni-upgrade-center)
UniApp是一個(gè)跨平臺(tái)的開發(fā)框架,可以同時(shí)開發(fā)iOS和Android應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app檢查更新與升級(uni-upgrade-center)的相關(guān)資料,需要的朋友可以參考下2023-11-11
javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非常基礎(chǔ)的javascript知識(shí),但由于JS太靈活了,所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán),算是給比我還新手的新手解惑吧,少走彎路2012-08-08
JS實(shí)現(xiàn)合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)只留一個(gè)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)只留一個(gè)的方法,涉及JavaScript數(shù)組合并及去重的相關(guān)技巧,需要的朋友可以參考下2015-12-12
初學(xué)JavaScript_03(ExtJs Grid的簡單使用)
Ext JS Grid的簡單使用:(從土豆的文檔中學(xué)到)2008-10-10

