零基礎通過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/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi 感謝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.所以記住脫離了場景講技術，都是耍流氓，新技術的產生一定是為了解決問題服務的。具體怎么操作，且聽下回分解。
·END·