<

零基础通过Ajax实现网易云音乐数据交互(四)

ajax_1

数据交互,应该是一个老生常谈的问题了,可是十几年过去了,这个简单却又重要的问题,依然是很多人面试和实际工作中的心病。

数据交互在前端面试过程中,是一定会考的知识点(鲁迅说,大彬哥说的对)。

当然某些知名招聘网站也是这么说的,大家看到这些字样,你面试前就要多翻翻书,多做做准备,别把送分题变成送命题。 ajax_2

ajax_3

ajax_4

从我对某个招聘网站的不完全统计,超过60%的招聘需求都对ajax有明确的需求。既然ajax简单,还有用,这不明显送分题嘛,怎么就变成送命题了呢?

原因两个,第一,是这个问题单纯会js搞不定。

这个不像轮播图,你自己折腾两天就明白了,而ajax和后台的关系就像情侣,想实践恋爱知识,前提是你得有一个女朋友,没有实际的数据接口和后台以及服务器知识支持,很难练习。

第二,很多人听到ajax就觉得复杂,还没学先打退堂鼓了。

这就好比为啥女神最后跟了普通人,而不是男神,因为人家敢表白啊,你大部分方面都合适,就因为两方面的原因(后台和服务器)就不敢表白,觉得自己成功不了,难道等着女神主动靠近自己么?

好了,现在我们就开始学习。

1.我们首先封装一个ajax库,然后我们用这个库直接请求网易云音乐歌词,最后做DOM实现。

ajax数据交互过程,面试必考,其实就四步,封装更是简单的让人发指,不墨迹直接拖库。

面试如果用嘴说的话,会绑架就会说ajax流程,写的话上面35行代码就完事。重点看注释。一切尽在无言中,我实在不知道该解释什么了,注意面试的时候含情脉脉的盯着面试小姐姐(也可能是小哥哥)然后勇敢的说出你心中的话就好了,如果是笔试,别写的跟鬼画符似的让中文系博士生都不知道你写的是啥就行。

2.拿起来就用,这里我采用了一个网易云音乐接口,https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi 感谢Binaryify,我是站了巨人的肩膀上,所以我才看的那么远。他写这个接口,酸甜可口,老少皆宜。不过大家要尊重网易云的版权,仅供大家学习使用。

获取播放列表,紧接着获取歌词

剩下的事儿跟ajax没什么关系了,也就是拿到json数据怼DOM了,这里强调一点歌词,其实就是

这么一个文件,通过正则,

把每一句歌词搞出来 ,有同学说老师我不会写正则,我只说一句你就清楚了

这样合起来就可以把时间挑出来了,时间挑出来了,剩下的不就是歌词了吗,这里注意不要去学正则,没有实际场景的情况下去学正则,只会让你难受,模模糊糊的。用到了去学,看不明白查一下,看人家怎么实现的,你就清楚了。比如写邮箱正则你不会,你可以去查啊,然后分析人家怎么正则的,带着问题去学,你用不到的没必要会。正确的学习方法要比假装的努力更重要。

这里最后说一下歌词滚动怎么搞,

其实就是判断当前的时间在不在对应歌词的时间段,不在就滚。

最后一点问题,上面这样写ajax是简单易懂的,但是简化了一个流程和需求,大家想,网易云音乐播放器是根据你登录名确定你的歌单的,根据你的歌单列表确定每一首歌的url和歌词的。那么如果直接顺序写。

这样写一定出问题,因为如果网络慢用户名没回来,你是没法根据userid 获取歌单的。有同学说老师好办,回调函数啊。

这就会有很严重的问题,整个文学名词儿叫,回调地狱。说白了就是嵌套层数太多,最后乱七八糟的不好维护。咋整呢?好办,要是这样多好

变成一条船上的蚂蚱(小学语文是体育老师教的,体育老师经常旷课去喂猪,大家见谅哈),前面保证给后面想要的东西多好啊,有这么好的事儿吗?

有,这就是一个半吊子的解决方案,传说中的Promise.所以记住脱离了场景讲技术,都是耍流氓,新技术的产生一定是为了解决问题服务的。具体怎么操作,且听下回分解。