阅读 349

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. 支持popupbackground之前类似前后台的交互 - 可以看做是前后端请求
  2. 支持直接跨域接口访问 - 可以任性使用任何公共API
  3. 免费提供100kb同步 - 无需自己实现登陆注册体系从而实现用户级存储
  4. 支持各种浏览器调用

如果想了解下这个小身材却有大内容的开发,英文又不一定那么好,那么墙裂推介这个非官方的开发者文档,而如果你恰巧对说明性文档不感兴趣,可以看看我写过的一篇问答式入门文档写个Markdown插件,讲讲Chrome扩展开发

一个遗留问题

有了前边提到的原因一二,和上手练练新框架的想法,就开始上手做了。但还是要说一个做之前就考虑的问题。

先前开发SPS时,使用了Chrome为每一款扩展提供了100kb的同步功能。这是个神奇的100kb, 有了这100kb存储,可以做到无需单独账号登陆系统,就可以同步更新。但当你想在100kb范围内存储一批数据时,又会遇到一个问题:每一个对象存储不能超过8kb,也就是说给了你自由,又给了你套了层枷锁,终究没办法翩翩起舞。这也是SPS限制存储40首(甚至有些情况不到40首bug)的原因。

怎么办,如何在不注册登录(表层原因是不想存储任何用户数据,不作恶,深层原因是还需要自己做数据存储,麻烦),又能让用户肆意存储。有了问题,就考虑这么一个免费的存储空间,嗯,Github issue看好你哟。所以简单测试下,bingo,就用它了。

相关API文档:

功能需求

说到功能需求,不得不说说我所用到的一些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功能演示

关注下面的标签,发现更多相似文章
评论