Frontend Intermediate Course - 作業六直播筆記

這次交作業的時候問了胡立老師關於 error handling 的問題，因為在 DevTools 的 Console 裡會看到 "Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange" 這一段錯誤碼，所以想問他這個問題應該要怎麼修正。

他的回答很詳細：

你看一下上次作業的這一段：

error: function(err) {
        $container.append('<div class="error">Failed to Load Twitch Data.</div>');
}

這邊的 err 是 $.ajax 幫你傳進來的錯誤參數 可是當這次改寫成 vanilla js 的時候，你會發現你沒有 err 這個東西可以拿了 為什麼？因為它沒有給你，所以你這一段：

request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(err);
    }
}

他才會出這個錯誤：Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange，意思就是 err 這個變數沒有宣告，也找不到這東西在哪 要改掉的話，你可以自己建一個 Error 出來，或是傳一個字串其實也可以

request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(new Error('xhr not ready or status not equal to 200'));
    }
}

解答之後豁然開朗啊！果然對 Vanilla js 還不太懂，所以還一直用 jQuery 的思考方式去寫。


胡立老師的直播：
6. 返璞歸真：vanilla js

以下是看直播的筆記。

1. HTTP response status code 基礎概念。
用 XMLHttpRequest 寫 ajax 時，有一段要寫入 HTTP response status 的數字，200 代表 OK，而平常最常見的 404 代表 Not Found，MDN 這一篇有詳細的說明：HTTP response status codes。

基本上介於 200 到 400 之間代表正常，400 開頭的數字代表客戶端的問題，500 開頭的數字代表伺服器的問題。所以在 XMLHttpRequest 裡面會寫一段條件判斷：

if (request.status >=200 && request.status < 400) {
    //do something
}

2. 瀏覽器兼容性的問題。
少了 jQuery 這樣的 library，用 vanilla js 寫程式的時候就要考慮如何在不同瀏覽器下呈現出自己想要的效果，像是 $(document).height 這樣簡單的一小段，用 vanilla js 寫可能就要變成像這樣一長串才能把所有瀏覽器的情況都考慮進去：

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight,
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

在 jQuery 裡面可能就是這麼多的程式去跑 $(document).height 這一小段。不用考慮瀏覽器兼容性是使用 jQuery 的方便性之一，但要使用 jQuery 就必須多出 30kb 的壓縮檔案。30kb 看似很小沒太大差別，但在網速不佳的環境下就會影響網頁下載，或是在大流量的網站上，30kb 累積起來也是驚人的數量。

所以在取捨使用 jQuery 或 vanilla js 時，有許多方面需要考慮權衡（trade-off），並非選擇某一方就是最好的。

3. 為什麼要使用 vanilla js？
優點：
1) 效率高（但在規模太小的程式上無法發揮作用）。
2) 節省空間（節省 30kb）。

缺點：
1) 不好維護。
2) 瀏覽器兼容性問題。
3) 團隊協作困難（別人可能不知道怎麼寫vanilla js）。

4. 什麼時候需要用 vanilla js？
綜合以上第二、第三點，可以考慮自身需求的場景判斷是否要使用 vanilla js。如果是小型網站且流量也不高，就可以使用 jQuery 所帶來的方便性。如果是手機瀏覽的網站，可能就要考慮手機網速較慢，除了優化圖片檔案大小之外，也可以使用 vanilla js 提高效能。


胡立老師想要讓我們認識如何寫原生 JavaScript，也想讓我們知道如何選擇該不該使用 library。學習到很多東西～ 不過還是覺得 vanilla js 好難 QAQ