用vuejs做一个简陋但好使的播放器(二)

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

【从零开始】用vuejs做一个简陋但好使的播放器(一)

》。

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

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

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

-、获取数据;

-、生成列表;

-、点击歌曲列表,切换歌曲;

-、公共播放方法;

-、播放按钮;

-、暂停按钮;

-、上一首按钮;

-、下一首按钮;

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

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

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

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

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

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

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

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

问题嘛,我觉得,

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

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

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

明天再具体写js实现。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180204A11JSR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券