前端的設(shè)計(jì)模式系列-外觀(門面)模式

作者：windliang 2022-02-15 22:45:00

代碼也寫了幾年了，設(shè)計(jì)模式處于看了忘，忘了看的狀態(tài)，最近對(duì)設(shè)計(jì)模式有了點(diǎn)感覺，索性就再學(xué)習(xí)總結(jié)下吧。

本文轉(zhuǎn)載自微信公眾號(hào)「windliang」，作者windliang。轉(zhuǎn)載本文請(qǐng)聯(lián)系windliang公眾號(hào)。

大部分講設(shè)計(jì)模式的文章都是使用的 Java、C++ 這樣的以類為基礎(chǔ)的靜態(tài)類型語言，作為前端開發(fā)者，js 這門基于原型的動(dòng)態(tài)語言，函數(shù)成為了一等公民，在實(shí)現(xiàn)一些設(shè)計(jì)模式上稍顯不同，甚至簡單到不像使用了設(shè)計(jì)模式，有時(shí)候也會(huì)產(chǎn)生些困惑。

下面按照「場景」-「設(shè)計(jì)模式定義」- 「代碼實(shí)現(xiàn)」- 「更多場景」-「總」的順序來總結(jié)一下，如有不當(dāng)之處，歡迎交流討論。

場景

網(wǎng)絡(luò)請(qǐng)求中，我們一般使用 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)一，使用起來會(huì)比較繁瑣，post還需要手動(dòng)傳遞 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)于為一個(gè)相對(duì)復(fù)雜的接口或者結(jié)構(gòu)提供一個(gè)上層接口供用戶使用，看一下UML 類圖。

舉一個(gè)簡單例子，比如開電腦是一個(gè)復(fù)雜的過程，我們可以封裝成一個(gè)函數(shù)來實(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í)就是把幾個(gè)函數(shù)封裝到了一個(gè)函數(shù)來調(diào)用。

UML 類圖中外觀模式會(huì)和很多 class交互，但在 js 中可能會(huì)很少遇到這種情況，通常是當(dāng)參數(shù)比較復(fù)雜或者某個(gè)功能使用起來比較麻煩的時(shí)候我們就可以通過外觀模式進(jìn)行簡化。

代碼實(shí)現(xiàn)

回到開頭 axios 的問題，我們可以對(duì)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ǔ)充一句：上邊的封裝只是為了演示外觀模式的使用，實(shí)際項(xiàng)目中封裝的會(huì)更加全面

通過門面模式除了簡化了我們的調(diào)用，還有一個(gè)好處就是將底層調(diào)用封裝了起來，未來如果底層需要變化，比如上邊的 axios替換為 fetch ，我們只需要去修改 request.js 即可，業(yè)務(wù)方無需感知。

易混設(shè)計(jì)模式

前邊講到的代理模式、適配器模式、模版方法結(jié)構(gòu)上和外觀模式看起來都有些像，區(qū)別就在于他們的意圖不同：

適配器模式是為了解決兩個(gè)對(duì)象之間不匹配的問題，而原對(duì)象又不適合直接修改，此時(shí)可以使用適配器模式進(jìn)行一層轉(zhuǎn)換。

代理模式是為了增強(qiáng)原對(duì)象的功能，提供的接口不會(huì)改變。

模版模式是將不同功能組合在一起，只提供框架，具體實(shí)現(xiàn)還需要調(diào)用者傳進(jìn)來。

外觀模式是將比較復(fù)雜的調(diào)用進(jìn)行一層封裝，提供一個(gè)新的接口供用戶使用。

總

外觀模式是一個(gè)比較自然的設(shè)計(jì)模式，某個(gè)功能感覺用起來太麻煩還頻繁，自然會(huì)想到去封裝一層再來使用。

外觀模式一個(gè)額外好處就是未來能夠更好的應(yīng)對(duì)底層的變化。

責(zé)任編輯：武曉燕來源： windliang

前端設(shè)計(jì)模式