Js结构用vuejs做一个简陋但好使的播放器

Posted 2021-05-01 web前端教室

上一节写了做一个简陋的播放器，需要的大致的步骤，《》。

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

<!-- 设计啥？ -->

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

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

<!-- 功能点？ -->

-、获取数据；

-、生成列表；

-、点击歌曲列表，切换歌曲；

-、公共播放方法；

-、播放按钮；

-、暂停按钮；

-、上一首按钮；

-、下一首按钮；

-、node中间件提供数据接口；

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

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

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

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

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

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

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

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

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

问题嘛，我觉得，

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

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

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

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

明天再具体写js实现。