06 JavaScript结构型设计模式之 - 外观模式
待兔 634 3

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

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

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

例子二: 第三方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()
    }
}

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

评论区

索引目录