开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
使用 JavaScript 原生 实现一个 todoList， 这里能考察我们的 dom 操作能力，逻辑能力，事件处理能力以及一些数据存储和数组操作。
- 可以看一下实现效果， 比较简陋，没有做样式的优化，我们点击 代办， 会把代办这一项放到已办，点击已办，会放回代办：
- 一下是一个 demo， 包含了 html 和 js 代码， 这里我们只是使用了 一个 todo 一个 undo 进行了处理，没有对样式进行美化，对号啊什么的这些都没有加， 也没有做存储策略， 样式和存储相对来讲难度都不大了，大家可以自行扩展，下面来说一下我们的逻辑处理顺序
- 初始化我们的函数，使用 init 方法， 这里分别对我们的 dom 进行存储，侦听 from 提交事件
- 提交事件这里我们拿到 input 的 value， 每次提交， 都相当于 代办事项， 所以都把数据 push 到我们的 代码队列中，也就是 todoList， 然后对我们的代码视图进行更新，使用 updataUl
- 更新视图这里我们可以更新代办 也可以更新 已办， 通过传入我们的 dom 对象进行处理， 第二个参数是我们需要更新的队列， 使用 碎片节点， 这里需要注意的是，我们将 当前的 ul 和当前的队列 存储到了 我们点击的这个 dom 上， 下次点击的时候 可以直接使用
- 点击事件这里我们先找到我们点击的这个元素 在当前队列中的下标，然后从我们当前队列中截取出来这一项，使用的是修改原数组，所以使用截取以后的队列 更新当前ul即可
- 在我们更新当前ul 的同时，也要更新另一个， 根据 ul 的类型来进行判定
<form action="#">
<input type="text">
</form>
<label>待办事项:</label><ul id="todo"></ul>
<label>已办事项</label><ul id="undo"></ul>
let from,todo,undo;
let todoList = [], undoList = [];
init();
function init(){
from = document.querySelector("form");
todo = document.querySelector("#todo");
undo = document.querySelector("#undo");
from.addEventListener("submit",submitHandler);
}
// 提交事件处理
function submitHandler(e){
e.preventDefault(); // 阻止默认提交
let txt = from.firstElementChild.value;
// 判断字符长度
if(txt.trim().length === 0) return;
from.firstElementChild.value = "";
todoList.push(txt);
updateUI(todo,todoList)
}
function updateUI(ul,list){
ul.innerHTML = "";
// 创建节点碎片
let elem = document.createDocumentFragment();
for(let i = 0; i < list.length; i++){
let li = document.createElement("li");
let ck = document.createElement("input");
// 我们的 DOM 也是对象，可以存储数据
ck.ul = ul;
ck.lists = list;
ck.addEventListener("click",clickHandler);
ck.type = "checkbox";
let span = document.createElement("span");
span.textContent = list[i];
li.appendChild(ck);
li.appendChild(span);
elem.appendChild(li);
}
ul.appendChild(elem);
}
function clickHandler(e){
let index = Array.from(this.parentElement.parentElement.children).index(this.parentElement);
let elem = this.lists.splice(index,1);
updateUI(this.ul,this.lists);
// 这里对我们存储的两个 数组队列进行操作
if(this.ul === todo){
undoList.push(elem);
updateUI(undo,undoList);
}else{
todoList.push(elem);
updateUI(todo,todoList)
}
}
