JavaScript设计模式在音乐流媒体服务中的应用与优化实践

class Song {
    constructor(title, artist, format) {
      this.title = title;
      this.artist = artist;
      this.format = format; // 例如: "MP3", "WAV"
    }
}

// Decoder.js (策略模式 - 抽象策略)
class Decoder {
    decode(format) {
      return `Decoding ${format} format...`;
    }
}

// 具体策略：MP3解码器
class Mp3Decoder extends Decoder {
    decode(format) {
      return `Decoding MP3 format: ${format}...`;
    }
}

// 具体策略：WAV解码器
class WavDecoder extends Decoder {
    decode(format) {
      return `Decoding WAV format: ${format}...`;
    }
}

// DecoderFactory.js (工厂模式)
class DecoderFactory {
    createDecoder(format) {
      switch (format) {
        case "MP3":
          return new Mp3Decoder();
        case "WAV":
          return new WavDecoder();
        default:
          throw new Error(`Decoder not available for format: ${format}`);
      }
    }
}

// MusicPlayer.js (观察者模式 - 主题/发布者)
class MusicPlayer {
    constructor() {
      this.observers = [];
    }

    play(song) {
      const message = `Playing song: ${song.title} - ${song.artist}`;
      this.notifyObservers(); // 通知所有观察者
      return message;
    }

    registerObserver(observer) {
      this.observers.push(observer);
    }

    removeObserver(observer) {
      const index = this.observers.indexOf(observer);
      if (index !== -1) {
        this.observers.splice(index, 1);
      }
    }

    notifyObservers() {
      this.observers.forEach((observer) => console.log(observer.update()));
    }
}

// Observer.js (观察者模式 - 观察者)
class Observer {
    constructor() {
      this.subject = null;
    }

    setSubject(subject) {
      this.subject = subject;
      this.subject.registerObserver(this); // 注册自身为观察者
    }

    update() {
      // UI更新逻辑，例如：更新播放进度条、显示当前歌曲信息
      return "Updating UI...";
    }
}

// 使用原生事件机制的MusicPlayer
class MusicPlayerEvent extends EventTarget {
    play(song) {
        const message = `Playing song: ${song.title} - ${song.artist}`;
        this.dispatchEvent(new CustomEvent('playbackchange', { detail: { song, status: 'playing' } }));
        return message;
    }
    // ... 其他播放控制方法
}

// 监听播放事件
const player = new MusicPlayerEvent();
player.addEventListener('playbackchange', (event) => {
    console.log(`UI Updated: ${event.detail.song.title} is ${event.detail.status}`);
});

// Playlist.js (组合模式)
class Playlist {
    constructor(name) {
      this.name = name;
      this.songs = []; // 可以包含Song对象，也可以扩展为包含Playlist对象
    }

    addSong(song) {
      this.songs.push(song);
    }

    removeSong(song) {
      const index = this.songs.findIndex(
        (s) => s.title === song.title && s.artist === song.artist
      );
      if (index !== -1) {
        this.songs.splice(index, 1);
      }
    }

    // 可以在此添加播放整个列表、获取列表总时长等方法
}

// MusicFacade.js (外观模式)
class MusicFacade {
    constructor() {
      this.streamingService = { subscribed: false }; // 模拟订阅服务
      this.musicPlayer = new MusicPlayer();
      this.decoderFactory = new DecoderFactory();
      this.playlists = [];
    }

    subscribe() {
      this.streamingService.subscribed = true;
      return "Subscribed to the music streaming service.";
    }

    unsubscribe() {
      this.streamingService.subscribed = false;
      return "Unsubscribed from the music streaming service.";
    }

    playMusic(song) {
      if (this.streamingService.subscribed) {
        const decoder = this.decoderFactory.createDecoder(song.format);
        const decodeMessage = decoder.decode(song.format);
        const playMessage = this.musicPlayer.play(song);
        return `${decodeMessage}\n${playMessage}`;
      } else {
        return "You need to subscribe to the music streaming service to play music.";
      }
    }

    createPlaylist(name) {
      const playlist = new Playlist(name);
      this.playlists.push(playlist);
      return `Created playlist: ${name}`;
    }

    addSongToPlaylist(song, playlistName) {
      const playlist = this.playlists.find((p) => p.name === playlistName);
      if (playlist) {
        playlist.addSong(song);
        return `Added song to playlist: ${playlistName}`;
      } else {
        return `Playlist not found: ${playlistName}`;
      }
    }

    removeSongFromPlaylist(song, playlistName) {
      const playlist = this.playlists.find((p) => p.name === playlistName);
      if (playlist) {
        playlist.removeSong(song);
        return `Removed song from playlist: ${playlistName}`;
      } else {
        return `Playlist not found: ${playlistName}`;
      }
    }
}

// 实例化外观模式入口
const musicFacade = new MusicFacade();

// 注册一个观察者来监听播放器状态
const observer = new Observer();
observer.setSubject(musicFacade.musicPlayer); // 将观察者绑定到播放器

// 订阅服务
console.log(musicFacade.subscribe()); // Output: Subscribed to the music streaming service.

// 创建一首歌曲
const song = new Song("Summer of '69", "Bryan Adams", "MP3");

// 播放歌曲
console.log(musicFacade.playMusic(song));
// Output:
// Decoding MP3 format: MP3...
// Playing song: Summer of '69 - Bryan Adams
// Updating UI... (来自观察者的更新)

// 创建播放列表并添加歌曲
console.log(musicFacade.createPlaylist("My Rock Anthems")); // Output: Created playlist: My Rock Anthems
console.log(musicFacade.addSongToPlaylist(song, "My Rock Anthems")); // Output: Added song to playlist: My Rock Anthems

// 从播放列表移除歌曲
console.log(musicFacade.removeSongFromPlaylist(song, "My Rock Anthems")); // Output: Removed song from playlist: My Rock Anthems

// 取消订阅
console.log(musicFacade.unsubscribe()); // Output: Unsubscribed from the music streaming service.