TypeScript 设计模式之【外观模式】

最新推荐文章于 2024-10-16 17:27:55 发布

bobostudio1995

最新推荐文章于 2024-10-16 17:27:55 发布

阅读量860

点赞数 26

分类专栏： TypeScript 设计模式文章标签： typescript 设计模式外观模式前端 javascript

本文链接：https://blog.csdn.net/bobostudio1995/article/details/142462909

版权

TypeScript 设计模式专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

**外观模式**：简化复杂系统的购物平台
外观模式的秘密

在这里插入图片描述

外观模式：简化复杂系统的购物平台

你有没有遇到过这样的情况，你有一个复杂的系统，里面有很多子系统和组件，每次使用它们都需要写很多代码，感觉非常繁琐。这时候，你可能会希望有一个简单的接口，能够帮你隐藏这些复杂性，让你更轻松地使用系统。

例如你在网上购物，你可以通过一个简单的购物平台，来浏览、选择和购买商品，而不需要了解每个商家的具体操作流程。外观模式就像是这个购物平台，能够帮你简化购物过程，让你更轻松地完成购物！

外观模式的秘密

外观模式就像是给你的系统加上了一层"购物平台"，它提供了一个简单的接口，来隐藏系统的复杂性。通过这个接口，你可以更轻松地使用系统，而不需要了解系统的内部细节。

外观模式有什么利与害？

外观模式优点是可以简化复杂系统的使用，让你更轻松地使用系统，它遵循单一职责原则和开闭原则，对扩展开放，对修改关闭。缺点是过度使用，可能会导致外观类变得臃肿，难以维护。

如何使用外观模式来简化你的系统

外观涉及角色

外观(ShoppingFacade)：提供一个简单的购物平台接口，来隐藏各个商家的复杂操作流程
子系统(MerchantA,MerchantB)：各个商家和他们的具体操作流程

外观步骤

创建一个购物平台类，提供一个简单的购物接口
在购物平台类中，调用各个商家的功能
使用购物平台类，来简化购物过程

选择合适的购物平台类，你就能轻松地简化复杂的购物过程，让它变得更加易用和灵活！

代码实现案例

// 子系统A - 商家A
class MerchantA {
  browseProducts(): void {
    console.log("浏览商家A的商品");
  }

  selectProduct(): void {
    console.log("选择商家A的商品");
  }

  purchaseProduct(): void {
    console.log("购买商家A的商品");
  }
}

// 子系统B - 商家B
class MerchantB {
  browseProducts(): void {
    console.log("浏览商家B的商品");
  }

  selectProduct(): void {
    console.log("选择商家B的商品");
  }

  purchaseProduct(): void {
    console.log("购买商家B的商品");
  }
}

// 外观类 - 购物平台
class ShoppingFacade {
  private merchantA: MerchantA;
  private merchantB: MerchantB;

  constructor() {
    this.merchantA = new MerchantA();
    this.merchantB = new MerchantB();
  }

  browseAllProducts(): void {
    console.log("通过购物平台浏览所有商品");
    this.merchantA.browseProducts();
    this.merchantB.browseProducts();
  }

  selectAllProducts(): void {
    console.log("通过购物平台选择所有商品");
    this.merchantA.selectProduct();
    this.merchantB.selectProduct();
  }

  purchaseAllProducts(): void {
    console.log("通过购物平台购买所有商品");
    this.merchantA.purchaseProduct();
    this.merchantB.purchaseProduct();
  }
}

// 使用外观类
const shoppingFacade = new ShoppingFacade();
shoppingFacade.browseAllProducts(); // 输出: 通过购物平台浏览所有商品, 浏览商家A的商品, 浏览商家B的商品
shoppingFacade.selectAllProducts(); // 输出: 通过购物平台选择所有商品, 选择商家A的商品, 选择商家B的商品
shoppingFacade.purchaseAllProducts(); // 输出: 通过购物平台购买所有商品, 购买商家A的商品, 购买商家B的商品