Alpha Camp「2-2 電影清單」技術記錄
2021-05-29 14:26 JavaScript
總結
本次實作了以下功能：
- 搜尋電影（名稱），並在結果畫面中 highlight 使用者鍵入的關鍵字
- 使用者可在主畫面（All movies）點擊星星按鈕來儲存「喜歡」的電影，可在喜愛清單（Favorite movies）瀏覽所有「喜歡」的電影
- 根據使用者勾選的「電影類型」來篩選出相對應的電影，支援同時篩選複數類型
- （僅限主畫面）點擊電影資料卡（modal）中的類型徽章（badge），會篩選出屬於該類型的電影
主要練習到的技術：
- MVC design
- JavaScript modules
window.localStorage
成品展示：https://tzynwang.github.io/ac_practice_2-2_movie_list/
原始碼：https://github.com/tzynwang/ac_practice_2-2_movie_list
專案結構：
畫面與 CSS
- 僅分拆為主畫面與喜愛清單兩份
.html檔案 - 外觀使用Bootswatch 的 Superhero 視覺主題
- 除頂端的導覽列以外，電影清單、點擊 Detail 按鈕後顯示的卡片（modal）與分頁皆透過 JavaScript 產生
- 為卡片右側的電影描述文字欄位設定為
overflow-y: auto;，維持卡片一慣高度
- 為電影的類型徽章與分頁加上
cursor: pointer;，提供「此物件可互動」的提示
JavaScript 部分
規劃
- 根據 MVC 概念將函式分類到 view 與 controller 模組（module）中；view 負責與視覺畫面有關的功能，controller 負責與資料處理相關的功能
- model 模組負責儲存專案使用到的資料物件與設定
- 單純檢驗「使用者輸入的資料是否有效」的功能，歸類到 utilities 模組中（不進行任何資料處理，僅根據條件執行判斷）
- interaction 模組中包含各種組合 view 與 controller 功能的函式，此模組內的函式皆以名詞描述或動詞+名詞的形式命名，讓開發者一眼就能知道該函式的目的
- index.html 與 favorite.html 僅匯入 interaction 模組的功能，不直接與 view、controller 模組內的功能互動
controller.js
fetchData()僅執行「使用 axios 取得某 API 提供的資料」之功能，處理 API 資料的工作會交由其他函式來進行localStorage僅能儲存strings類型的資料，故localStorage.getItem()時需搭配JSON.stringify()，而透過localStorage.getItem()取出的資料，需使用JSON.parse()將字串轉回 JavaScript 物件
view.js
displayFilterBadges()中的Object.entries(obj)會回傳一陣列，陣列內容為obj中所有 key-value pair
interaction.js
- 關於搜尋與篩選功能不並存的設計：
- 篩選行為的目的：想要瀏覽特定類型的電影
- 搜尋行為的目的：想要搜尋「名字好像是……」的電影
- 因兩種行為的目的不太相同，故最後採取互不相容的設計；搜尋時不支援篩選，篩選後進行搜尋、會重置篩選記錄
index.js 與 favorite.js
index.html 與 favorite.html 會使用到的 JavaScript 都先在 interaction 整理過了，直接匯入 interaction 模組的功能即可