Utils工具类，模块化，持续更新中

约定不等于承诺〃 2023-06-27 05:40 3阅读 0赞

export default class Utils{ 
        static date={ };
        static num=0;
        static start() { 
            Utils.num++;
            Utils.date["date_" + Utils.num] = new Date().getTime();
            return "date_" + Utils.num
        }
    
        static end(id){ 
            var time = Utils.date[id];
            delete Utils.date[id];
            return new Date().getTime() - time;
        }
    
        static random(min,max){ 
            return Math.floor(Math.random()*(max-min))+min;
        }
    
       static randomColor(alpha){ 
            if(alpha==undefined) alpha=Math.random().toFixed(2);
            if(isNaN(alpha)) alpha=1;
            if(alpha>1) alpha=1;
            if(alpha<0) alpha=0;
            var col="rgba(";
            for(var i=0;i<3;i++){ 
                col+=Math.floor(Math.random()*256)+",";
            }
            col+=alpha+")";
            return col;
        }
        static insertBefore(elem,parent){ 
            parent.insertBefore(elem,parent.firstChild);
        }
        static after(elem,sibling){ 
            sibling.parentElement.insertBefore(elem,sibling.nextsibling);
        }
        static before(elem,sibling){ 
            sibling.parentElement.insertBefore(elem,sibling);
        }
        static insertCss(select,cssStyle){ 
            if(document.styleSheets.length===0){ 
                var style=document.createElement("style");
                document.head.appendChild(style);
            }
            var styleSheet=document.styleSheets[document.styleSheets.length-1];
            var str=select+" {";
            for(var prop in cssStyle){ 
                str+=prop.replace(/([A-Z])/g,function(item){ 
                    return "-"+item.toLowerCase();
                })+":"+cssStyle[prop]+";"
            }
            str+="}";
            styleSheet.insertRule(str,styleSheet.cssRules.length);
        }
    
        static dragOn(elem,bool){ 
            // this Utils对象
            elem.bool=bool;
            elem.addEventListener("mousedown",Utils.mouseHandler);
        }
    
        static dragOff(elem){ 
            elem.removeEventListener("mousedown",Utils.mouseHandler);
        }
        //拖拽
        static mouseHandler(e){ 
            switch (e.type) { 
                case "mousedown":
                    // this elem被拖拽的元素
                    e.preventDefault();
                    document.elem = this;
                    document.x = e.offsetX;
                    document.y = e.offsetY;
                    document.addEventListener("mousemove",Utils.mouseHandler);
                    document.addEventListener("mouseup", Utils.mouseHandler);
                    var evt=new Event("dragStarts");
                    document.dispatchEvent(evt);
                    break;
                case "mousemove":
                    // this document
                    var rect = this.elem.parentElement.getBoundingClientRect();
                    this.elem.style.left = e.clientX - rect.x - this.x + "px";
                    this.elem.style.top = e.clientY - rect.y - this.y + "px";
                    if(!this.elem.bool) return;
                    if(this.elem.offsetLeft<0) this.elem.style.left="0px";
                    if(this.elem.offsetTop<0) this.elem.style.top="0px";
                    if(this.elem.offsetLeft>rect.width-this.elem.offsetWidth)this.elem.style.left=rect.width-this.elem.offsetWidth+"px";
                    if(this.elem.offsetTop>rect.height-this.elem.offsetHeight)this.elem.style.top=rect.height-this.elem.offsetHeight+"px";
               
                    break;
                case "mouseup":
                    // this document
                    this.removeEventListener("mousemove",Utils.mouseHandler);
                    this.removeEventListener("mouseup", Utils.mouseHandler);
                    var evt=new Event("dragEnds");
                    document.dispatchEvent(evt);
                    break;
            }
        }
        //添加css样式 的重构 三个参数分别是 标签 样式 属性
        static ce(type,style,props){ 
            let elem=document.createElement(type);
            //如果属性是一个对象 遍历
            if (style) { 
                for (let prop in style) { 
                    elem.style[prop]=style[prop];
                }
            }
            if(props){ 
                for(let prop in props){ 
                    elem[prop]=props[prop];
                }
            }
            return elem;
        }
        //预加载 list 数组 callback回调函数 basePath图片路径
        static reload(list,callback,basePath){ 
            if(!list || list.length===0) return;//数组没传值 跳出 不执行下面内容
            //list内容和路径拼接
            if(basePath){ 
                list=list.map(item=>basePath+item);
            }
            //创建图片
            var img=new Image();
            //给图片添加一个对象属性
            img.data={ 
                num:0,//用于累加
                resultList:[],//储存每次循环之后的复制的img
                list:list,//储存数组
                callback:callback//储存回调函数
            }
            img.addEventListener("load",Utils.loadHandlers);//加载事件
            img.src=list[0];//第一张图片的路径
        }
        //执行加载事件
        static loadHandlers(e){ 
            var data=e.currentTarget.data;//
            data.resultList.push(e.currentTarget.cloneNode(false));
            data.num++;
            if(data.num>data.list.length-1){ 
                e.currentTarget.removeEventListener("load",Utils.loadHandlers);
                //回调函数 返回的是图片的加载顺序
                data.callback(data.resultList);
                e.currentTarget.data=null;
                return;
            }
            e.currentTarget.src-data.list[data.num];
        }
        //添加style样式 select:元素类名 styles：添加样式对象
       static insertCss(select,styles){ 
        // 获取页面上样式表的长度如果没有 就创建个style标签
            if(document.styleSheets.length===0){ 
                var style=document.createElement("style");
                //把style添加到 head标签下
                document.head.appendChild(style);
            }
            //获取css 最后一项
            var styleSheet=document.styleSheets[document.styleSheets.length-1];
            //循环添加样式
            var str=select+"{";
            for(var prop in styles){ 
                //把大写字符转换成小写 格式为css样式格式
                str+=prop.replace(/([A-Z])/g,function(item){ 
                    return "-"+item.toLowerCase();
                })+":"+styles[prop]+";"
            }
            str+="}";
            //添加到css样式
              styleSheet.insertRule(str,styleSheet.cssRules.length);
       }
    
       //获取 元素id 用法： Utils.getIdElem(div, this);
       static getIdElem(elem,o){ 
           if(elem.id) o[elem.id]=elem;
           if(elem.children.length===0) return o;
           for(var i=0;i<elem.children.length;i++){ 
                Utils.getIdElem(elem.children[i],o);
           }
       }
    
    }

## 用法： ##

end  
random  
randomColor  
insertBefore  
after  
before  
insertCss  
dragOn  
dragOff  
mouseHandler  
ce  
reload  
insertCss  
getIdElem