06 JavaScript结构型设计模式之 - 外观模式

说到外观模式，这个用的就太多了，举个例子就知道了

例子一：开车 比如我们开车，我们不需要知道发动机是怎么工作，不知道知道刹车是怎么工作的，也不用知道方向盘是怎么工作

想加油的时候，就踩油门，想刹车的时候，就踩刹车，就是这么简单不需要知道内部的原理，通信，工作细节，只需要对外暴露一个高层次的接口就行了。

例子二：第三方SDK 我们平时用的第三方的SDK，只需要简单的调用一下就行了，其实内部做了很多的工作，只是我们不知道而已，对外就提供几个简单的接口

所以，通过上面的例子我们知道了，所谓的外观模式，我们还是望文生义 外观就是让你只看到外观，里面的看不到 ，我自己也服了，这个大白话解释我自己也感觉到很准确，哈哈

比如开车，让你只看到汽车的外观，你看不到内部的工作细节，要知道内部子系统有可能很复杂的，让你只看到外观，并且只有几个简单的上层接口，用着多方便，是吧

比如第三方SDK，不让你看到里面的甚至几十个类，上万行代码，就给让你看到一个外观类，提供几个简单的方法，你只管调用就好了

这就是我对外观模式的理解，封装了内部的子系统的复杂，对外表现一个外观类这样用着就简单多了。

那我们就来正式介绍一下外观模式

外观模式介绍

外观的英文是 facade ，所以可以叫 facade 模式

封装内部子系统，对外只表现一个外观类，提供一些高层的接口，简化了调用

外观模式的使用场景

子系统有多个的，而且有可能越往后子系统越复杂，甚至可能被替换，这样的特性，使得子系统隐藏具体的实现，对外只表现一个外观类，就显得很重要了。有这样的场景，适合用外观模式

我们以一个简单的例子来说明外观模式：就用最简单的代码有三个子系统，分别是 SystemA, SystemB , SystemC

做一件事，需要这3个系统的配合

我们先来看看这3个子系统的代码实现，代码极简，这样更容易理解原理，代码如下：

//子系统 A
class SystemA {
    doSomething1(){
        console.log('SystemA 业务逻辑 1')
    }

    doSomething2(){
        console.log('SystemA 业务逻辑 2')
    }

    doSomething3(){
        console.log('SystemA 业务逻辑 3')
    }
}

//子系统 B
class SystemB {
    doSomething1(){
        console.log('SystemB 业务逻辑 1')
    }

    doSomething2(){
        console.log('SystemB 业务逻辑 2')
    }

    doSomething3(){
        console.log('SystemB 业务逻辑 3')
    }
}

//子系统 C
class SystemC {
    doSomething1(){
        console.log('SystemC 业务逻辑 1')
    }

    doSomething2(){
        console.log('SystemC 业务逻辑 2')
    }

    doSomething3(){
        console.log('SystemC 业务逻辑 3')
    }
}

这三个子系统完成了，我们必须要这 3 子系统共同配合才能完成一件事，代码是这样的。如下：

不用外观模式代码怎么写？如下：

//新建3个子系统的对象
let sa = new SystemA()
let sb = new SystemB()
let sc = new SystemC()

//分别做自己的事
sa.doSomething1()
sa.doSomething2()
sa.doSomething3()

sb.doSomething1()
sb.doSomething2()
sb.doSomething3()

sc.doSomething1()
sc.doSomething2()
sc.doSomething3()

可以看到，我们要分别实现3个系统的对象并且要分别调用每个对象的方法这样配合才能完成一件事（比如这件事就是刹车呢，想刹车需要做这么多事，显示不好）

使用外观模式怎么写？如下

//外观类，对外只暴露 doSomething()接口
//内部的细节用户不知道
class Facade {
    constructor(){
        this.sa = new SystemA()
        this.sb = new SystemB()
        this.sc = new SystemC()
    }

    //做一件事,需要3个系统配合才行
    doSomething(){
        //子系统 sa 做的事
        this.sa.doSomething1()
        this.sa.doSomething2()
        this.sa.doSomething3()

        //子系统 sb 做的事
        this.sb.doSomething1()
        this.sb.doSomething2()
        this.sb.doSomething3()

        //子系统 sc 做的事
        this.sc.doSomething1()
        this.sc.doSomething2()
        this.sc.doSomething3()
    }
}

如上，这样的话，一个外观类提供一个简单的接口，将各个子系统的逻辑，交互隐藏起来，为用户提供一个统一的高层次的接口，使用起来也简单很多，用户也不会感觉到，因为我们使用的是外观模式，内部的变化对用户来说并不可见的，使得系统更加的灵活。

外观模式介绍

外观模式的使用场景

热门文章