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

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

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

当然某些知名招聘网站也是这么说的,大家看到这些字样,你面试前就要多翻翻书,多做做准备,别把送分题变成送命题。
零基础通过Ajax实现网易云音乐数据交互(4)
零基础通过Ajax实现网易云音乐数据交互(4)
零基础通过Ajax实现网易云音乐数据交互(4)
从我对某个招聘网站的不完全统计,超过60%的招聘需求都对ajax有明确的需求。既然ajax简单,还有用,这不明显送分题嘛,怎么就变成送命题了呢?

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

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

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

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

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

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

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

function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        //1.首先偷一个手机,当然抢一个也行(创建一个ajax对象)
        xmlHttp = new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
        //2.准备好话术,给你爸打电话(建立连接)
        var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
           //3.跟你爸说你被绑架了准备500万,不然就一枪崩了你(发送请求POST)
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            //3.换一种方式说,好歹养这么大对吧,就算猪肉的话多少钱一斤对不对(发送请求GET)
            xmlHttp.send(null);
        } 
        //4.你爸说超过500块就撕票吧,反正也不是亲生的(接收返回数据)
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 opt.success(xmlHttp.responseText);
            }
        };
    }

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

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

//获取播放列表
    function getPlayList() {
        ajax({
            url: "http://localhost:3000/playlist/detail",
            data: {
                id: 2344558859
            },
            method: 'GET',
            success: function (response) {
                var playlist = JSON.parse(response);
                console.log(playlist);

                var aPlayList = playlist.playlist.tracks;
                for (var item in aPlayList) {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = `<li>
                    <a href="javascript:;">${aPlayList[item].name}</a>
                </li>`
                    oSongContainer.appendChild(oLi);
                }
            }
        });

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

function getLyrics() {
        var sid = 121353608;
        ajax({
            url: 'http://localhost:3000/lyric',
            method: 'GET',
            data: {
                id: 33894312
            },
            success: function (response) {
                var lyricsObj = JSON.parse(response);
                if (lyricsObj.klyric.lyric) {

                    lyrics.innerHTML = ''; // 清空歌词
                    var lineArr = lyricsObj.lrc.lyric.split('\n'); // 歌词以排为界数组

                    var timeReg = /\[\d{2}:\d{2}\.\d{3}\]/g;
                    var result = [];
                    for (var i = 0; i < lineArr.length; i++) {
                        var time = lineArr[i].match(timeReg);
                        var curStr = lineArr[i].replace(timeReg, '');
                        for (var j in time) {
                            var t = time[j].slice(1, -1).split(':'); // 时间的格式是[00:00.00] 分钟和毫秒是t[0],t[1]
                            var curSecond = parseInt(t[0], 10) * 60 + parseFloat(t[1]);
                            result.push([curSecond, curStr]);
                            console.log(curStr);

                        }
                    }
                    result.push([curSecond, curStr]);
                    renderLyrics(result);
                }
            }
        });

    }

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

[ti:依赖]——ti.=title,标题,即歌曲名
[ar:蔡健雅]——ar.=artist,艺术家,即歌手名
[al:MY SPACE]——al.=album,专辑,即歌曲被收录的专辑
[by:Chapter Chang]——by somebody,即LRC歌词文件的制作者
[offset:0]——补偿时值。500=0.5秒,正负值分别提前和延长相应的时间(其值多为500的倍数)
(以下为歌词内容,前面中括号内的数字为内容显示时的时值精确到毫秒;后面为在播放器上显示的内容,可以介绍歌曲的名称、演唱者和作者等ID3信息等。相同的歌词内容反复时可以在词句前加上其依次出现时的时值)
[00:00.50]蔡健雅 - 依赖
[00:07.94]词、曲:蔡健雅、陶晶莹
[00:11.60]关了灯把房间整理好
[00:15.48]凌晨三点还是睡不著
[00:19.64]你应该是不在 所以把电话挂掉
[00:30.39]在黑暗手表跟着心跳
[00:34.57]怎么慢它停也停不了
[00:39.70]我应该只是心情不好
[00:45.00]那又怎样
[00:48.50]但本来是这样
[01:21.36]朋友们对我的安慰
[01:25.20]都是同样的一个话题
[01:29.73]我一定要变得更坚强
[01:34.68]说很简单
[00:38.50]但是做却很难
[00:53.00][01:43.88][02:11.23]虽然无所谓写在脸上
[00:58.21][01:48.44][02:15.79]我还是舍不得让你离开
[01:02.97][01:53.50][02:20.60]虽然闭着眼假装听不到
[01:07.84][01:58.23][02:25.11][02:33.15]你对爱 已不再 想依赖

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

var timeReg = /\[\d{2}:\d{2}\.\d{2}\]/g;

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

\d{2}: ->00:    这里\d是数字,{2}两个
\. ->转义.
\d{2}\]  84]

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

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

//歌词滚动
        oA.addEventListener('timeupdate', lrcScroll, false);
        function lrcScroll() {
            var percentNum = Math.floor((oA.currentTime / oA.duration) * 10000) / 100 + '%';
            progress.style.width = percentNum;
            progressBtn.style.left = percentNum;
            // 控制歌词动态滚动
            if (lyricsLiArr) {
                for (var i = 0, len = lyricsLiArr.length - 1; i < len; i++) {
                    var curT = lyricsLiArr[i].getAttribute('data-time');
                    var nexT = lyricsLiArr[i + 1].getAttribute('data-time');
                    var curtTime = oA.currentTime;
                    if ((curtTime > curT) && (curtTime < nexT)) {

                        lyricsLiArr[i].className = 'active';
                        lyricWrap.style.top = (100 - lyricsLiArr[i].offsetTop) + 'px';
                    } else {
                        lyricsLiArr[i].className = '';
                    }
                }
            }
        }

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

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

getUser();
getMusicList();
getLrc();

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

getUser(){
    getMusicList(){
        getLrc(){
            renderDom();
        }
    }
}

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

getUser().getMusicList().getLrc().renderDom()

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

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

相关推荐