# TodoList

**Repository Path**: heaticoding/todo-list

## Basic Information

- **Project Name**: TodoList
- **Description**: 采用原生js编写，图标使用了阿里巴巴的IconFont。项目实现了对Todo的基本的增删改查，既增加、删除、修改、从浏览器LocalStorage读取数据并构建页面、保存当前页面到浏览器LocalStorage中（序列化与反序列化）。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-15
- **Last Updated**: 2021-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## A TodoList (Design by Heat)
### 介绍
这个项目是我用来练习html、css和js的。采用原生js编写，图标使用了阿里巴巴的IconFont。项目实现了对Todo的基本的增删改查，既增加、删除、修改、从浏览器LocalStorage读取数据并构建页面、保存当前页面到浏览器LocalStorage中（序列化与反序列化）。
![main](./.readme/main.png)
项目主要界面
![tools](.readme/tools.png)
Todo的隐藏工具栏，用以实现编辑、删除、移动、置顶、底、标记重要性的功能。
### 总结
1. 学习了js原生对于节点的增删改查。
   - 增：`Node.creatELement()`
   - 删：`faterNode.deleteChild()`
   - 改：`Node.innerText/.innerHtml`
   - 查：`Node.querySelector() / Node.querySelectorAll()`
2. 手动实现“模板字符串”。
   - 利用正则表达式替换，代码见`injectData()`
3. 从节点字符串创建Node。
   - 建立一个临时父节点`div`，然后将字符串作为`div.innerHtml`，取`div.firstChild`（具体怎么取决于字符串，思路是这样）。代码见`createNewLiNodeFromTemplate()`
4. 设置、读取节点标签内的属性
   - 可以利用这个放一些数据，`Node.setAttribute()/ Node.getAttribute`
5. 使用箭头函数
   - 可以使有些代码更加简洁，也可以避免`this`指代的问题。 
6. 利用`js`中`&&`的特点
   - `js`作为脚本语言，`&&`和`||`可以脱离括号存在。因此可以利用这个特点简化部分`if-else`语句。代码见`index.js 146行`
### 不足
1. 不知道规范的前端js开发应该是怎么写的，这个项目我就按自己习惯的那种“面向过程”式开发，js文件里堆满了函数,且只有函数。
2. 界面和最初的设计还是不一样的，因为技术问题，没法按照原本的设计图原样实现。
![oldDesign](./.readme/oldDesign.png) 
原设计稿
3. css设计依旧不够熟悉，不少耦合的情况。比如`.function`同`#todo-ipt, #todo-btn`的高度设置等等。也因为css的不熟悉，所以样式没法按最初设计稿实现。  
4. 项目没有设置任务完成时间。