Mobile-todoMVC

Script Programming, Spring 2020, School of Software Engineering, Tongji University. Shanghai.

Visit:

功能实现

用户可以通过选择下方的 filter 类型来对当前的 Todo 项目进行过滤；

编辑单条 todo

双击一条 todo 即可对它进行编辑
保存页面状态

使用 localStorage 来保存数据。（注：仿照 HTTP Request Methods 中的 RESTful API 实现了 PUT, POST, GET, DELETE 接口）
设置 todo deadline

在 input field 边上有个选择 Deadline 日期的 Date Picker，可为 todo 项目设置一个deadline，并且下方依据 deadline 的远近来排列组合 todo，并根据 deadline 的远近为它设置不同的颜色来加以区分
为 todo 设置自选 Tag

用户在输入 todo 时，只需在输入关键词后再输入一个逗号，即可自动生成一个 Tag （用不同的颜色显示区别），下方的列表也会显示 Tag.
文字过滤（搜索 + 高亮关键词）

在上方的 input field 中输入以英文 ? 开头的字符后，敲击回车，即可实现搜索功能（搜索对大小写不敏感，可以搜 Tag 或 todo 文本中的关键词），相应的关键词也会高亮
黑暗模式

读取浏览器/系统主题颜色 prefers-color-scheme，并以此来切换黑暗模式/普通模式。

用户可以输入自选的关键词（用逗号分离并自动标注关键词，关键词高亮），可以醒目地看到一些重要的信息；相比于高/中/低紧急程度的关键词，自选的关键词有更强的灵活性；
用户可以搜索 todo 列表中的文字（包括 todo 文本和 tag ），使用了正则表达式进行搜索，并且匹配的特征词高亮显示使用 string.replace() 来添加高亮的 <span> ；从而可以快速定位到重要的信息；
以上两个功能都是只在一个输入框中实现的，考虑到手机的屏幕大小有限，在页面上添加太多的功能组件会影响到用户的体验，因此我尝试了对一个组件进行功能的复用；
考虑到移动端用户使用的便捷性，使用了左滑/右滑删除的交互方式；
仿照着移动端 APP 的设计方式，将底部的 filter 和顶部的 header 固定，方便移动端用户即便在添加了很多todo项目后仍能快速地定位到相关的 filter 和输入框；
为 todo 添加一个 deadline ，并按 deadline 时间的远近来排列 todo，以此来让用户更明确要紧的项目；
tags-input.js 中定义了一个 self-invoking function（在我理解看来应当算是一个 Class），实现了输入 Tag并分离 Tag 和普通文本的功能，网页中的输入框以及下面的每条可编辑的 todo 信息均为其实例化，实现了即使功能差异较大的组件也能复用相同的代码；

Tags input 借鉴了 https://codepen.io/juliendargelos/details/MJjJZm
- 主要参考了 tag 输入和删除的方式
- 应用到我的代码中时，我重写了它的初始化方式、监听事件（键盘监听和 focus, blur 事件等）
参考了大量 Stackoverflow, stackExchange 之类的论坛