immersive-music-player 播放样式设计

为了更好地个性化配置音乐播放器，immersive-music-player 开发了配置音乐播放进度条样式啦！！！在这里记录一下自己开发的思路。

开发的难点在于：播放样式主题配置开放给了配置者， 要注意校验输入的合法性，同时如何将输入的配置转化为样式，所有样式不能写死了。

1. 通过 vuepress 的 options 钩子，获取到用户输入的配置参数

const { resolve } = require("path");

module.exports = (options, context) => ({
  define() {
    const { sliderStyle = "Nyancat", playListID = 633015043 } = options;

    return {
      SLIDER_STYLE: sliderStyle,
      PLAYLIST_ID: playListID,
    };
  },
  name: "vuepress-plugin-immersive-music-player",
  enhanceAppFiles: resolve(__dirname, "./bin/enhanceAppFile.js"),
  globalUIComponents: "szPlayer",
});

通过 options 钩子获取用户配置的播放进度条样式和播放歌单 ID，同时也需要定义默认的参数，用户也可以选择不进行配置。

2. 判断用户输入是否合法

barStyle() {
    // 样式判断
    if (
        [
          "isMario", "spitRainbow", "rainbow", "nyancat"
        ].includes(this.sliderStyle)
    ){
        // ......
    }

在这里通过includes方法来判断用户配置项是否合法，并进行后续样式计算等步骤。

提示

在开放配置的时候，这里就要注意前端安全方面的知识了，不能完全信任用户输入的内容，需要对用户的输入进行过滤或转译，要不然很容易被XSS攻击。关于XSS攻击和CSRF攻击:Web开发常见攻击及应对方法 (opens new window)

后面开放输入歌单ID自定义播放时，input采用的是number类型，只能输入数字，避免利用输入对网站进行攻击，算是比较偷懒的保护措施。

3. 利用Vue生命周期，计算样式属性并绑定在DOM上

判断合法性后，利用计算属性来为播放进度条添加样式:

barStyle() {
      // 样式判断
      if (
        [
          "isMario", "spitRainbow", "rainbow", "nyancat"
        ].includes(this.sliderStyle)
      ) {
        if (this.sliderStyle === "isMario") {
          return {
            mario: true,
            "mario-stop": !this.player._playing,
          };
        }
        // ......
      }

并把计算属性得到的样式类绑定在 DOM 元素上，将不同样式写在 css 文件中，这样就完成了个性化播放进度条样式的开发啦！

created 期间初始化顺序：合法校验 props -- methods 代理到 vm 实例 -- 检验 data - computed -- watch

扩展 —— Vue 的生命周期之 created()做了啥？

在开发过程中，对Vue的created 这个生命周期比较好奇，笼统的来说是进行了初始化，这个时候已经可以访问data()中的this了，但同时还包括computed计算属性，watch、methods，这些初始化顺序是什么样的呢？

关于同一个域名下页面通信

因为开发之后发现多开几个页面的话，每个音乐都会初始化播放，会导致多个页面同时播放，进度也不会被存储。这样肯定是不行的啊。