TTL - 一個自用todolist誕生記

商店地址:tiny todo list

Github：tiny-todo-list

業餘寫了款基於Svelte的輕量任務清單擴展 - ttl (tiny todo list)，寫來緣由有一二：

• 一是Chrome上基本沒找到一款徹底符合本身心意的簡潔todolist
• 二是正在看的Svelte框架文檔簡潔，總以爲須要試一試是否可用好用

由於相信看這篇的大多數都是開發，因此這篇除了介紹對清單todolist的理解，另外就是適當穿插一些開發使用到的框架和API接口介紹。

爲何選用Svelte

這是個有趣的事情，由於前端雖然一直在小步快跑，但近幾年國內主流的開發應該是在Vue,React中切換，變的是一次次版本升級帶來的用法差別，不變的是這幾款框架基本已經肯定了本身的江湖地位，就像在前端編譯構建階段，Webpack已是無人撼動的地位，恰恰有個愣頭青搞起了rollup。嗤之以鼻的人說這是蜉蝣撼大樹，不安分的人會心生幾分敬意，少年有種勇者鬥惡龍的氣概，而正是這個愣頭青又盤算起了前端框架，就是這個Svelte，已經到了v3版本，簡單介紹下：

1. 重新手文檔來講，Svelte說第二，可能沒有敢說第一的。沒有純文本的教育小白，直接上手就是交互式示例操做。末了，還不忘提供不少示例，供你選擇參考理解。
2. 重新手上手來講，看過文檔基本能夠確認這就是最迴歸前端寫法的一個框架了，入手的難度要小於我前邊說到的幾個。
3. 從生態來講，確實不夠完善，連一套完整的組件庫都沒有。這就是說若是想要在大型項目中使用，考慮長期開發效率和維護要三思。固然你做爲開發，本着濟世救人，爲開源世界貢獻光和熱，那就上手搞吧。

雖然說生態如此，但後發總比先來的有優點是鐵板的事情，畢竟從模板語法上能看到學習了很多Vue的長處，同時幹掉了虛擬DOM,沒有中間商賺差價，開發直接燥起來。

相關文檔：Svelte官方文檔

關於Chrome擴展開發

Chrome擴展單純說前端開發又不能徹底涵蓋，能夠說是一個前端練手微項目的絕佳機會。爲何算是微項目：

1. 支持popup和background以前相似先後臺的交互 - 能夠看作是先後端請求
2. 支持直接跨域接口訪問 - 能夠任性使用任何公共API
3. 免費提供100kb同步 - 無需本身實現登錄註冊體系從而實現用戶級存儲
4. 支持各類瀏覽器調用

若是想了解下這個小身材卻有大內容的開發，英文又不必定那麼好，那麼牆裂推介這個非官方的開發者文檔,而若是你恰巧對說明性文檔不感興趣，能夠看看我寫過的一篇問答式入門文檔寫個Markdown插件,講講Chrome擴展開發

一個遺留問題

有了前邊提到的緣由一二，和上手練練新框架的想法，就開始上手作了。但仍是要說一個作以前就考慮的問題。

先前開發SPS時，使用了Chrome爲每一款擴展提供了100kb的同步功能。這是個神奇的100kb, 有了這100kb存儲，能夠作到無需單獨帳號登錄系統，就能夠同步更新。但當你想在100kb範圍內存儲一批數據時，又會遇到一個問題：每個對象存儲不能超過8kb，也就是說給了你自由，又給了你套了層枷鎖，終究沒辦法翩翩起舞。這也是SPS限制存儲40首（甚至有些狀況不到40首bug）的緣由。

怎麼辦，如何在不註冊登陸（表層緣由是不想存儲任何用戶數據，不做惡，深層緣由是還須要本身作數據存儲，麻煩），又能讓用戶肆意存儲。有了問題，就考慮這麼一個免費的存儲空間，嗯，Github issue看好你喲。因此簡單測試下，bingo，就用它了。

相關API文檔：

• chrome.storage
• Github issues api v3

功能需求

說到功能需求，不得不說說我所用到的一些todolist.做爲開發和工具愛好者，對工具備些執念: 但願它能簡單。這一點恰恰todoist作的是重了又重，太多沒用的總搞得不是很得勁，有時候還會遇到登錄不上的問題，麻煩。

在找到一款Simple To-Do List簡單有好用的擴展後,深度使用仍是發現了幾處致命問題：

• Chrome單條數據存儲，致使超過必定條數沒法建立
• 批量刪除功能過於強大，容易誤操做
• 沒法對任務增長描述

查看了下做者更新時間是多年前了，因此理想的簡約不簡單仍是有那麼一些距離，就梳理下本身的需求：

進行中的任務須要可以支持不一樣狀態

常規todolist只能展現完成/未完成兩個狀態，有時候在任務完成前，沒有看到任務進展會有一種挫敗感心理

TTL作了什麼：

• TTL支持經過進度條控制(展現)目前任務進度
• 支持任務完成不足1/3, 超過1/3不足2/3,超過2/3會使用不一樣字體顏色/粗細展現
• 拖拽到最大即自動存儲到complete條目中
• 刪除後會自動存儲到forgotten條目中

須要支持清單任務描述

Simple To-Do List簡單極致到只能建立任務，卻不能對任務作一些基本描述

TTL作了什麼

• TTL支持建立時添加
• TTL支持雙擊進行編輯

須要支持強迫症模式

建立必定數量任務如未完成，則限制建立新任務

TTL作了什麼

• TTL支持設置最大任務數，默認100條

須要支持遺忘模式

由於常常會遇到建立任務後，但又根本不重要，結果一直躺在任務列表，怎麼辦。

TTL作了什麼 長時間未更新的任務直接進入回收站(Forgotten)

• TTL支持自動回收，默認365天

TTL的缺陷

• 支持導出備份，卻還不支持導入
• 功能使用缺少說明文檔
• 沒有使用chrome.storage同步，這樣遇到多臺PC的狀況,沒辦法作到信息同步
• 使用交互細節仍存在問題

TTL功能演示