建站
咨詢
售后
建站咨詢
新聞中心
代碼也寫了幾年了，設(shè)計模式處于看了忘，忘了看的狀態(tài)，最近對設(shè)計模式有了點(diǎn)感覺，索性就再學(xué)習(xí)總結(jié)下吧。
成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為沿河企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，沿河網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
大部分講設(shè)計模式的文章都是使用的 Java、C++ 這樣的以類為基礎(chǔ)的靜態(tài)類型語言，作為前端開發(fā)者，js 這門基于原型的動態(tài)語言，函數(shù)成為了一等公民，在實現(xiàn)一些設(shè)計模式上稍顯不同，甚至簡單到不像使用了設(shè)計模式，有時候也會產(chǎn)生些困惑。
下面按照「場景」-「設(shè)計模式定義」- 「代碼實現(xiàn)」- 「更多場景」-「總」的順序來總結(jié)一下，如有不當(dāng)之處，歡迎交流討論。
場景
網(wǎng)絡(luò)請求中，我們一般使用 axios 庫，支持用 Promise 風(fēng)格調(diào)用。
axios
.get("/api/user", {
params: {
ID: "123",
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios
.post(
"/api/user",
{
firstName: "wind",
lastName: "liang",
},
{
headers: { "Content-Type": "application/json" },
}
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
可以看到上邊的 get 和 post 傳參并不統(tǒng)一，使用起來會比較繁瑣，post還需要手動傳遞 headers 。
為了解決這些問題，我們可以通過外觀(門面)模式來解決。
外觀(門面)模式
看下 維基百科 的定義。
The facade pattern (also spelled fa?ade) is a software-design pattern commonly used in object-oriented programming. Analogous to a facade in architecture, a facade is an object that serves as a front-facing interface masking more complex underlying or structural code.”外觀模式相當(dāng)于為一個相對復(fù)雜的接口或者結(jié)構(gòu)提供一個上層接口供用戶使用，看一下UML 類圖。
舉一個簡單例子，比如開電腦是一個復(fù)雜的過程，我們可以封裝成一個函數(shù)來實現(xiàn)：
/* Complex parts */
class CPU {
public void freeze() { ... }
public void jump(long position) { ... }
public void execute() { ... }
}
class Memory {
public void load(long position, byte[] data) {
...
}
}
class HardDrive {
public byte[] read(long lba, int size) {
...
}
}
/* Fa?ade */
class Computer {
public void startComputer() {
cpu.freeze();
memory.load(BOOT_ADDRESS, hardDrive.read(BOOT_SECTOR, SECTOR_SIZE));
cpu.jump(BOOT_ADDRESS);
cpu.execute();
}
}
/* Client */
class You {
public static void main(String[] args) {
Computer facade = new Computer();
facade.startComputer();
}
}
改寫成 js 。
算了不改寫了，哈哈，直白點(diǎn)其實就是把幾個函數(shù)封裝到了一個函數(shù)來調(diào)用。
UML 類圖中外觀模式會和很多 class交互，但在 js 中可能會很少遇到這種情況，通常是當(dāng)參數(shù)比較復(fù)雜或者某個功能使用起來比較麻煩的時候我們就可以通過外觀模式進(jìn)行簡化。
代碼實現(xiàn)
回到開頭 axios 的問題，我們可以對axios 進(jìn)行一層封裝。
// request.js
import axios from 'axios';
export const get = function (url, params) {
return axios.get(url, { params });
};
export const post = function (url, params) {
return axios.post(
url,
{ ...params },
{ headers: { "Content-Type": "application/json" } }
);
};
然后引用 request.js 進(jìn)行調(diào)用。
import { get, post } from "./request";
get("/api/user", {
ID: "123",
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post("/api/user", {
firstName: "wind",
lastName: "liang",
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
補(bǔ)充一句：上邊的封裝只是為了演示外觀模式的使用，實際項目中封裝的會更加全面
通過門面模式除了簡化了我們的調(diào)用，還有一個好處就是將底層調(diào)用封裝了起來，未來如果底層需要變化，比如上邊的 axios替換為 fetch ，我們只需要去修改 request.js 即可，業(yè)務(wù)方無需感知。
更多場景
外觀模式說的寬泛的話就是將復(fù)雜的調(diào)用包裝一層變的簡單些。
我們平時用到的 Vue 的 template 、React 的 jsx ，也可以認(rèn)為使用了外觀模式，他們都將底層 dom 創(chuàng)建封裝起來，使得我們編寫頁面會變得更加簡單。
易混設(shè)計模式
前邊講到的 代理模式、適配器模式、模版方法 結(jié)構(gòu)上和外觀模式看起來都有些像，區(qū)別就在于他們的意圖不同：
適配器模式是為了解決兩個對象之間不匹配的問題，而原對象又不適合直接修改，此時可以使用適配器模式進(jìn)行一層轉(zhuǎn)換。
代理模式是為了增強(qiáng)原對象的功能，提供的接口不會改變。
模版模式是將不同功能組合在一起，只提供框架，具體實現(xiàn)還需要調(diào)用者傳進(jìn)來。
外觀模式是將比較復(fù)雜的調(diào)用進(jìn)行一層封裝，提供一個新的接口供用戶使用。
總
外觀模式是一個比較自然的設(shè)計模式，某個功能感覺用起來太麻煩還頻繁，自然會想到去封裝一層再來使用。
外觀模式一個額外好處就是未來能夠更好的應(yīng)對底層的變化。
標(biāo)題名稱：前端的設(shè)計模式系列-外觀(門面)模式
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/dphhchi.html
