JavaScript Todo List Exercise
JavaScript 五個步驟製作代辦事項
前言
代辦事項是非常常見的習題,其中需求含括了增、刪、讀、改資料,充分的模擬到未來在操縱資料時會碰上的各種情境與問題,可以說各式各樣的軟體都是一種客製化的代辦事項。隨著助教寫一次,未來寫很多應用會輕鬆得多~
解題
第一步:製作介面
本步驟要完成的動作如下:
- 提供用戶輸入介面
- 使用 JavaScript 選取並監聽介面動靜
常常同學會直接 <input>
上綁監聽,雖然並不會造成什麼問題但助教會更傾向使用現有的 <form>
來讓用戶提交資料,原因是 HTML 原生就支持 客戶端的資料驗證 ,可以更方便的去檢核用戶輸入的資料對錯;也可以更語意化的描述「這是一個表單,等待用戶填寫內容」,而非「這是畫面上隨便一個可以輸入的欄位」。
接著就是使用 JavaScript 選取並監聽介面動靜 (表單提交與事項清單點擊)
第二步:顯示代辦事項
在介面架構好之後就需要於第一次網頁加載時將 JavaScript 中的資料顯示到畫面上,因此先定義一筆資料 (在此填充了假資料,方便同學理解):
之後就是考慮如何顯示這筆資料,由於這是一個會頻繁執行的動作,製作一個函式將功能包裝起來,方便之後引用:
可以特別注意這裡使用了現有的資料作判斷,當「isCompleted 為 true」就為 input 添加打勾否則不打勾。
第三步:新增代辦事項
後續步驟就簡單很多了,新增事項流程上就是:
- 偵測表單被提交
- 將新增的事項名稱丟給 addTask 函式處理
- 加入一筆新的資料給 tasks
- 呼叫 renderTask 重新渲染一次
如果不想要因為一個事項改動就觸發整個代辦事項重新渲染一次,可以作細微的操控去編輯 DOM,不過在本次解題中先採取最簡單直觀的方式 :更新完資料就整體刷新再顯示。
這裡使用 Date.now()🔗 來得出自 1970/01/01 00:00:00 UTC 起經過的毫秒數作為 ID 使用。
第四步:刪除代辦事項
要刪除事項,就勢必要得知「點擊下去的刪除按鈕是哪個事項」,再根據事項 ID 與目前 tasks
資料去交互比對,如果相同就移除這筆資料並重新渲染一次所有事項。
刪除事項流程就是:
- 偵測代辦清單是否被點擊
- 確認被點擊的是刪除按鈕
- 取出 task-id 屬性
- 傳入 removeTask 函式中
- 在 removeTask 函式中比對 tasks 中相同 task-id 的事項
- 刪除 tasks 中該筆事項
- 呼叫 renderTask 重新渲染一次
這裡助教使用了一個陣列方法 reduce 來快速的剃除不需要的資料(curr.id === targetId)。
第五步:切換代辦事項
切換事項狀態的思路和刪除事項非常相似,切換事項流程就是:
- 偵測代辦清單是否被點擊
- 確認被點擊的是核取方塊
- 取出
task-id
屬性
- 傳入
toggleTask
函式中
- 在
toggleTask
函式中比對 tasks
中相同 task-id
的事項
- 切換 tasks 中該筆事項的狀態
結語
See the Pen Todo vanilla JS by Riceball (
@riecball) on CodePen.
以上是助教製作整個代辦事項題目的思考歷程,同學可以參考但不用奉為宗旨死背或直接複製貼上,實際操作一次效果最佳~