May 23, 2017

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



No comments:

Post a Comment