JavaScript設(shè)計(jì)模式之建造者模式介紹
建造者模式說明
1. 將一個(gè)復(fù)雜對(duì)象的 構(gòu)造 與它的表示相分離,使同樣的創(chuàng)建過程可有不同的表示,這就叫做建造者模式。
2. 面向?qū)ο笳Z言中的說明,主要角色:
1>. Builder 這個(gè)接口類,定義這個(gè)建造者[工人],統(tǒng)一的可操作的行為方式,它表示一個(gè)復(fù)雜的結(jié)構(gòu)對(duì)象;
2>. ConcreteBuilder 用于創(chuàng)建[實(shí)現(xiàn)] Builder 各種形態(tài)的實(shí)例對(duì)象,來表示 Builder 不同的表示;
3>. Director 這個(gè)指揮者 用于指導(dǎo) Builder 實(shí)例的執(zhí)行過程跟形式,用于與 Builder 的實(shí)例 表現(xiàn) 相分離,用于指導(dǎo) 這個(gè) Builder 實(shí)例 按某規(guī)則順序來創(chuàng)建生成 產(chǎn)品結(jié)果;
4>. ResultObject 創(chuàng)建的結(jié)果都會(huì)生成一個(gè)結(jié)果對(duì)象;這是具體創(chuàng)建者根據(jù) Director 指導(dǎo)創(chuàng)建的結(jié)果;
3. 建造者模式實(shí)際,就是一個(gè)指揮者,一個(gè)建造者,一個(gè)使用指揮者調(diào)用具體建造者工作、并得從具體建造者得出結(jié)果的客戶;
4. 建造者模式,模擬場(chǎng)景:[看到一個(gè)說明建造者模式描述的例子很好]
說一戶家人要建房子,但房子主人或家里其他人是不懂得如何去建房子的,所以他得去請(qǐng)幾個(gè)工人,這個(gè)建房子的隊(duì)伍還得有個(gè)工頭,來按房主人的想法來建一套房子,工頭按房主人的要求設(shè)計(jì)要求工人如何如何做;
工頭說,第一步先把房整體骨架搭起來,第二步睡房建造好,第三步把廚房裝飾好,第四步把客廳建造裝飾完畢,第五步...
工頭是不做事的,但具體建造者必須按照工頭的要求來做,第一步,第二步的這樣步驟來建造,直至整個(gè)房子完成;
創(chuàng)建者必須要有創(chuàng)建這個(gè)房屋的所有技能,即建骨架,裝飾睡房等...,即建造者所做的事,或所具有的能力,必須大于或等于指揮者要求要做的事,或具有的能力;
即指揮者是個(gè)組織者,而建造者提供技能;
5. JavaScript 這種弱語言里,沒有接口這樣的東西,就忽略接口定義這一層,直接創(chuàng)建具體建造者,再建一個(gè) 指導(dǎo)類來回調(diào)這個(gè)建造者;
實(shí)例源碼
1. 工人建造者X:
function workerBuilder() {
this.workOne = function() {
//建房子骨架
}
this.workTwo=function() {
//建睡房
}
this.workThree=function() {
//建廚房
}
this.workFour=function() {
//建客廳
}
//....
this.getResult = function() {
//建成房子
var house = new House();
//house.HouseFrame ...
return house;
}
}
workBuilder 是具體建造者類,workOne, Two是要做的事情,建骨架等;
當(dāng)然 workBuilder 可以多建幾個(gè),用于表示 工人 對(duì)于每個(gè)工作執(zhí)行的方法不一樣;但工作內(nèi)容是一樣的;
2. 指揮者類
function Director() {
this.construct = function(builder) {
builder.workOne();
builder.workTwo();
builder.workThree();
builder.workFour();
//...
//上面的內(nèi)容,順序可設(shè)置,并且工作項(xiàng)也可以設(shè)定
}
}
指揮者類下的 指導(dǎo) 方法,有對(duì) 建造者 的回調(diào)引用,內(nèi)容包括建者工作內(nèi)容幾項(xiàng)或全部; 指揮者對(duì)建造者工人要做的事情進(jìn)行組織跟安排;
3. 產(chǎn)品房子
function House() {
this.HouseFrame = '';
this.Room = '';
this.Kitchen = '';
this.LivingRoom = '';
//...
}
4. 使用方法
var builder = new workBuilder();
var director = new Director();
director.construct(builder);
var house = builder.getResult();
第四步,整個(gè)使用相當(dāng)于客戶:房主人,房主人請(qǐng) Director 工頭來建房子,但是工頭是不做事的,所以他指揮 builder 工個(gè)來建子,最后房主人從工人那里取得建好的房子;
其他說明
建造者模式比較適于那種,內(nèi)容[抽象]復(fù)雜,實(shí)際場(chǎng)景表現(xiàn)又多個(gè)不一樣,比如工作內(nèi)容或順序不一致的情況;比如每個(gè)人每天的生活過程啊,還有像上面的實(shí)例類似的場(chǎng)景;通過指導(dǎo)者層,可以減少對(duì)很多相似工作場(chǎng)合,但工作規(guī)則順序不一致的環(huán)境;可以大減少對(duì)實(shí)際對(duì)象的建造抽象;
相關(guān)文章
創(chuàng)建一個(gè)復(fù)制UBB軟件信息的鏈接或按鈕的js代碼
2008-01-01
一文詳解preact的高性能狀態(tài)管理Signals
這篇文章主要介紹了一文詳解preact的高性能狀態(tài)管理Signals,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2022-09-09
Popup彈出框添加數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Popup彈出框添加數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
javascript document.compatMode兼容性
文檔模式在開發(fā)中貌似很少用到,最常見的是就是在獲取頁面寬高的時(shí)候,比如文檔寬高,可見區(qū)域?qū)捀叩取?/div> 2010-02-02
微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
詳細(xì)談?wù)凟S6中的symbol數(shù)據(jù)類型
這篇文章主要給大家介紹了關(guān)于ES6中symbol數(shù)據(jù)類型的相關(guān)資料,Symbol函數(shù)的特性是每一個(gè)Symbol函數(shù)的返回值都是唯一的,可以通過給symbol函數(shù)傳遞不同的參數(shù)產(chǎn)生具有不同標(biāo)記的值,需要的朋友可以參考下2021-08-08
nullJavascript中創(chuàng)建對(duì)象的五種方法實(shí)例
今天上午,非常郁悶,有很多簡(jiǎn)單基礎(chǔ)的問題搞得我有些迷茫,哎,代碼幾天不寫就忘。目前又不當(dāng)COO,還是得用心記代碼哦!2013-05-05
基于JavaScript實(shí)現(xiàn)文字超出部分隱藏
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)文字超出部分隱藏 的相關(guān)資料,需要的朋友可以參考下2016-02-02最新評(píng)論

