設(shè)計(jì)模式并非是難以理解, 或是難以應(yīng)用到實(shí)踐中的, 相反的, 設(shè)計(jì)模式恰恰代表了某些場(chǎng)景下的最佳實(shí)踐! 這些設(shè)計(jì)模式通常被有經(jīng)驗(yàn)的開(kāi)發(fā)者們所采用。
設(shè)計(jì)模式是開(kāi)發(fā)者們?cè)陂_(kāi)發(fā)過(guò)程中面臨的一般問(wèn)題的解決方案黑忱。 這些解決方案是眾多開(kāi)發(fā)者們經(jīng)過(guò)長(zhǎng)時(shí)間的實(shí)驗(yàn)和錯(cuò)誤所總結(jié)出來(lái)的
本文將講解前端 (javascript) 的設(shè)計(jì)模式概念!
建造者模式的封裝性很好, 建造者模式不要求調(diào)用者了解構(gòu)建過(guò)程, 只需要關(guān)注結(jié)果, 在多人協(xié)作中這種模式是非常常見(jiàn)的
建造者模式要素
這是在網(wǎng)上找到的一段比較符合建造者模式的定義
產(chǎn)品類(lèi)(Product): 一般是一個(gè)較為復(fù)雜的對(duì)象, 也就是說(shuō)創(chuàng)建對(duì)象的過(guò)程比較復(fù)雜, 一般會(huì)有比較多的代碼量宴抚。
抽象建造者類(lèi)(Builder): 將建造的具體過(guò)程交與它的子類(lèi)來(lái)實(shí)現(xiàn)，這樣更容易擴(kuò)展甫煞。
建造者類(lèi)ConcreteBuilder: 組建產(chǎn)品菇曲；返回組建好的產(chǎn)品。
指導(dǎo)類(lèi)Director: 負(fù)責(zé)調(diào)用適當(dāng)?shù)慕ㄔ煺邅?lái)組建產(chǎn)品抚吠，指導(dǎo)類(lèi)一般不與產(chǎn)品類(lèi)發(fā)生依賴(lài)關(guān)系常潮，與指導(dǎo)類(lèi)直接交互的是建造者類(lèi)
建造者模式的例子
如我們要實(shí)現(xiàn)一個(gè)倉(cāng)庫(kù)檢查系統(tǒng)
每個(gè)倉(cāng)庫(kù)都需要檢查
- 燈是否完好
- 倉(cāng)庫(kù)貨物數(shù)量
- 倉(cāng)庫(kù)防火情況
// 產(chǎn)品類(lèi), 最終的檢查結(jié)果
function Result() {
this.lamp = false;
this.length = false;
this.fireproof = false;
}
Result.prototype.getResult = function () {
return {
lamp: this.lamp,
length: this.length,
fireproof: this.fireproof
}
}
// 抽象生產(chǎn)者, 檢查過(guò)程需要一致
function Inspect(data) {
var placeholder = function () { };
this.checkLamp = data.checkLamp || placeholder;
this.checkLength = data.checkLength || placeholder;
this.checkFireproof = data.checkFireproof || placeholder;
this.getResult = data.getResult || placeholder;
}
// 指導(dǎo)者
function Director(builder) {
this.builder = builder;
}
Director.prototype.build = function () {
var builder = this.builder;
builder.checkLamp();
builder.checkLength();
builder.checkFireproof();
return builder.getResult();
}
// 倉(cāng)庫(kù)1
function Warehouse1() {
var result = new Result();
return new Inspect({
// 檢查1號(hào)倉(cāng)庫(kù)的燈
checkLamp: function () {
result.lamp = true;
},
// 檢查1號(hào)倉(cāng)庫(kù)的貨物數(shù)量
checkLength: function () {
result.length = true;
},
// 檢查1號(hào)倉(cāng)庫(kù)的防火情況
checkFireproof: function () {
result.fireproof = true;
},
// 返回
getResult: function () {
return result;
}
});
}
// 倉(cāng)庫(kù)2
function Warehouse1() {
var result = new Result();
return new Inspect({
// 檢查2號(hào)倉(cāng)庫(kù)的燈
checkLamp: function () {
result.lamp = true;
},
// 檢查2號(hào)倉(cāng)庫(kù)的貨物數(shù)量
checkLength: function () {
result.length = true;
},
// 檢查2號(hào)倉(cāng)庫(kù)的防火情況
checkFireproof: function () {
result.fireproof = true;
},
// 返回
getResult: function () {
return result;
}
});
}
// 檢查1號(hào)倉(cāng)庫(kù)
var warehouse1 = new Warehouse1(); // 創(chuàng)建一號(hào)倉(cāng)庫(kù)的檢查
var director1 = new Director(warehouse1); // 創(chuàng)建指導(dǎo)者
var result1 = director1.build(); // 執(zhí)行檢查并返回結(jié)果
// 檢查2號(hào)倉(cāng)庫(kù)
var warehouse2 = new Warehouse1(); // 創(chuàng)建二號(hào)倉(cāng)庫(kù)的檢查
var director2 = new Director(warehouse2); // 創(chuàng)建指導(dǎo)者
var result2 = director2.build(); // 執(zhí)行檢查并返回結(jié)果
其他設(shè)計(jì)模式
單例模式: http://www.reibang.com/p/4c0604f116ba
構(gòu)造函數(shù)模式: http://www.reibang.com/p/cf809d980459
簡(jiǎn)單工廠(chǎng)模式: http://www.reibang.com/p/4293450926c2
抽象工廠(chǎng)模式: http://www.reibang.com/p/d6138f36e6e2
裝飾者模式: http://www.reibang.com/p/16cf284ab810
外觀(guān)模式: http://www.reibang.com/p/179ae2a13c59
