Frontend Intermediate Course - 作業四直播筆記

今天看完直播多收穫（筆記也會很多），胡立老師也在前兩天改好我的作業了。

這次他給我的評語是：「都不錯～ 點進去要到直播那個加的很好，原本應該這樣加的但我忘記講 XD append 那一段可以排版一下」

原本只是想要自己練習用，所以加入點進預覽圖片可以連到 twitch 直播的 URL，結果被誇獎了 XD。當時真的寫作業寫到昏頭，完全忘記可以用連接字串的方式排版，稍微排版之後可讀性增加很多。

$('.container').append(
                '<div class="viewbox">'+
                    '<div class="preview">'+
                        '<a href="'+url+'" target="_blank"><img src="'+channel.preview.medium+'"></a>'+
                    '</div>'+
                    '<div class="bottom">'+
                        '<div class="headpic">'+
                            '<img src="'+channel.channel.logo+'">'+
                        '</div>'+
                        '<div class="intro">'+
                            '<div class="channel_name">'+channel.channel.status+'</div>'+
                            '<div class="host_name">'+channel.channel.display_name+'</div>'+
                        '</div>'+
                    '</div>'+
                '</div>');

胡立老師的直播：
4. 從假資料到真資料：Ajax 與 API 串接

以下是看直播的筆記（筆記蠻多的）。

1. API（Application Programming Interface，應用程式介面）的解釋，以及 Web API。
為了寫作業所以有大概了解 API 的意思跟作用，不過胡立老師解釋後有更深刻的理解。簡單解釋 API 是可以存取、交換資料的地方。還有原本不知道 API 還有分 Web API（經由 HTTP 存取的 API）跟非 Web API。

2. curl - command line 的指令。
在 twitch API 附的範例中有 curl，當時不知道那個是什麼語言，所以跑去問胡立老師，後來他解釋後才知道那個是可以輸入在 command line 上存取 API 資料的指令，直播中他也有示範。

3. Ajax (Asynchronous JavaScript and XML) 的解釋。
拿到 API 資料後還要利用 Ajax 在瀏覽器呼叫出 API 的資料，可以透過瀏覽器提供的 XMLHttpRequest 或 jQuery 中 $.ajax 來呼叫 API。$.ajax 的底層其實也是用 XMLHttpRequest。MDN 有詳細的 XMLHttpRequest 資料：XMLHttpRequest - Web APIs | MDN。

Ajax 最重要的是「異步」執行的概念，利用 Ajax 技術，瀏覽器不需要等待 API response 回來才執行其他程式碼。但程式碼是由上往下執行的，要如何在不等待 API response 的情況下，還能回頭執行我們要 API 資料做的事情？所以就必須利用 callback function（回呼函式），在做異步的時候，會先略過需要等待 API 資料才能執行的函式（會放在 callback function 中），先執行後面的程式碼，然後等到 API 資料回來後才執行 callback function。

4. 寫 API 的 URL 不要寫死，參數的數值可以設定成變數，要變動比較容易，可讀性也比較高。

5. 同源政策 (same-origin policy) 限制的解決方法。
並非所有 API 都可以利用 Ajax 的技術來存取資料，有些 API 資料基於安全考量會有跨網域限制。

要解決跨網域限制有兩個方法：

1)  JSONP (JSON with Padding):
原理是 script 標籤可以跨網域，在 HTML 裡面有幾個標籤不受到跨網域的限制，script 是其中一個。

可以在 HTML 裡引入 API URL 到 script 裡，然後定義 callback function 的參數，在 JavaScript 檔案裡用 callback function 呼叫出 JSONP 的資料。或是直接在 JavaScript 檔案裡引入 API URL 再利用 callback function 也可以。但是一般不建議使用 JSONP，因為如果引入 script 的網站遭駭客入侵，自身的網站也會受到影響。

2) CORS (cross-origin resource sharing):
HTTP access control (CORS) | MDN 這篇有詳細講解。在 Response Header 中 Access-Control-Allow-Origin 可以看到 API 資料是否有開放跨網域存取。

跨網域存取分成：
a. 簡單請求：只允許 GET、HEAD、POST 這三個方法。

b. 先導請求 (Preflight Request)：先以 HTTP 的 OPTIONS 方法送出 request 到另一個網域，確定 Access-Control-Allow-Origin 沒問題後，才送出真正的 response 到此網域中。所以會發生送出一個 request 但有兩個 response，先導請求是瀏覽器驗證是否有開放跨網域存取的方法。如果想要避免先導請求多產生出來的 response，可以取消自訂義的標頭（例如 setRequestHeader）就可以解決了。

不過，要是遠端伺服器沒有開放跨網域存取，不管用什麼方法瀏覽器都沒辦法存取資料的。

6. ES6 的應用。
胡立老師用了很多 ES6 的寫法，我還沒學過，所以就先看他介紹，寫變數跟函式的表示法，宣告變數可以用 const（不會改變變數的數值）跟 let（變數的數值會改變），還有連接字串簡單很多。

7. 分開拿取 API 資料的函式跟處理邏輯的執行函式做優化。
這個是我完全不知道的部分，其實聽得還有點模糊。分開拿資料的函式跟執行的函式讓他們只做一件事情。

8. 錯誤訊息的處理。
我也沒有寫關於錯誤訊息的部分，可能研究之後在下一次功課加入。現實生活中一定會有錯誤產生的時候，所以錯誤訊息的處理的確是必要的。


以上就是我作業四的回顧筆記。有錯還請指正。