这是一个创建于 1870 天前的主题，其中的信息可能已经有所发展或是发生改变。
商店地址:tiny todo list
Github：tiny-todo-list
业余写了款基于 Chrome 的轻量任务清单扩展 - ttl (tiny todo list)，写来原因有一二：
- 一是 Chrome 上基本没找到一款完全符合自己心意的简洁 todolist
- 二是正在看的 Svelte 框架文档简洁，总觉得需要试一试是否可用好用
因为相信看这篇的大多数都是开发，所以除了介绍对清单 todolist 的理解，另外就是适当穿插一些开发使用到的框架和 API 接口介绍。
为什么选用 Svelte
这是个有趣的事情，因为前端虽然一直在小步快跑，但近几年国内主流的开发应该是在 Vue,React 中切换，变的是一次次版本升级带来的用法差异，不变的是这几款框架基本已经确定了自己的江湖地位，就像在前端编译构建阶段，Webpack 已经是无人撼动的地位，偏偏有个愣头青搞起了 rollup。嗤之以鼻的人说这是蜉蝣撼大树，不安分的人会心生几分敬意，少年有种勇者斗恶龙的气概，而正是这个愣头青又盘算起了前端框架，就是这个 Svelte，已经到了 v3 版本，简单介绍下：
- 从新手文档来说，Svelte 说第二，可能没有敢说第一的。没有纯文本的教育小白，直接上手就是交互式示例操作。末了，还不忘提供很多示例，供你选择参考理解。
- 从新手上手来说，看过文档基本可以确认这就是最回归前端写法的一个框架了，入手的难度要小于我前边说到的几个。
- 从生态来说，确实不够完善，连一套完整的组件库都没有。这就是说如果想要在大型项目中使用，考虑长期开发效率和维护要三思。当然你作为开发，本着济世救人，为开源世界贡献光和热，那就上手搞吧。
虽说生态如此，但后发总比先来的有优势是铁板的事情，毕竟从模板语法上能看到学习了不少 Vue 的长处，同时干掉了虚拟 DOM,没有中间商赚差价，开发直接燥起来。
相关文档：Svelte 官方文档
关于 Chrome 扩展开发
Chrome 扩展单纯说前端开发又不能完全涵盖，可以说是一个前端练手微项目的绝佳机会。为什么算是微项目：
- 支持
popup和background之前类似前后台的交互 - 可以看做是前后端请求 - 支持直接跨域接口访问 - 可以任性使用任何公共 API
- 免费提供 100kb 同步 - 无需自己实现登陆注册体系从而实现用户级存储
- 支持各种浏览器调用
如果想了解下这个小身材却有大内容的开发，英文又不一定那么好，那么墙裂推介这个非官方的开发者文档,而如果你恰巧对说明性文档不感兴趣，可以看看我写过的一篇问答式入门文档写个 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 功能演示
第 1 条附言 · 2019-10-10 10:57:10 +08:00
第 2 条附言 · 2019-10-10 10:57:44 +08:00
第 3 条附言 · 2019-10-15 18:44:49 +08:00
根据留言 v0.1.0 存在滚动条显示问题，因手边没有 window 和低版本 chrome,没法直接复现，临时发布了一个预览版在 github,可以下载本地安装帮忙测试反馈下： https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1
 |
1
admc 2019-10-10 09:50:24 +08:00
前排留名，写的很棒啊大佬，这就去体验下
|
 |
3
dakb 2019-10-10 14:05:12 +08:00
svelte 是第一次听说，楼主厉害
|
 |
4
androidBrant 2019-10-10 14:17:34 +08:00
这个进度条有意思
|
 |
6
inntechy 2019-10-11 18:36:39 +08:00  1
windows 下，列表右侧会有滚动条，导致宽度不够，下方也出现滚动条。。
|
|
7
inntechy 2019-10-11 18:38:23 +08:00
然后由于这个滚动条，导致进度条无法一次性拖到最右，还是蛮影响体验的
|
|
8
inntechy 2019-10-11 18:41:10 +08:00
用 mac 试了一下，77.0.3865.90 ，同样有滚动条。不知道为什么楼主的演示里没有。
|
 |
11
sumonian 2019-10-13 11:41:35 +08:00
商城上下载不下来 这是啥情况 能够在 git 上提供一下下载吗
|
|
13
sumonian 2019-10-14 11:03:53 +08:00
@onvno 试了一下 报错 Error: Cannot find module 'rollup-plugin-svelte' 我对于这方面不是很了解 只是想用一个这个东西 所以最好能够帮忙打包一下 或者 告诉我这个错误该怎么处理
|
 |
14
onvno OP @sumonian 使用 npm install 安装下依赖就可以，等团建回来往仓库传一份 build 过的
|
|
15
onvno OP @sumonian 仓库已经上传，下载 zip 压缩包即可： https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1
|
Select Language