Alpha Camp「2-1 電影清單之按讚與刪除」技術記錄

See the Pen A22: My Favorite Movies:按讚與刪除 by Charlie (@Charlie7779) on CodePen.

總結

本次作業中實作的功能:

筆記

controller.updateRating()

監聽<div id="dataPanel">的點擊事件,若使用者點選到「讚」或「爛」按鈕時,透過HTMLTableRowElement.rowIndex來取得點擊事件發生在<table>中的哪一行row上(可從rowIndex推斷使用者點選的是哪一部電影),進而更新data.movies中相對應電影的分數。

其他解法:也可直接在「讚」或「爛」按鈕上使用dataset賦予電影的id,點擊事件發生後就可透過data.id來取得點擊事件發生在哪一部電影身上

controller.updateDeleteStatus()

使用者點選表格右端的 X 按鈕刪除電影後,透過controller.updateDeleteStatus()將被點擊電影的deleteFlag設定為true,用意是:在使用者進行介面語系切換後,deleteFlag為true的電影就不應該繼續出現在畫面上(view.generateTableContents()中會透過filter()篩選出deleteFlag不為true的電影)

view.fontSizeToggle()

筆記:切換顯示語言後,發覺儘管 font-size 數值相同,英文字體的尺寸在視覺上比中文字體小不少,故使用view.fontSizeToggle()來根據當下顯示的語言調整畫面中的字體大小

view.generatePosterModal()

筆記:過去的作業多半是先將空的 modal 寫進 HTML,待點擊事件發生後再使用 JavaScript 更新 modal 中的內容;本次改用「點擊事件發生後,再根據被點擊的目標產生相對應的 modal(內容)」,相較以前作法,點擊後及時產生 modal 的好處是使用者不會看到一閃而逝的舊內容。

參考文件