播放器组件关键业务逻辑

三个列表

• 最近播放列表，称之为列表A
• 当前歌单列表，称之为列表B
• 播放列表，称之为列表C：隐性不可见，用于后台决定歌曲的播放顺序

三个模式

1 列表循环 2 单曲循环

单曲循环不做任何操作，则一直循环播放当前歌曲 单曲循坏模式下，点击上一首或下一首是播放上一首或下一首

3 随机播放

随机模式下，点击当前显示列表（列表A或列表B）歌曲前的播放按钮，都会把当前显示列表的数组打乱排序，再传入列表C，并找到该歌曲在乱序数组中的索引，并设置为当前播放索引。（因为当前播放歌曲是通过 arr[index] 获取，arr-列表C，index-当前播放索引）

4 另外

• 切换播放模式，都会将对应的数组重新传入列表

列表循环、单曲循环都是将列表A或列表B的数组直接传入列表C（排序不变）

随机模式是将列表A或列表B的数组打乱排序后传入

最近播放列表点击全部删除按钮

• 最近播放列表会清空，但会将当前播放的歌曲直接传入列表C，（称该歌曲为歌曲A），避免播放器无信息显示（播放器的歌曲信息是通过列表C的每一个歌曲对象获取），用户体验不佳。例如：如果不传入歌曲A，则播放器的图片、歌名、时间都不能显示。
• 列表A清空后，数组长度为0，但列表C的数组长度为1，元素为歌曲A，播放器显示的是歌曲A

（1）当列表A为空数组时点击歌曲A播放或暂停按钮时，不会重新播放，也不会unshift到列表A，因为此时只是歌曲A播放与暂停切换。当列表A为空数组时点击上一首、下一首也是播放歌曲A。当列表A或列表B为空数组时，点击全部播放，不进行任何操作

（2）当列表A清空后点击另外几首歌曲时，会把这些歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置当前播放索引

• 重复点击同一首歌曲，不会重新播放，因为重复点击是：播放->暂停->播放->...
• 当前歌单列表（列表B）没有全部删除功能和删除单首歌曲功能

删除单首歌曲

1. 删除的不是当前播放歌曲

找到该歌曲在列表A的索引，然后删除该元素，传入列表C

2 .删除的是当前播放歌曲且当前播放歌曲是列表A仅有的一首歌

找到该歌曲在列表A的索引，然后删除该元素，将只包含当前歌曲的数组传入列表C，设置当前播放索引为0，因为当列表A为空数组时，列表C只需要这一首歌曲用来给播放器显示

3. 删除的是当前播放歌曲，但当前播放歌曲不是列表A仅有的一首歌

找到该歌曲在列表A的索引，然后删除该元素，此时该歌曲仍然存在列表C并播放，在当前歌曲播放完成后，播放下一首之前，或者点击上一首或下一首时，根据播放模式排序后传入列表C，并将上述索引设置为当前索引。在列表循环和单曲循环模式下，下一首播放歌曲的索引即为被删除歌曲的索引，因此将该索引设置为当前播放索引。因为随机模式是乱序，对于下一首是随机，因此也可以直接将该索引设置为当前播放索引。如果没有下一首歌，直接设置当前索引为0。上一首播放歌曲的索引即为上述索引-1，如果超出范围，则设置为 列表C.length-1

上一首、下一首

若当前播放为列表C的第一首，点击上一首，则播放列表C的最后一首； 若当前播放为列表C的最后一首，点击下一首，则播放列表C的第一首

点击列表A和列表B歌曲的播放按钮

将该歌曲升至列表A的第一位，即找到该歌曲在列表A的索引，删除自身，然后unshift到列表A第一位，然后根据播放模式，对列表A数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置当前播放索引

• 最近播放列表和当前歌单的歌曲按列表C（任何模式）播放时，都不会将当前歌曲升至最近播放列表第一位，而是保持位置不变
• 列表A与列表B的区别之一：列表B不存在“提升歌曲”，列表A全部播放或上一首、下一首时也不会“提升歌曲”
• 当前歌单的歌曲的位置永远保持不变，除非更换歌单

播放列表A没有的歌曲

• 例如点击首页、用户页面、歌单详情页面、当前歌单不存在于列表A的歌曲

把歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到这首歌曲在列表C的索引，设置当前播放索引。这一点与上述“最近播放列表点击全部删除按钮”的第（2）点一样

播放列表A已有的歌曲

找到该歌曲在列表A的索引，删除自身，再把这首歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到这首歌曲在列表C的索引，设置当前播放索引

全部播放

• 每次点击全部播放按钮，都会重新根据播放模式，对列表A或列表B数组进行排序再传入列表C，并设置当前播放索引为0，即播放列表C的第一首歌曲。如果在列表循环和单曲循环模式下播放第一首歌时，再点击全部播放，不会重新播放第一首歌

切换播放模式和切换最近播放与当前歌单

• 每次切换，对列表A或列表B数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置为当前播放索引
• 切换最近播放与当前歌单：当点击全部删除后，列表A为空数组，而列表C为了播放器能够显示歌曲信息则会保留当前播放歌曲，所以当列表A数组为0时不能再传入列表C

点击其他歌单的歌曲

• 将歌曲所在的歌单传入列表B。值得我们注意的是，当前播放的歌曲必定存在于列表B

优化

本项目的播放器组件仍然存在对element-ui的el-slider（音量调节）、message（消息提示）组件、better-scroll插件（歌词滚动）和Vuex的依赖，不能完全作为独立于本项目的可复用的组件。而且，播放器组件结构过于臃肿，维护难度较大。为了日后能够应用于其它项目，播放器组件应该是尽可能独立且不依赖UI库。

优化：将播放器组件再度拆分优化，将进度条、音量调节、歌词和播放列表分别拆分成单个组件。

增加收藏歌曲到歌单功能，增加播放歌曲页面，增加电台页面...

其余

Storage

因为是使用sessionStorage缓存数据，有大小限制，设置了列表A的最大长度为50，若超过则删除最后一个超出的元素

本项目算是中大型项目，在写项目的时候能感受到vue2.x的优点和不足。这里优点不多说，懂的都懂。说下其中一个不足：当一个组件比较庞大且变量较多时，对于反复用到的变量经常需要在Model、View、ViewModel三者之间打marks反复跳转，而不是在一个独立的代码块里专注于对该变量操作。不过这点不足，已经在vue3里得到改善。

全局自定义指令:防止重复点击按钮，针对于button元素

Vue.directive('preventReclick', {
  // 当被绑定的元素插入到 DOM 中时
  inserted(el, binding) {
    // 不能用onclick，因为onclick只能执行元素绑定click的一个方法
    el.addEventListener('click', () => {
      if (el.disabled === false) {
        el.disabled = true
        // binding.value是指令所绑定的值
        // 更多：https://cn.vuejs.org/v2/guide/custom-directive.html
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
      }
    })
  },
})

全局自定义指令:聚焦，针对于input、textarea

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时
  inserted(el) {
    el.focus()
  },
})