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

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