1. 该模式就是把一些复杂的流程封装成一个接口供给外部用户更简单的使用

    • 门面角色:外观模式的核心,它 被客户角色调用,它 熟悉子系统的功能,内部根据客户角色的需求预定了几种功能的组合;
    • 子系统角色:实现了子系统的功能,它对 客户角色门面角色 是未知的;
    • 客户角色:通过调用 门面角色 来完成要实现的功能;
  2. 适用 场景

    • 子系统复杂:子系统复杂,通过使用外观模式可以简化调用接口;
    • 层次复杂:系统结构层次复杂,每个层级都一个使用外观对象作为该层入口,可以简化层次间的调用接口;
  3. 优点

    • 简化调用:简化复杂系统的调用过程,无需对子系统进行深入了解,即可完成调用;
    • 降低耦合:使用外观模式,只与外观对象进行交互,不与复杂的子系统直接进行交互,降低了系统间的依赖,使耦合关系更低;子系统内部的模块更容易扩展和维护
    • 层次控制:层次结构复杂的系统,有些方法需要提供给系统外部调用,有些方法需要在内部使用,将提供给外部的功能定义在外观类中,这样既方便调用,也能将系统内部的细节隐藏起来;
    • 符合迪米特法则:最少知道原则,用户不需要了解子系统内部的情况,也不需要与子系统进行交互,只与外观类进行交互; 降低了应用层与子系统之间的耦合度;
  4. 缺点

    • 子系统扩展风险:系统内部扩展子系统时,容易产生风险;
    • 不符合开闭原则:扩展子系统时,不符合开闭原则;

类图

代码

class Sum {
  sum(a, b) {
    return a + b;
  }
}
class Minus {
  minus(a, b) {
    return a - b;
  }
}
class Multiply {
  multiply(a, b) {
    return a * b;
  }
}

class Calculator {
  constructor() {
    this.sumObj = new Sum();
    this.minusObj = new Minus();
    this.multiplyObj = new Multiply();
  }
  sum(a, b) {
    this.sumObj.sum(a, b);
  }
  minus(a, b) {
    this.minusObj.minus(a, b);
  }
  multiply(a, b) {
    this.multiplyObj.multiply(a, b);
  }
}

let calculator = new Calculator();
calculator.sum(1, 2);
calculator.minus(1, 2);
calculator.multiply(1, 2);

场景

  1. 为复杂的模块或子系统提供外界访问的模块(vuex 的 index.js 导出的模块);

  2. 子系统相互独立;

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻,我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 类图
  2. 2. 代码
  3. 3. 场景