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功能演示