易於維護的寫法 補

「看一招、學一招」

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
非同步特性，是在不同事情間 "切換"。