JavaScript 适配器模式：优雅地连接不兼容接口122

在软件开发中，我们经常会遇到需要将不同接口或类库集成到一起的情况。有时，这些接口的设计可能并不兼容，直接使用会造成巨大的困难。这时，适配器模式就派上用场了。它像一个“翻译器”，将一个类的接口转换成客户端期望的另一个接口，从而使原本接口不兼容的类可以一起工作。本文将深入探讨 JavaScript 中的适配器模式，讲解其原理、应用场景以及不同实现方式，并结合实际案例进行阐述。

什么是适配器模式？

适配器模式属于结构型设计模式，它将一个类的接口转换成客户希望的另一个接口。适配器让原本接口不兼容的类可以一起工作，从而解决了接口不匹配的问题。它像一个插头适配器，将不同规格的插头转换成目标设备可以使用的规格。在 JavaScript 中，我们可以通过多种方式实现适配器模式，包括类适配器和对象适配器。

类适配器模式

类适配器模式使用继承来实现适配。它创建一个新的类，这个类继承自被适配的类，并同时实现目标接口。通过继承，新类可以访问被适配类的功能，并通过实现目标接口，将这些功能转换成客户端期望的接口。

以下是一个类适配器的示例，假设我们有一个老式的 `LegacyMediaPlayer` 类，它只能播放 `.mp3` 文件，而我们的客户端需要一个可以播放 `.wav` 文件的 `MediaPlayer` 接口。我们可以创建一个 `Mp3ToWavAdapter` 类来适配：```javascript
// 老式媒体播放器
class LegacyMediaPlayer {
playMp3(file) {
(`Playing MP3 file: ${file}`);
}
}
// 目标接口
interface MediaPlayer {
playWav(file: string): void;
}
// 适配器类
class Mp3ToWavAdapter extends LegacyMediaPlayer implements MediaPlayer {
playWav(file: string): void {
// 将 .wav 文件转换成 .mp3 文件，再调用老式播放器播放
const mp3File = this.convertWavToMp3(file);
this.playMp3(mp3File);
}
private convertWavToMp3(wavFile: string): string {
// 模拟 .wav 到 .mp3 的转换
(`Converting ${wavFile} to MP3...`);
return `${wavFile}.mp3`;
}
}
// 客户端代码
const adapter = new Mp3ToWavAdapter();
(""); // 输出：Converting to MP3... Playing MP3 file: .mp3
```

对象适配器模式

对象适配器模式使用组合而不是继承来实现适配。它创建一个新的类，这个类包含一个对被适配类的引用，并通过委托的方式实现目标接口。这种方式更加灵活，因为它避免了对被适配类的修改，并且可以适配多个被适配类。

以下是一个对象适配器的示例，使用相同的老式 `LegacyMediaPlayer` 类和 `MediaPlayer` 接口：```javascript
// 对象适配器
class Mp3ToWavAdapter {
private legacyMediaPlayer: LegacyMediaPlayer;
constructor(legacyMediaPlayer: LegacyMediaPlayer) {
= legacyMediaPlayer;
}
playWav(file: string): void {
const mp3File = this.convertWavToMp3(file);
.playMp3(mp3File);
}
private convertWavToMp3(wavFile: string): string {
(`Converting ${wavFile} to MP3...`);
return `${wavFile}.mp3`;
}
}
// 客户端代码
const legacyPlayer = new LegacyMediaPlayer();
const adapter = new Mp3ToWavAdapter(legacyPlayer);
(""); // 输出：Converting to MP3... Playing MP3 file: .mp3
```