原生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));
    }
    //创建list
    createElem(){
   
        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属性，用于记录选择是数组内的哪个li
            ck.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="-"