假設今天使用者很愛使用這個 TodoList 然後老闆說 估Go 覺得這個 App 可以打敗 todoist.com 我們來努力把它做到好

1. 首先使用者會想要一個創建待辦清單的時間，顯示在清單上
2. 然後要有個按鈕把待辦清單下載成 csv

像是這樣

csv
done,task_name,created_time
yes,第一個任務,Sun Oct 14 2020 15:50:11 GMT+0800 (台北標準時間)
no,先完成這個,Sun Oct 14 2020 15:50:11 GMT+0800 (台北標準時間)

硬著頭皮加這個功能

會寫出像是這樣的 code

在原本的列表加入時間

timeSpan = document.createElement("SPAN");
timeSpan.className = "todo-timestamp";
timeSpan.append(document.createTextNode((new Date()).toDateString()));

新增時加入時間

timeSpan = document.createElement("SPAN");
timeSpan.className = "todo-timestamp";
timeSpan.append(document.createTextNode((new Date()).toDateString()));

下載 csv 要把 DOM 的結果做轉換

list = document.querySelectorAll('li');
list.forEach(function(item) {
  var time = '',
      content = '',
      check = 'no';

  check = item.className.indexOf('checked') >= 0 ? 'yes' : check;
  time = item.querySelector('.todo-timestamp').textContent;
  content = item.querySelector('.todo-content').textContent;
  csvString += `${check}${SEPARATOR}${content}${SEPARATOR}${time}${NEW_LINE}`;

雖然只加一個功能，就變得非常複雜了，如果未來又加這些功能呢

1. 列表的資料是存在後端的
2. 排序優先順序
3. 紀錄 version log

網頁個更新就會變得複雜，而且要頻繁的把頁面轉換成資料，維護上和開發上就不太容易