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

朴灿烈づ我的快乐病毒、 2022-10-03 00:33 200阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

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

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

外观模式的类图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

代码如下

class Facade {
        constructor(a, b, c) {
            this.a = a;
            this.b = b;
            this.c = c;
        }
        funA() {
            this.a.funA();
        }
        funB() {
            this.b.funB();
        }
        funC() {
            this.c.funC();
        }
    }
    
    class SystemA {
        funA() {
            console.log("SystemA 工作")
        }
    }
    class SystemB {
        funB() {
            console.log("SystemB 工作")
        }
    }
    class SystemC {
        funC() {
            console.log("SystemC 工作")
        }
    }
    
    const a = new SystemA();
    const b = new SystemB();
    const c = new SystemC();
    const fa = new Facade(a, b, c);
    
    fa.funA();
    fa.funB();
    fa.funC();

![2019062214555894.png][]

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

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

app.use = function (path, handle) {
            if (typeof handle !== "function") { //表明没有写路径 path
                handle = path;
                path = "/"; 
            }
            routers.push({
                method: "middle", path, handle
            })
        }

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220109/2e9bb4fae9164296b287d65b08ac97c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220109/317f1dab96224b8f9ff0a41c1a425edc.png
[2019062214555894.png]: /images/20220109/ad7a3f3d8760453387727c89f960850a.png