JavaScript — 设计模式 结构性设计模式-外观模式

外观模式：指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。

其中Facade就一个提供统一接口的高层接口。上层用户不用考虑差异，只需要请求Facade接口，Facade会帮助你解决。

实际生活中，餐厅服务员就是一个Facade接口，无论你点餐，问什么时候上餐，洗手间在哪，还是结账都是通过和服务员打交道的。

外观模式的类图

代码如下

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
40
41
42
1class Facade {

2    constructor(a, b, c) {

3        this.a = a;

4        this.b = b;

5        this.c = c;

6    }

7    funA() {

8        this.a.funA();

9    }

10    funB() {

11        this.b.funB();

12    }

13    funC() {

14        this.c.funC();

15    }

16}

17

18class SystemA {

19    funA() {

20        console.log("SystemA 工作")

21    }

22}

23class SystemB {

24    funB() {

25        console.log("SystemB 工作")

26    }

27}

28class SystemC {

29    funC() {

30        console.log("SystemC 工作")

31    }

32}

33

34const a = new SystemA();

35const b = new SystemB();

36const c = new SystemC();

37const fa = new Facade(a, b, c);

38

39fa.funA();

40fa.funB();

41fa.funC();

42

在前端开发过程中，如何使用外观模式？

1
2
3
4
5
6
7
8
9
10
1const addEvent = function (el, ev, fn) {

2    if (el.addEventListener) {

3        el.addEventListener(ev, fn, false);

4    } else if (el.attachEvent) {

5        el.attachEvent('on' + ev, fn);

6    } else {

7        el['on' + ev] = fn;

8    }

9}; 

10

这是一个通过外观模式来实现跨浏览器的方法。

1
2
3
4
5
6
7
8
9
10
1    app.use = function (path, handle) {

2        if (typeof handle !== "function") { //表明没有写路径 path

3            handle = path;

4            path = "/"; 

5        }

6        routers.push({

7            method: "middle", path, handle

8        })

9    }

10

在express框架中，use可以不写path，那么此时就只有一个参数，我们就需要对这种情况进行处理。

外观模式在JS部分更多的是做兼容处理。