TODOLIST
// code here
// 初始化数据
const initData = function () {
const data = [
{
"id": 1,
"checked": false,
"text": "abcede"
},
{
"id": 2,
"checked": true,
"text": "ewrwerw"
},
{
"id": 3,
"checked": false,
"text": "fdsfsdfsdf"
},
{
"id": 4,
"checked": false,
"text": "dfgrrg"
}
];
return new Proxy(data.map(item => {
return new Proxy({
id: item.id,
checked: item.checked,
text: item.text
}, {
set(target, propKey, value, receiver) {
updateNoCompleteNum();
return Reflect.set(target, propKey, value, receiver);
}
})
}), {
set(target, propKey, value, receiver) {
updateNoCompleteNum();
return Reflect.set(target, propKey, value, receiver);
}
})
}
const data = initData();
const list = document.querySelector('.list');
const checkAll = document.querySelector('#check');
const input = document.querySelector("#input");
const addItem = function ({ text, id, checked }) {
const fragment = document.createDocumentFragment();
const box = document.createElement('div');
const item = document.createElement('input');
const label = document.createElement('label');
const del = document.createElement('div');
const left = document.createElement('div');
const right = document.createElement('div');
label.innerHTML = text;
label.for = 'input' + id;
item.id = 'input' + id;
item.type = 'checkbox';
item.checked = checked;
item.className = "item";
del.className = 'item-close';
del.innerText = 'X';
box.className = 'item-box';
box.id = id;
left.appendChild(item);
left.appendChild(label);
right.appendChild(del);
box.appendChild(left);
box.appendChild(right);
fragment.appendChild(box);
list.appendChild(fragment);
};
// 清空容器内容的函数
const clearList = function (list) {
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
// 渲染列表
const renderList = function (dataList) {
clearList(list);
dataList.forEach(item => {
addItem(item);
});
}
renderList(data);
// 利用proxy监听data数组
const updateNoCompleteNum = function () {
// 等页面更新完成之后data值更新完成获取
setTimeout(() => {
let noCompleteNum = data.filter(item => !item.checked).length;
const noCompleteNode = document.querySelector('#noCompleteNum');
noCompleteNode.innerText = noCompleteNum;
})
}
const allToDo = function () {
renderList(data);
}
const noComplete = function () {
const dataList = data.filter(item => !item.checked);
renderList(dataList);
}
const complete = function () {
const dataList = data.filter(item => item.checked);
renderList(dataList);
}
const resetData = function (checked) {
data.forEach(it => {
// let item = list.childNodes[it.id].children[0].children[0];
let item = Array.from(list.childNodes).filter(node => node.id == it.id)[0];
if (item) {
let node = item.querySelector(`#input${it.id}`);
node.checked = checked;
it.checked = checked;
}
});
}
const handleInput = function (e) {
if (e.key === 'Enter') {
const item = new Proxy({
id: data.length + 1,
checked: false,
text: input.value
}, {
set(target, propKey, value, receiver) {
updateNoCompleteNum();
return Reflect.set(target, propKey, value, receiver);
}
});
data.push(item);
addItem(item);
input.value = '';
}
};
const handleCheckAll = function (e) {
if (e.target.checked) {
// 全选
resetData(true);
} else {
// 全不选
resetData(false);
}
};
const handleListClick = function (e) {
if (e.target.className === 'item') {
const index = Number(e.target.id.slice(5));
data[index - 1].checked = e.target.checked;
} else if (e.target.className === 'item-close') {
const index = e.target.parentNode.parentNode.id;
data.splice(index - 1, 1);
const node = [...list.childNodes].filter(it => it.id == index)[0];
list.removeChild(node);
}
};
input.addEventListener('keydown', handleInput);
checkAll.addEventListener('click', handleCheckAll);
list.addEventListener('click', handleListClick);
const handleRemoveListener = function () {
list.removeEventListener('click', handleListClick);
checkAll.removeEventListener('click', handleCheckAll);
input.removeEventListener('keydown', handleInput);
}
document.addEventListener('unload', handleRemoveListener);