js的TodoList组件开发

js的TodoList组件开发

需求:

1.页面中头部有输入框,下面有待办的内容块,和办完的内容块
2.输入框中输入内容,回车键后，输入框内容清空,代办内容块中添加一条输入内容
3.代办条中有选择框,内容区，删除按钮
4.点击代办条中选择框，说明内容转变为办完事项,代办块中这条内容消失,办完块中有这条语句
5.办完块中点击选择框后，这条内容消失，出现在代办块中
6.本地存储功能，重新打开页面后，之前的事项依旧存在

效果图:

• 初始页面:
  

• 输入框有内容,回车后
  

• 点击内容条中选择框
  

• 点击办完中内容条中的选择框
  

分析:

• 两个js文件,List是内容条组件,等待数据传入,todoList是外部操作组件,操作后传入数据到List中,List开始执行
• List中的内容条设置点击事件,抛发出事件,在todoList的外部操作中执行.
• 每个页面创建时,要判断localStorage中有无存储的数据,如果有,这些数据直接传入List中,当输入框中输入内容,或者内容区改变后,数据从新进行存储

List.js文件代码

import Utils from "./Utils.js";

export default class List{
    mask;
    static TODO_LIST_CHANGE="todo_list_change";
    static TODO_LIST_REMOVE="todo_list_remove";
    constructor(_mask=false){
        this.mask=_mask;
        this.elem=this.createElem();
        this.elem.addEventListener("click",e=>this.clickHandler(e));  //事件委托
    }
    createElem(){
        if(this.elem) return this.elem;
        return Utils.ce("ul",{
            listStyle:"none",
            margin:"0px",
            padding:0,
            "600px",
        });  
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }

    setData(list){  //输入数据回车后的数组或者遮罩后的数据的数组
        this.elem.innerHTML="";
        for(var i=0;i<list.length;i++){   //li中有多选框,文本span,a标签(删除)  多选框和a标签要获取其下标和checked
            let li=Utils.ce("li",{
                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:!this.mask ? "5px solid #999" :"5px solid #629A9C",
                opacity:!this.mask ? "0.5"  :  "1",   //进行时this.mask为true,值为1
            });
            let ck=Utils.ce("input",{
                position:'absolute',
                top:'2px',
                left:'10px',
                '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',
            });
            ck.type="checkbox";
            ck.index=i;   //获取了 多选框的index和checked
            ck.checked=!this.mask       //进行时传进来的是true,遮罩时传进来的是false,所以去反
            li.appendChild(ck);
            let span=Utils.ce("span",{
                display:"inline-block",
                "500px",
                overflow:"hidden"
            });
            span.textContent=list[i];
            li.appendChild(span);
            let a=Utils.ce("a",{
                position: "absolute",
                top: "2px",
                right: "5px",
                display: "inline-block",
                 "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",
            });
            a.textContent="-";
            a.index=i;
            a.checked=this.mask;
            li.appendChild(a);
            this.elem.appendChild(li);
        }
    }
    clickHandler(e){
        if(e.target.constructor!==HTMLInputElement && e.target.constructor!==HTMLAnchorElement) return;//必须点checkbox和a才有用
        if(e.target.constructor===HTMLInputElement){  //点击checkbox
            var evt=new Event(List.TODO_LIST_CHANGE);
            evt.index=e.target.index;
            evt.checked=e.target.checked;
            document.dispatchEvent(evt);  //抛发给document
            return;
        }
        var evt=new Event(List.TODO_LIST_REMOVE);
            evt.index=e.target.index;
            evt.checked=e.target.checked;
            document.dispatchEvent(evt);
            
    }

}

todoList.js文件代码

import Utils from "./Utils.js";
import List from "./List.js";

