原生js实现todoList

效果

一、js文件

1.Utile类（封装dom元素创建方法）

export default class Utils{static ce(type,style,parent){var elem=document.createElement(type);if(style){for(var prop in style){elem.style[prop]=style[prop];}}if(typeof parent===\"string\") parent=document.querySelector(parent);if(parent) parent.appendChild(elem);return elem;}}

3.List 类

import Utils from \"./Utils.js\";import cssStyle from \"./cssStyle.js\";export default class List{mask;  //声明mask属性，接收外部传入数据//声明两个静态属性，用于抛发事件static TODO_LIST_CHANGE=\"todo_list_change\";static TODO_LIST_REMOVE=\"todo_list_remove\";//创建list容器constructor(_mask=false){this.mask=_mask;this.elem=this.createElem();//给ul设置委托事件侦听this.elem.addEventListener(\"click\",e=>this.clickHandler(e));}//创建listcreateElem(){if(this.elem) return this.elem;return Utils.ce(\"ul\",cssStyle.ulStyle());}appendTo(parent){if(typeof parent===\"string\") parent=document.querySelector(parent);parent.appendChild(this.elem);}//根据参数传入的list列表，创建内部元素setData(list){//清空list容器内元素，用于每次更新数据this.elem.innerHTML=\"\";for(var i=0;i<list.length;i++){//根据传入列表长度，创建li个数let li=Utils.ce(\"li\",cssStyle.liStyle(this.mask));//创建li内的选择框let ck=Utils.ce(\"input\",cssStyle.inputStyle());ck.type=\"checkbox\";//给选择框增加index属性，用于记录选择是数组内的哪个lick.index=i;//给选择框增加checked属性，ck.checked=!this.mask;li.appendChild(ck);//创建文本显示区域let span=Utils.ce(\"span\",cssStyle.spanStyle());//将列表内第i条数据，在第i个li内显示span.textContent=list[i];li.appendChild(span);//创建删除按钮let a=Utils.ce(\"a\",cssStyle.aStyle());a.textContent=\"-\";//删除按钮添加index属性，记录哪个li点击的删除a.index=i;//删除按钮添加checked属性，a.checked=this.mask;li.appendChild(a);this.elem.appendChild(li);}}//点击ul，执行的函数clickHandler(e){//首先判断点击的元素是不是 选择框或者删除按钮if(e.target.constructor!==HTMLInputElement && e.target.constructor!==HTMLAnchorElement) return;//当点击选择框时，抛发todo_list_change事件if(e.target.constructor===HTMLInputElement){var evt=new Event(List.TODO_LIST_CHANGE);evt.index=e.target.index;evt.checked=e.target.checked;document.dispatchEvent(evt);return;}//当点击删除时，抛发todo_list_remove事件var evt=new Event(List.TODO_LIST_REMOVE);evt.index=e.target.index;evt.checked=e.target.checked;document.dispatchEvent(evt);}}

4.TodoList类

import Utils from \"./Utils.js\";import List from \"./List注释.js\";import cssStyle from \"./cssStyle.js\";export default class TodoList{arr=[]; //创建arr数组todo列表容器和done列表容器todoArr=[]; //存放todo列表内容doneArr=[]; //存放done列表内容//创建todoListconstructor(){//如果localStorage存有数据，取出locStorage对应数据赋给对应数组，实现数据长期存储if(localStorage.todoArr) this.todoArr=JSON.parse(localStorage.todoArr);if(localStorage.doneArr) this.doneArr=JSON.parse(localStorage.doneArr);this.elem=this.creatElem();//创建todoList列表容器//侦听TODO_LIST_CHANGE 和 TODO_LIST_REMOVE事件//即当点击选择框或者删除时，执行todoListChange函数document.addEventListener(List.TODO_LIST_CHANGE,e=>this.todoListChange(e))document.addEventListener(List.TODO_LIST_REMOVE,e=>this.todoListChange(e))//侦听keyup事件document.addEventListener(\"keyup\",e=>this.keyHandler(e));}//创建容器和元素creatElem(){if(this.elem) return this.elem;//创建外部容器this. div=Utils.ce(\"div\",cssStyle.divStyle1());//创建头部标签let head=this.creatHeadElem();this.div.appendChild(head);//创建todoList列表容器this.createListCon(\"正在进行\");//创建doneList列表容器this.createListCon(\"已经完成\");return this.div;}appendTo(parent){if(typeof parent===\"string\") parent=document.querySelector(parent);parent.appendChild(this.elem);}creatHeadElem(){let head=Utils.ce(\"div\",cssStyle.divStyle2());//创建logolet label=Utils.ce(\"label\",cssStyle.labelStyle());label.textContent=\"鹏鹏自制ToDoList\";//创建输入文本框this.input=Utils.ce(\"input\",cssStyle.inputStyle1());//给输入文本框添加默认文字this.input.setAttribute(\"placeholder\",\"添加ToDo\");head.appendChild(label);head.appendChild(this.input);return head;}//创建列表函数createListCon(title){//创建列表外部容器let div0=Utils.ce(\"div\",{width:\"600px\",margin:\"auto\",});//创建h2标签let h2=Utils.ce(\"h2\");h2.textContent=title;//根据是否是正在进行判断创建的列表为todoList还是doneListlet list=new List(title==\"正在进行\");//将创建的列表放入数组this.arr.push(list);//如果为todoList，根据todoArr数组内容添加内容if(title===\"正在进行\")list.setData(this.todoArr);//如果为doneList，根据doneArr数组内容添加内容else list.setData(this.doneArr);div0.appendChild(h2);list.appendTo(div0);this.div.appendChild(div0);}//当点击回车时执行的函数keyHandler(e){//如果按键不为回车，直接跳出if(e.keyCode!==13) return;//如果input内没有填入内容，直接返回if(this.input.value.trim().length===0) return;//当点击回车时，将input内输入的内容添加到todoArr数组内this.todoArr.push(this.input.value);//并且将input内容置空this.input.value=\"\";//arr[0]为dotoList，即根据新todoArr重新生成dotoListthis.arr[0].setData(this.todoArr);//且将todoArr存入localStorage中this.saveData();}//侦听事件执行的函数todoListChange(e){// 如果checked被选中if(e.checked){//删除todoArr里对应index项，即在todoList删除该条lilet arr=this.todoArr.splice(e.index,1);//并且将删除的那一项数据添加到doneArr数组里，在doneList添加该条liif(e.type===List.TODO_LIST_CHANGE) this.doneArr.push(arr[0]);}//checked没被选中 跟上面相反else{let arr=this.doneArr.splice(e.index,1);if(e.type===List.TODO_LIST_CHANGE) this.todoArr.push(arr[0]);}//然后根据新数组重新创建list列表this.arr[0].setData(this.todoArr);this.arr[1].setData(this.doneArr);//将新数组加入到localStorage中this.saveData();}//将todoArr和doneArr两个数组转成JSON字符串存入数组saveData(){localStorage.todoArr=JSON.stringify(this.todoArr);localStorage.doneArr=JSON.stringify(this.doneArr);}}

5.cssStyle类（存放所有元素样式）

export default class cssStyle {static liStyle(_mask){return {display: \"list-item\",textAlign: \"-webkit-match-parent\",userDrag: \"element\",userSelect: \"none\",height: \"32px\",lineHeight: \"32px\",background: \"#fff\",position: \"relative\",marginBottom: \"10px\",padding: \"0 45px\",borderRadius: \"3px\",boxShadow: \"0 1px 2px rgba(0,0,0,0.07)\",borderLeft:!_mask ? \"5px solid #999\" :\"5px solid #629A9C\",opacity:!_mask ? \"0.5\"  :  \"1\",}}static inputStyle(){return {position:\'absolute\',top:\'2px\',left:\'10px\',width:\'22px\',height:\'22px\',cursor:\'pointer\',backgroundColor:\'initial\',cursor:\'default\',appearance:\'checkbox\',boxSizing:\'border-box\',margin:\'3px 3px 3px 4px\',padding:\'initial\',border:\'initial\',WebkitWritingMode:\'horizontal-tb !important\',textRendering:\'auto\',color:\'-internal-light-dark(black, white)\',letterSpacing:\'normal\',wordSpacing:\'normal\',textTransform:\'none\',textIndent:\'0px\',textShadow:\'none\',display:\'inline-block\',textAlign:\'start\',font:\'400 13.3333px Arial\',}}static spanStyle(){return {display:\"inline-block\",width:\"500px\",overflow:\"hidden\"}}static aStyle(){return {position: \"absolute\",top: \"2px\",right: \"5px\",display: \"inline-block\",width: \"14px\",height: \"12px\",borderRadius: \"14px\",border: \"6px double #FFF\",background: \"#CCC\",lineHeight: \"14px\",textAlign: \"center\",color: \"#FFF\",fontWeight: \"bold\",fontSize: \"14px\",cursor: \"pointer\",textDecoration: \"underline\",}}static ulStyle(){return {listStyle:\"none\",margin:\"0px\",padding:0,width:\"600px\",}}static divStyle1(){return {position:\"absolute\",width:\"100%\",left:0,top:0,right:0,bottom:0,backgroundColor:\"#CDCDCD\"}}static divStyle2(){return {position:\"relative\",left:0,right:\"0px\",height:\"50px\",backgroundColor:\"rgba(47,47,47,0.98)\",padding:\"0 321px\",}}static labelStyle(){return {float: \"left\",width: \"200px\",lineHeight: \"50px\",color: \"#DDD\",fontSize: \"24px\",cursor: \"pointer\",fontFamily: \'\"Helvetica Neue\",Helvetica,Arial,sans-serif\',}}static inputStyle1(){return {textRendering: \"auto\",color: \"-internal-light-dark(black, white)\",letterSpacing: \"normal\",wordSpacing: \"normal\",textTransform: \"none\",textShadow: \"none\",display: \"inline-block\",textAlign: \"start\",appearance: \"textfield\",backgroundColor: \"-internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59))\",cursor: \"text\",marginLeft: \"100px\",font: \"400 13.3333px Arial\",float: \"left\",width: \"360px\",height: \"24px\",marginTop: \"12px\",textIndent: \"10px\",borderRadius: \"5px\",boxShadow: \"0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset\",border: \"none\",padding: \"1px 2px\",}}}

二、html文件

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><script type=\"module\">import TodoList from \'./js/TodoList注释.js\';let todo=new TodoList();todo.appendTo(\"body\");</script></body></html>