Frontend Intermediate Course - 作業六

作業六的 GitHub 連結：返璞歸真：vanilla js

這次作業趕在最後一天才做完，中間也是不斷的崩潰 XD

原生 JavaScript 仍然有很多不懂的地方，都是靠原本 jQuery 怎麼寫，然後再去 google 搜尋怎麼轉換成 vanilla js。不過最花時間的是思考如何改寫我原本寫的這一段：

success: function (response) {
            var streams = response.streams;
            for (var i = 0; i < streams.length; i++) {
               $(getViewbox(streams[i])).insertBefore($('#first_viewbox'));
            }

一直搞不清楚如何改寫原本用 jQuery 呼叫出的 callback function，google 找了幾篇都不是我要的答案，後來只好參考（偷看）其中一位同學寫的作業，才知道如何繼續，不然恐怕這次又要遲交了，嗚嗚。

Ajax 的部分因為胡立老師在作業四直播的時候有稍微講解用原生 JavaScript 寫 ajax ，當時還特別截圖下來 XD 所以這個部份很快速的就建立好了。

後面寫得差不多時，API 資料有抓到，但卻一直看不到畫面跑出來，所以跟胡立老師求救。因為我用 getElementsByClassName 選取 HTML 元件是回傳陣列，所以會回傳多個，造成我要 append 在後面的 div 無法顯示出來。
後來胡立老師幫忙改成這樣就解決了：

var container = document.getElementsByClassName('container')[0];

原本胡立老師附的學習資源裡是提供 querySelector，但看到 You Don't Need jQuery 這篇裡提到使用 getElementsByClassName 比 querySelector 效能好，所以才選擇用 getElementsByClassName，也才誤以為兩個都只有回傳單一元件。不過這樣也不錯，多學了一種方法。

之後是解決 infinite scroll，原本用 jQuery 可以輕鬆選的 $(window).scrollTop()、$(window).height() 跟 $(document).height() 都變得複雜很多，主要都是參考 You Don't Need jQuery 裡面的方法。

畫面跑出來了，infinite scroll 也完成了，可是卻一直抓到同樣的資料，明明 offset 也有設定，搞不清楚為什麼，只好再次跟胡立老師求救，他一下子就點出問題所在了。我原本宣告 twitch URL 為一個變數跟其他 API 參數放在 global scope，然後再代入 request.open('GET', twitchUrl, true);，這樣的方式 twitchUrl 包含 offset 都已經寫死無法改變，所以即使我在後面改變 offset 數值也沒有用，要連 twitchUrl 都一起改才有用。所以把 offset 放在 global scope，其他 API 參數都放到 XMLHttpRequest 的函式裡，然後把 twitchUrl 還原成網址放回去，這樣就可以解決了～

大致都完成後，剩下最後是跑版的問題。把所有 div 都塞到預留的 div 前面，這樣就可以讓最後一排不會跑版，嘗試幾個方法都不行，後來 google 找到一篇 Stack Overflow 的文章：Insert HTML Before Element in JavaScript without jQuery，按照上面的解法成功的解決排版問題！然後即時完成這次的作業 QAQ


附上這次作業的 CodePen：

See the Pen HW_6 by Peggy (@pychiang) on CodePen.