JavaScript 设计模式 - 外观模式

外观模式（Facade Pattern）是一种结构型设计模式，它为复杂的子系统提供一个统一的、简化的接口，以隐藏子系统的复杂性，使客户端与子系统的交互变得更加简单。在JavaScript中，外观模式常用于库或框架的API设计，以及那些需要简化接口调用的场景。

核心概念

• 子系统（Subsystems）: 实现了具体功能的类或模块集合，这些子系统可能包含很多类和方法，彼此之间存在复杂的依赖关系。
• 外观（Facade）: 为客户端提供了一个简化的接口，它封装了对子系统的调用，并将客户端从子系统的复杂性中解耦出来。外观并不提供新的功能，而是将已存在的功能以一种更易用的方式呈现给客户端。

为什么使用外观模式

• 简化接口：减少客户端与子系统之间的耦合，使得客户端不需要了解子系统的内部结构和细节。
• 提高可用性和易用性：提供一组高层接口，使得外部调用更加简洁和直观。
• 提高灵活性：如果子系统发生变化，只需修改外观类即可，客户端代码可以保持不变。

JavaScript 示例

假设我们有一个多媒体播放器系统，它包含音频播放、视频播放、字幕控制等多个子系统。没有外观模式，客户端需要直接与这些子系统交互，代码可能会变得冗长且复杂。使用外观模式，我们可以创建一个外观类来简化这些操作。

class AudioPlayer {
  playAudio() {
    console.log("Playing audio...");
  }
  stopAudio() {
    console.log("Stopping audio...");
  }
}

class VideoPlayer {
  playVideo() {
    console.log("Playing video...");
  }
  stopVideo() {
    console.log("Stopping video...");
  }
}

class SubtitleController {
  showSubtitle() {
    console.log("Showing subtitles...");
  }
  hideSubtitle() {
    console.log("Hiding subtitles...");
  }
}

// 外观类
class MediaFacade {
  constructor() {
    this.audioPlayer = new AudioPlayer();
    this.videoPlayer = new VideoPlayer();
    this.subtitleController = new SubtitleController();
  }

  startMovie() {
    this.videoPlayer.playVideo();
    this.audioPlayer.playAudio();
    this.subtitleController.showSubtitle();
  }

  endMovie() {
    this.audioPlayer.stopAudio();
    this.videoPlayer.stopVideo();
    this.subtitleController.hideSubtitle();
  }
}

// 客户端代码
const media = new MediaFacade();
media.startMovie(); // 自动播放视频、音频并显示字幕
media.endMovie();   // 停止播放并隐藏字幕

在这个例子中，MediaFacade作为外观类，为客户端提供了startMovie和endMovie两个简单的方法，分别用于开始播放电影（包括视频、音频和字幕）和结束播放（停止视频、音频并隐藏字幕）。客户端不再需要直接与AudioPlayer、VideoPlayer和SubtitleController这些子系统交互，从而降低了代码的复杂度和耦合度。