todo demo

Todo

功能实现

https://rencoo.github.io/appDemo/todo/index.html

---1.添加事项

---2.置顶事项

---3.删除事项

---4.用时排序

---5.删除所有

  1class Todo{
  2    constructor(id) {
  3        this.container = document.getElementById(id);
  4        this.todoContainer = this.container.querySelector('.todo-container');    
  5        this.delContainer = this.container.querySelector('.delete-container');     
  6
  7        this.todoList = [];                                            // 用于存放todo
  8        this.todoDelList = [];                                         // 用于存放删除的todo
  9
 10        let container = this.container,
 11            addBtn = container.querySelector('.addBtn'),                       
 12            input = container.querySelector('.todo-ctrl input'),   
 13            delBtn = container.querySelector('.delBtn'),                      
 14            sortBtn = container.querySelector('.sortBtn');                     
 15
 16        /* 待办板块 */
 17        // 点击按钮添加
 18        addBtn.addEventListener('click', () => this.createTodo());
 19        // 回车添加
 20        input.addEventListener('keydown', evt => {
 21            if(evt.key == 'Enter') {
 22                this.createTodo();
 23            }
 24        })  
 25        // 点击todo文本，编辑todo  
 26        let todoContainer = this.todoContainer;
 27        todoContainer.addEventListener('click', evt => {
 28            let target = evt.target;
 29            if(target.classList.contains('todo-task')) {
 30                target.setAttribute('contenteditable', 'true');
 31            }
 32            target.focus(); // 点击后使文本框立即获得焦点
 33        })
 34        // 回车按钮完成编辑，并失焦
 35        todoContainer.addEventListener('keydown', evt => {
 36            let target = evt.target;
 37            if(evt.key == 'Enter') {
 38                if(target.classList.contains('todo-task')) {
 39                    let todoCell = target.parentNode,
 40                        idx = this.indexOfElement(todoCell),
 41                        task = target.value,               // 获取task
 42                        todo = this.todoList[idx];   
 43                    todo.task = task;                      // 修改todo
 44                    this.saveTodos()                       // 保存
 45                    target.blur();                         // 失焦
 46                    evt.preventDefault();                  // 阻止回车默认换行行为
 47                }
 48            }
 49        })
 50        // 点击时间进行置顶
 51        todoContainer.addEventListener('click', evt => {
 52            let target = evt.target;
 53            let todoList = this.todoList;
 54            if(target.classList.contains('todo-time')) {
 55                let todoCell = target.parentNode,
 56                    idx = this.indexOfElement(todoCell),
 57                    todo = todoList[idx];
 58                todoList.splice(idx, 1);                  // 在待办数组中删除todo
 59                todoList.unshift(todo);                   // 在待办数组中置顶todo
 60                this.saveTodos();                         // 保存
 61                todoCell.remove();                        // 在待办页面删除todoCell
 62                todoContainer.prepend(todoCell)           // 在删除页面置顶todoCell
 63            }
 64        })
 65        // 点击复选框移除事件(事件委托)
 66        todoContainer.addEventListener('click', evt => {
 67            let target = evt.target;
 68            if(target.classList.contains('todo-input')) { // 判断目标元素；jQuery 可以直接指定响应事件的元素
 69                let todoCell = target.parentNode,
 70                    idx = this.indexOfElement(todoCell),  // 获取todo的idx
 71                    todo = this.todoList[idx];            // 获取todo数据
 72                this.todoList.splice(idx, 1)              // 从待办数组中删除todo
 73                this.saveTodos();                         // 保存
 74                todoCell.remove();                        // 在待办中移除todoCell
 75
 76                let time = this.getInterval(todo);        // 获取删除和创建的时间差
 77                todo.time = time;                         
 78                this.todoDelList.push(todo);              // 往删除数组中添加todo
 79                this.saveTodos();                         // 保存
 80                this.insertTodo(delContainer, todo);      // 在删除中显示todoCell
 81            }
 82        })
 83
 84        /* 删除板块 */
 85        // 点击复选框移除单条(删除板块)
 86        let delContainer = this.delContainer;
 87        delContainer.addEventListener('click', evt => {
 88            let target = evt.target;
 89            if(target.classList.contains('todo-input')) {
 90                let todoCell = target.parentNode,
 91                    idx = this.indexOfElement(todoCell);
 92                this.todoDelList.splice(idx, 1);
 93                this.saveTodos();
 94                todoCell.remove();
 95            }
 96        })
 97        // 清空删除板块
 98        delBtn.addEventListener('click', evt => {
 99            var r = confirm("确定要删除所有吗");
100            if (r==true) {
101                this.todoDelList.length = 0               // 清空todoDelList
102                delContainer.innerHTML = '';              // 删除板块清空todoCell
103                this.saveTodos();                         // 保存
104            }
105            else{
106              return;
107            }
108        })
109        // 事项用时排序
110        sortBtn.addEventListener('click', evt => {
111            let todoDelList = this.todoDelList;
112            todoDelList.sort(desc);                       // 对数组进行排序
113            this.saveTodos();                             // 保存
114            delContainer.innerHTML = '';
115            let len = todoDelList.length;
116            for(let i = 0; i < len; i++) {
117                let todo = todoDelList[i];
118                this.insertTodo(delContainer, todo);
119            }
120        })
121        // sort rule，完成事项用时的排序规则
122        let  desc = function(a, b) { 
123            let m = this.time_to_minute(a.time), 
124                n = this.time_to_minute(b.time);
125            return m > n ? -1 : 1;
126        }.bind(this);
127
128        // 初始化，载入数据和渲染页面
129        this.initTodos();
130    }
131    // 创建todo
132    createTodo() {
133        let task = this.getInputValue();              // 获取文本框中的值
134        if(!task) {                                   // 文本框是否为空
135            alert("请输入！");                  
136            return;
137        }
138        let currentTime = this.getCurrentTime();      // 获取当前时间
139        let todo = {                                  // 创建todo对象
140            'task': task,
141            'time': currentTime
142        }
143        this.todoList.push(todo);                     // 待办数组添加todo
144        this.saveTodos();                             // 保存数据
145        this.insertTodo(this.todoContainer, todo);    // 在页面上添加todoCell
146        let input = this.container.querySelector('.todo-ctrl input');
147        input.value = '';                              
148    }
149    // 获取输入框的值
150    getInputValue() {
151        let input = this.container.querySelector('.todo-ctrl input'), 
152            value = input.value;
153        return value;
154    }
155    // 插入todo; 
156    insertTodo(box, todo) {                           // 参数：容器;todo;
157        let t = this.templateTodo(todo);
158        box.insertAdjacentHTML('beforeEnd', t);
159    }
160    // 模板todo
161    templateTodo(todo) {
162        let t = `
163        <div class="todo-cell">
164            <input class="todo-input" type="checkbox"/>
165            <span class="todo-task" contenteditable ="false">${todo.task}</span>
166            <span class="todo-time">${todo.time}>>Top</span>
167        </div>
168        `
169        return t;
170    }
171    // 获取当前时间
172    getCurrentTime() {
173        var d= new Date(),
174            addZero = this.addZero,
175            month = addZero(d.getMonth() + 1),
176            date = addZero(d.getDate()),        // 几号；区别于getDay星期几
177            hour = addZero(d.getHours()),
178            minute = addZero(d.getMinutes());
179        var t = `${month}/${date} ${hour}:${minute}`;
180        return t;
181    }
182    addZero(t) {
183        t = t < 10 ? '0' + t : t; 
184        return t;
185    }
186    // 获取元素的序号   
187    indexOfElement(el) {
188        let parent = el.parentElement,
189            len = parent.children.length;
190        for (let i = 0; i < len; i++) {
191            let e = parent.children[i];
192            if (e === el) {
193                return i;
194            }
195        }
196    }
197    // todo的时长
198    getInterval(todo) {                                                                  // 时间差是分钟级别的
199        let createdTime = todo.time,                                                     // 创建时刻
200            delTime = this.getCurrentTime(),                                             // 删除时刻
201            interval = this.time_to_minute(delTime) - this.time_to_minute(createdTime),  // 时间差
202            time = this.minute_to_time(interval);                                        // 将分钟转化为标准格式
203        return time;
204    }
205    // 时间积累量(相对于月初)
206    time_to_minute(time) {
207        let t = time.split('/'),  // '08', '17 16:34'
208            s= t[1].split(' '),   // '17', '16:34'
209            d = s[1].split(':'),  // '16', '34'
210            // month = t[0],      // 默认事件都在同一个月内发生
211            date = s[0],
212            hour = d[0],
213            minute = d[1],
214            m = Number(date * 1440) + Number(hour * 60) + Number(minute);
215        return m;
216    }
217    // 积累量转化为时间
218    minute_to_time(m) {
219        let addZero = this.addZero;
220        let date = addZero(Math.floor(m / 1440)),
221            hour = addZero(Math.floor(m / 60) % 24),
222            minute = addZero(m % 60),
223            time =  `00/${date} ${hour}:${minute}`;
224        return time;
225    }
226    // localStorage 网页存储数据
227    saveTodos() {
228        let m = JSON.stringify(this.todoList),
229            n = JSON.stringify(this.todoDelList);
230        localStorage.todoList = m;
231        localStorage.todoDelList = n;
232    }
233    // 载入数据
234    loadTodos() { 
235        let m = localStorage.todoList,
236            n = localStorage.todoDelList,
237            obj ={
238                todoList: JSON.parse(m),
239                todoDelList: JSON.parse(n)
240            };
241        return obj;
242    }
243    // 初始化todo
244    initTodos() {
245        let obj = this.loadTodos();
246        this.todoList = obj.todoList;
247        let len = this.todoList.length;
248        for (let i = 0; i < len; i++) {
249            let todo = this.todoList[i];
250            this.insertTodo(this.todoContainer, todo);
251        }
252
253        this.todoDelList = obj.todoDelList;
254        let length = this.todoDelList.length;
255        for(let j = 0; j < length; j++) {
256            let todoDel = this.todoDelList[j];
257            this.insertTodo(this.delContainer, todoDel);     
258        }
259    } 
260}
261
262// 实例化对象
263const todo = new Todo('todoDemo');

