外觀模式
隱藏系統(tǒng)的復(fù)雜性,并向客戶端提供了一個(gè)客戶端可以訪問系統(tǒng)的接口,這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型模式,它向現(xiàn)有的系統(tǒng)添加一個(gè)接口假勿，來隱藏系統(tǒng)的復(fù)雜性.
-
圖例
image.png
- 代碼實(shí)現(xiàn)
class Chips{
create(){
return console.log('薯?xiàng)l')
}
}
class Hamburg{
create(){
return console.log('漢堡包')
}
}
class Coke{
create(){
return console.log('可樂')
}
}
class Somecounter{
constructor(){
this.chips=new Chips()
this.hamburg=new Hamburg()
this.coke=new Coke()
}
make(){
this.chips.create()
this.hamburg.create()
this.coke.create()
}
}
class Client{
constructor(){
this.somecounter=new Somecounter();
}
order(){
return this.somecounter.make()
}
}
let client=new Client()
client.order() //薯?xiàng)l 漢堡包 可樂
- 應(yīng)用場(chǎng)景
function ajax(type, url, callback, data) {
// 根據(jù)當(dāng)前瀏覽器獲取對(duì)ajax連接對(duì)象的引用
var xhr = (function () {
try {
// 所有現(xiàn)代瀏覽器所使用的標(biāo)準(zhǔn)方法
return new XMLHttpRequest();
} catch (e) {}
// 較老版本的internet Explorer兼容
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
} catch (e) {}
try {
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
} catch (e) {}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
// 如果沒能找到相關(guān)的ajax連接對(duì)象搓谆，則跑出一個(gè)錯(cuò)誤。
throw new Error("Ajax not support in this browser.")
}())
STATE_LOADED = 4,
STATUS_OK = 200;
// 一但從服務(wù)器收到表示成功的相應(yīng)消息养葵，則執(zhí)行所給定的回調(diào)方法
xhr.onreadystatechange = function (){
if (xhr.readyState !== STATE_LOADED) {
return;
}
if (xhr.state == STATUS_OK) {
callback(xhr.responseText);
}
}
// 使用瀏覽器的ajax連接對(duì)象來向所給定的URL發(fā)出相關(guān)的調(diào)用
xhr.open(type.toUpperCase(), url);
xhr.send(data);
}
// 使用方法
ajax("get", "/user/12345", function (rs) {
alert('收到的數(shù)據(jù)為：' + rs);
})
| 優(yōu)點(diǎn) |
|---|
| 1.實(shí)現(xiàn)了子系統(tǒng)與客戶端之間松耦合的關(guān)系. |
| 2.客戶端屏蔽了子系統(tǒng)組件颜阐，減少了客戶端所處理的對(duì)象數(shù)目,并使得子系統(tǒng)使用起來更加容易. |