export default class TodoList{
    arr=[];  //存储实例的List   一共就两个
    todoArr=[];  //进行时的数据
    doneArr=[];  //完成的数据
    constructor(){
        if(localStorage.todoArr) this.todoArr=JSON.parse(localStorage.todoArr); //localStorage的获取
        if(localStorage.doneArr) this.doneArr=JSON.parse(localStorage.doneArr);
        this.elem=this.creatElem();  //最外层容器
        this.createListCon("正在进行");//创建内容区
        this.createListCon("已经完成");
        document.addEventListener(List.TODO_LIST_CHANGE,e=>this.todoListChange(e))//点击后抛发出来的两个事件
        document.addEventListener(List.TODO_LIST_REMOVE,e=>this.todoListChange(e))
        document.addEventListener("keyup",e=>this.keyHandler(e));//回车
    }
    creatElem(){
        if(this.elem) return this.elem;
        let div=Utils.ce("div",{  //this.elem
            position:"absolute",
            "100%",
            left:0,
            top:0,
            right:0,
            bottom:0,
            backgroundColor:"#CDCDCD"
        });
        let head=Utils.ce("div",{ //头部容器
            position:"relative",
            left:0,
            right:"0px",
            height:"50px",
            backgroundColor:"rgba(47,47,47,0.98)",
            padding:"0 321px",
        })
        let label=Utils.ce("label",{  //头部文字
            float: "left",
             "100px",
            lineHeight: "50px",
            color: "#DDD",
            fontSize: "24px",
            cursor: "pointer",
            fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
        })
        label.textContent="ToDoList";
        this.input=Utils.ce("input",{  //头部输入框
            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",
             "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",
        })
        this.input.setAttribute("placeholder","添加ToDo");
        head.appendChild(label);
        head.appendChild(this.input);
        div.appendChild(head);
       
        return div;
    }
    appendTo(parent){
        if(typeof parent==="string") parent=document.querySelector(parent);
        parent.appendChild(this.elem);
    }
    createListCon(title){  //创建内容区
        let div=Utils.ce("div",{
            "600px",
            margin:"auto",

        });
        let h2=Utils.ce("h2");
        h2.textContent=title;  //同一个函数执行两次,传参不同,所以页面上有两个h2
        let list=new List(title=="正在进行");//如果传参title=="正在进行",创建进行时的li,同一个函数执行两次,两次传参,所以要判断,返回false/true
        this.arr.push(list);  //arr中有两个数据(进行时和遮罩时的)
        if(title==="正在进行")list.setData(this.todoArr);  //插入localStorage中的数据
        else list.setData(this.doneArr);
        div.appendChild(h2);
        list.appendTo(div);
        this.elem.appendChild(div);
    }
    keyHandler(e){
        if(e.keyCode!==13) return;
        if(this.input.value.trim().length===0) return; //判断input中内容不为0
        this.todoArr.push(this.input.value);//输入的数据传入到进行时数组中
        this.input.value="";//输入框清空
        this.arr[0].setData(this.todoArr);
        this.saveData();
    }
    todoListChange(e){     
        if(e.checked){  //删除进行时e.checked为true,改变进行时,传进去的是false,e.ckecked=!mask,也是true
           let arr=this.todoArr.splice(e.index,1);
          if(e.type===List.TODO_LIST_CHANGE) this.doneArr.push(arr[0]);
        }else{
            let arr=this.doneArr.splice(e.index,1);
            if(e.type===List.TODO_LIST_CHANGE) this.todoArr.push(arr[0]);
        }
        this.arr[0].setData(this.todoArr);
        this.arr[1].setData(this.doneArr);
        this.saveData();
    }
    saveData(){  //数据存储到本地
        localStorage.todoArr=JSON.stringify(this.todoArr);
        localStorage.doneArr=JSON.stringify(this.doneArr);
    }
}

HTML页面只要new todoList对象，就能实现

<!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>

Utils.js是工具包

export default class Utils{
   static time=0;
   static ids=0;
   static timeManage={};
//    在静态方法中调用的变量都需要写成静态的
// 在静态方法中理论上不能使用this的，我们需要坚决贯彻这个思想
// 实际在静态方法中this就是当前类名
   static timeStart(){
        if(Utils.time) return;
        Utils.time=new Date().getTime();
    }
   static timeEnd(){
        var t=new Date().getTime()-Utils.time;
        Utils.time=0;
        return t;
    }
    static ts(){
        Utils.ids++;
        Utils.timeManage[Utils.ids]=new Date().getTime();
        return ids;
    }
    static te(id){
        if(!Utils.timeManage[Utils.id]) return 0;
        var t=new Date().getTime()-Utils.timeManage[Utils.id];
        delete Utils.timeManage[Utils.id];
        return t;
    }
    static randomColor(){
        var col="#";
        for(var i=0;i<6;i++){
            col+=Math.floor(Math.random()*16).toString(16);
        }
        return col;
    }
    static random(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
     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;
    }
    static setStyle(styles){
        var style=document.createElement("style");
        document.head.appendChild(style);
        var styleSheet=document.styleSheets[document.styleSheets.length-1];
        for(var prop in styles){
            Utils.addCss(styleSheet,prop,styles[prop]);
        }
    }
    static addCss(styleSheet,selector,style){
        var str=selector+" {";
        for(var prop in style){
            var value=style[prop]
            prop=prop.replace(/([A-Z])/g,function($1){
                return "-"+$1.toLowerCase();
            })
            str+=prop+":"+value+";"
        }
        str+=" }";
        styleSheet.insertRule(str,styleSheet.cssRules.length);
    }
    static CSStoString(str){
       return str.replace(/(?<=:)(.*?)(?=;)|-[a-z](?=.+:)|;/g,function(item){
            if(item===";") return ","
            if(item[0]==="-")  return item[1].toUpperCase();
            return "'"+item.trim()+"'";
        });
    }
    // TODO 将CSS转换为对象
    static CSStoObject(str){
        str=Utils.CSStoString(str);
       return  str.split(",").reduce((value,item)=>{
           item=item.replace(/
/g,"");
            var arr=item.split(":");
            arr[0]=arr[0].replace(/s/g,"");
            if(arr[1]===undefined) return value;
            arr[1]=arr[1].replace(/'/g,"");
            value[arr[0]]=arr[1];
            return value;
        },{})
    }
    static getCookie(){
        return document.cookie.split(/;s*/).reduce((value,item)=>{
           var arr=item.split("=");
            value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
            return value;
      },{})
    }
    static getCookieValue(key){
       return Utils.getCookie()[key];
    }
    static setCookie(key,value,date){
        if(!date){
            document.cookie=`${key}=${value}`;
            return;
        }
        document.cookie=`${key}=${value};expires=${date.toUTCString()}`;
    }
    static setCookies(obj,date){
        for(var key in obj){
            Utils.setCookie(key,obj[key],date);
        }
    }
    // TODO 删除Cookie
    static removeCookie(key){
        Utils.setCookie(key,"",new Date());
    }
    static clearCookie(){
        for(var key in Utils.getCookie()){
            Utils.removeCookie(key);
        }
    }
}