JavaScript设计模式 -- 外观模式

在实际开发中，往往会遇到多个子系统协同工作时，直接操作各个子系统不仅接口繁琐，还容易导致客户端与内部实现紧密耦合。**外观模式（Facade Pattern）**通过为多个子系统提供一个统一的高层接口，将复杂性隐藏在内部，从而降低耦合，提高代码的可维护性与易用性。

本文将详细介绍外观模式的基本概念、结构和优缺点，并通过多个示例展示如何在不同场景下运用外观模式。

外观模式简介

外观模式属于结构型设计模式，其核心思想是为多个复杂子系统提供一个统一的接口（外观），从而让客户端无需了解内部实现细节即可调用系统功能。外观模式不仅能简化调用流程，还能使系统的内部变化对客户端透明，便于后续扩展和维护。

---

外观模式的结构与特点

主要角色：

• 外观（Facade）
  对外提供一个统一的接口，封装多个子系统的功能调用。

• 子系统（Subsystem）
  完成具体的业务逻辑，各自拥有独立的接口和实现。

• 客户端（Client）
  只需通过外观接口与系统交互，无需关心子系统内部的复杂细节。

特点：

• 简化接口：将复杂的操作组合成简单的方法调用。
• 降低耦合：客户端只依赖外观接口，而不直接与各个子系统耦合。
• 隐藏复杂性：将系统内部的实现细节封装在外观类中，对外部屏蔽。

---

多方面示例详解

下面通过多个示例，展示如何利用外观模式解决不同场景下的复杂性问题。

示例 1：家庭影院系统

在家庭影院中，通常需要协调音响、投影仪、灯光、蓝光播放器等多个设备。直接控制这些设备非常繁琐，使用外观模式可以为家庭影院提供一键启动和关闭的简单接口。

// 子系统：音响
class Amplifier {
  on() {
    console.log('音响开启');
  }
  off() {
    console.log('音响关闭');
  }
  setVolume(level) {
    console.log(`音响音量设置为 ${level}`);
  }
}

// 子系统：投影仪
class Projector {
  on() {
    console.log('投影仪开启');
  }
  off() {
    console.log('投影仪关闭');
  }
  setInput(input) {
    console.log(`投影仪输入源设置为 ${input}`);
  }
}

// 子系统：灯光
class TheaterLights {
  dim(level) {
    console.log(`灯光调暗到 ${level}%`);
  }
  on() {
    console.log('灯光开启'