外观模式-typescript

心已赠人 2022-10-06 15:56 11阅读 0赞

# 定义 #

外观是一种结构型设计模式， 能为复杂系统、 程序库或框架提供一个简单 （但有限） 的接口。

# 场景 #

**简单来说**就是大家基金都玩吧，股票应该也都懂，某一天感觉自己炒股很厉害，就投了一个亿在股票上，但是最后发现亏了好几个亿，你追悔莫及，感觉炒股太难了，需要懂很多东西，是一个很复杂的系统。然后别人告诉你可以玩基金，基金经理会帮你打理你的钱，获得的利润都是你自己的，这就相当于外观模式。基金经理就是所谓的外观，让我们避免与股票的直接接触，从而规避更大的风险。

放到程序开发中，外观类就是给复杂子系统提供一个简单的接口。 与直接调用子系统相比， 外观提供的功能可能比较有限， 但它却包含了客户端真正关心的功能。如果你的程序需要与包含几十种功能的复杂库整合， 但只需使用其中非常少的功能， 那么使用外观模式会非常方便。

## 图示： ##

没有外观模式时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]  
有了外观模式后：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]

# Typescript外观模式 #

使用示例： 使用 TypeScript 开发的程序中会经常使用外观模式。 它在与复杂程序库和 API 协作时特别有用。

class Facade { 
        protected subsystem1: Subsystem1;
    
        protected subsystem2: Subsystem2;
    
        constructor(subsystem1: Subsystem1 = null, subsystem2: Subsystem2 = null) { 
            this.subsystem1 = subsystem1 || new Subsystem1();
            this.subsystem2 = subsystem2 || new Subsystem2();
        }
    
        public operation(): string { 
            let result = 'Facade initializes subsystems:\n';
            result += this.subsystem1.operation1();
            result += this.subsystem2.operation1();
            result += 'Facade orders subsystems to perform the action:\n';
            result += this.subsystem1.operationN();
            result += this.subsystem2.operationZ();
    
            return result;
        }
    }
    
    class Subsystem1 { 
        public operation1(): string { 
            return 'Subsystem1: Ready!\n';
        }
    
        // ...
    
        public operationN(): string { 
            return 'Subsystem1: Go!\n';
        }
    }
    
    class Subsystem2 { 
        public operation1(): string { 
            return 'Subsystem2: Get ready!\n';
        }
    
        // ...
    
        public operationZ(): string { 
            return 'Subsystem2: Fire!';
        }
    }
    
    function clientCode(facade: Facade) { 
        // ...
    
        console.log(facade.operation());
    
        // ...
    }
    
    const subsystem1 = new Subsystem1();
    const subsystem2 = new Subsystem2();
    const facade = new Facade(subsystem1, subsystem2);
    clientCode(facade);

执行结果：

> Facade initializes subsystems:
> 
> Subsystem1: Ready!
> 
> Subsystem2: Get ready!
> 
> Facade orders subsystems to perform the action:
> 
> Subsystem1: Go!
> 
> Subsystem2: Fire!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70]: /images/20221005/eb13479a1e4f415cb9538ffd07f915c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5ODMxNQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/e3641f4b73584bdba39a45d822e24fbc.png