「看一招、學一招」
recap:
- 有意義的命名
- 一個函式做一件事
- 函式和資料不要耦合在一起
- 重複利用函式
- JavaScript 程式碼輕小、簡易為主，以 callback、event 方式做回傳、呼叫
1 網址放入變數，以便修改
因為 Index API、Show API 和圖片的網址格式都不同，考慮到組合方式後，我們定義出以下這些變數：
const BASE_URL = 'https://webdev.alphacamp.io'
const INDEX_URL = BASE_URL + '/api/movies/'
const POSTER_URL = BASE_URL + '/posters/'
axios
.get(INDEX_URL)
.then((response) => {
console.log(response.data.results)
})
.catch((err) => console.log(err))
BASE_URL、INDEX_URL 這兩個常數組合在一起就是完整的 Index API URL：https://webdev.alphacamp.io/api/movies。我們將它拆成兩段，以便之後串 Show API 或圖片檔案時，能重覆使用 BASE_URL，而 POSTER_URL 將被用來處理圖片檔案。
如果之後要更動 API URL，我們可以直接修改這裡的常數，而不用到程式碼裡一一尋找。
2 函式低耦合性coupling
函式參數以引數替代，以便重複使用函式。
3 監聽器裡的 event handler 函式要命名，以方便除錯。
4 錯誤處理
在設計函式時會考慮：「功能若要順利執行，需確保哪些前提一定要發生？」，而傾向將架構寫的更為嚴謹。以 removeFromFavorite() 為例， 收藏清單一定要先存在並有元素，「移除收藏清單」這個功能才可能順利運作。即使這些錯誤情況現階段看起來不太可能會發生，未來也許程式碼繼續發展、變得龐大，保持嚴謹能避免疏漏。
function removeFromFavorite(id) {
//1. 這裡加上兩個條件控制：一旦傳入的 id 在收藏清單(movies)中不存在，或收藏清單是空的，就結束這個函式。
if (!movies || !movies.length) return
//2. 透過 id 找到要刪除電影的 index
const movieIndex = movies.findIndex((movie) => movie.id === id)
//因為findIndex若找不到元素，會回傳-1
if(movieIndex === -1) return
//刪除該筆電影
movies.splice(movieIndex,1)
//存回 local storage
localStorage.setItem('favoriteMovies', JSON.stringify(movies))
//"即時"更新頁面，沒寫的話要按重新整理才會render
renderMovieList(movies)
}
5 錯誤處理
使用 JavaScript 時採用三個等號 === :
== 會忽略型別的判斷，只要值相同就會得到 true；
=== 需要值或型別都要相同才會得到 true，
為了避免碰到因型別而導致的意外錯誤，減少錯誤產生的機會，都使用 === 來作為判斷的方式。
6 設計 JavaScript 時，盡量不要設計一個需要跑很久的迴圈，這些迴圈是同步執行的機制，他會讓程式卡住 (blocking)，使用者就會陷入空等。
寫 JavaScript 時，程式碼輕小、簡易為主，達到每個程式執行一個小片段、小區間，將大過程的程式區間以 callback方式、event 方式做回傳、呼叫的動作。
不要用大的for loop或blocking非常大的區塊，讓整個程式block住，後面結果會跑不出來。=> 程式效率低落。
JavaScript 本質: 依次執行一件事single thread
非同步特性，是在不同事情間 "切換"。
