By

之前 JS30 系列都是純 JS，但因為這次涉及到介接 API 與資料處理(讀取、篩選等)的部分，而 Vue 等框架最擅長的就是資料處理的部分，所以跟框架做比較。

資料

為避免日後 API(json) 連結失效，這邊做備份。

筆記

  1. 搜尋對象是 city 和 state 資料。
  2. 顯示的數字是 population ，資料類型是 string ，需轉換。
  3. 純 JS 要讀取資料，建議使用 Fetch API，會使用到 Promise 的觀念。
  4. Promise 處理非同步，res.json() 是 Promise，需要接 then 才能操作。
  5. input 要決定觸發事件使用 ‘change’, ‘keyup’ 或 ‘keydown’。’change’ 無法即時反應，需焦點 轉移才會觸發；’keydown’ 會有重複觸發的問題；所以選用 ‘keyup’。
  6. 【正規表達式】gi: g (Global) 整個資料搜尋；i (Case Insensitive) 不分大小寫。
  7. innerHTML 沒事別亂用，可能會被攻擊，但此處我們還是得用才有效果。
  8. toLocaleString() 這個方法是針對 “數字” 處理，字串記得要先 parseInt(“字串”)，或者直接將字串 * 1 即可。
  9. ES6 的 箭頭函式 (Arrow function) 沒有自己的 this，沿用外部的 this。在 Vue 裡面為了避免 this 在不同層級代表不同的對象，建議使用箭頭函式，等於 this 皆表示 Vue 本身。
  10. Vue 的 雙大括號 等同於 innerText， v-html 等同於 innerHTML 。
  11. Vue 等框架使用 Virtual DOM 的技術增強效能。

實作

參考