前端的设计模式系列-外观(门面)模式

2023-02-28

模式 post 外观

本文转载自微信公众号「windliang」，作者windliang。转载本文请联系windliang公众号。代码也写了几年了，设计模式处于看了忘，忘了看的状态，最近对设计模式有了点感觉，索性就再学习总结下吧。大部分讲设计模式的文章都是使用的Java、C++这样的以类为基础的静态类型语言，作为前端开发

本文转载自微信公众号「windliang」，作者windliang。转载本文请联系windliang公众号。

代码也写了几年了，设计模式处于看了忘，忘了看的状态，最近对设计模式有了点感觉，索性就再学习总结下吧。

大部分讲设计模式的文章都是使用的 Java、C++ 这样的以类为基础的静态类型语言，作为前端开发者，js 这门基于原型的动态语言，函数成为了一等公民，在实现一些设计模式上稍显不同，甚至简单到不像使用了设计模式，有时候也会产生些困惑。

下面按照「场景」-「设计模式定义」- 「代码实现」- 「更多场景」-「总」的顺序来总结一下，如有不当之处，欢迎交流讨论。

场景

网络请求中，我们一般使用 axios 库，支持用 Promise 风格调用。

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);
    });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

可以看到上边的 get 和 post 传参并不统一，使用起来会比较繁琐，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.”外观模式相当于为一个相对复杂的接口或者结构提供一个上层接口供用户使用，看一下UML 类图。

举一个简单例子，比如开电脑是一个复杂的过程，我们可以封装成一个函数来实现：

/* 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();
 }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

改写成 js 。

算了不改写了，哈哈，直白点其实就是把几个函数封装到了一个函数来调用。

UML 类图中外观模式会和很多 class交互，但在 js 中可能会很少遇到这种情况，通常是当参数比较复杂或者某个功能使用起来比较麻烦的时候我们就可以通过外观模式进行简化。

代码实现

回到开头 axios 的问题，我们可以对axios 进行一层封装。

// 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" } }
    );
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

然后引用 request.js 进行调用。

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);
    });

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.