【Js结构】用vuejs做一个简陋但好使的播放器（二）

上一节写了做一个简陋的播放器，需要的大致的步骤，《【从零开始】用vuejs做一个简陋但好使的播放器（一）》。

其实就是简单的记了一下流水账，这一节咱们来“设计一下它的js的结构”。

<!-- 设计啥？ -->

设计一个app应用的Js的结构，往大了说，这就是前端架构的设计啦。

往小了说呢，只不过是先在脑子里，或是纸上，把我们要写的Js，按功能先分类归纳而已。

<!-- 功能点？ -->

1. 获取数据；
2. 生成列表；
3. 点击歌曲列表，切换歌曲；
4. 公共播放方法；
5. 播放按钮；
6. 暂停按钮；
7. 上一首按钮；
8. 下一首按钮；
9. node中间件提供数据接口；

说了很多简陋的播放器嘛，所以先归纳这些基本的功能。

<!-- 一图胜千言 -->

这个，先画一个大概的结构吧，因为我也还没写到这里。

本来想周末去写，结果去喝酒了，今天画个图给大家看看，明天写出来。然后下周的先行者课程，咱们就讲它，

播放器其实是个很简单的东西，网上的各种播放器的代码有许多，我这里就主要画一下它的开发的思路。

毕竟思路大于实现嘛，先画这么多吧。我自己看着这图，觉得细节上可能会有调整，但大方向应该没有问题。

数据来源肯定是唯一的，播放方法肯定公共的，歌曲的切换肯定是通过序号来切换的，因为所有的歌曲都是在接口返回的集合里。

那就是在集合里移动索引，来实现歌曲的切换呗。

<!-- 可能存在的问题？ -->

问题嘛，我觉得，

1、在具体UI交互的操作上，可能会有一些方法调用上的反复；

2、歌曲其实是“流”，js操作“流”好久没写了，估计到时我得看看；

这个环节，其实是报工期的时候会有。

<!-- 不写了，头晕 -->

明天再具体写js实现。