200多行的小demo收获

由于demo存在两个类似的板块，因此很多方法都需要抽象出来，使得两者都能使用;

由于有了数据存储这个操作，因此每次进行删除、插入、置顶、排序等操作时，就先必须把数据库中(数组)的数据信息更新并保存(类似于告诉后端你更新了什么数据)，再在页面上显示相关改动(相当于展示在用户面前的前端重新局部渲染)

利用localStorage存储数据(localStorage中只能存储字符串，所以我们要借助于JSON.stringify()和JSON.parse();)

处理数据:利用对象保存解析localStorage的多条数据信息，而不能使用数组；然后要使用数据的时候，再读取对象的属性(这里是todoList与todoDelList)；

对处理数据有了初步认知，处理好数据是编程中十分重要的内容，利用合理的数据结构存储数据，能方便数据的管理与使用

localStorage存储数据不安全，每条数据的key-value都被清晰的记录在浏览器的面板上；

根据数组中元素的特性，可以自定义排序规则，再根据规则利用sort对数组进行排序;

完成事项用时(ex 00/00 01:08)的排序，可以分别对每个位置进行比较，一旦出现大小结果就直接返回，这样排序开销会比较低;排序规则如下

 1// ex
 2// 先将标准时间的各项数据提取出保存在对象中(处理数据)
 3var times = [
 4    {
 5        date: 17,
 6        h: 18,
 7        m: 04
 8    },
 9    {
10        date: 18,
11        h: 18,
12        m: 04
13    },
14    {
15        date: 19,
16        h: 18,
17        m: 04
18    },
19    {
20        date: 19,
21        h: 20,
22        m: 04
23    },
24]
25// 制定比较规则
26var desc = function(a, b) {
27    if (a.date !== b.date) {
28        return a.date > b.date ? -1 : 1;
29    } else {
30        if (a.h !== b.h) {
31            return a.h > b.h ? -1 : 1;
32        } else {
33            if (a.m !== b.m) {
34                return a.m > b.m ? -1 : 1;
35            }
36        }
37    }
38}
39// 对时间数组中的对象进行排序
40times.sort(desc)
41
42// 结果如下，符合预期
43[{ date: 19, h: 20, m: 4 },{ date: 19, h: 18, m: 4 },{ date: 18, h: 18, m: 4 },{ date: 17, h: 18, m: 4 }]​​