JS实现服务五星好评_javascript技巧_

import Utils from "./Utils.js"; export default class Star{     static STAR_SELECTED_EVENT="star_selected_Event";     constructor(content,bool){         // this就是new出的对象         this.arr=[];         this.position=-1;         this.bool=bool;         this.elem=this.createElem(content);     }     createElem(content){         if(this.elem) return this.elem;         let div=Utils.ce("div",{             height:"35px",             position:"relative"         });         let label=Utils.ce("label",{             fontSize:"16px",             marginRight: "10px",             display:"inline-block",             marginTop: "18px",         },{             textContent:content         });         div.appendChild(label);         for(let i=0;i<5;i++){             let span=Utils.ce("span",{                 display: 'inline-block',                 width:"16px",                 height:"16px",                 marginTop: "18px",                 backgroundImage:"url(./img/commstar.png)"             });             this.arr.push(span);             div.appendChild(span);         }         this.face=Utils.ce("span",{             display:"none",             position:"absolute",             width:"16px",             height:"16px",             backgroundImage:"url(./img/face-red.png)",             backgroundPositionX:"0px",             top:"0px"         });         div.appendChild(this.face);         // 原本事件函数中的this是被侦听的对象,现在通过箭头函数,this重新指回当前实例化对象         div.addEventListener("mouseover",e=>{             this.mouseHandler(e);         });         div.addEventListener("mouseleave",e=>{             this.mouseHandler(e);         });         div.addEventListener("click",e=>{             this.clickHandler(e);         })         return div;     }     appendTo(parent){         parent.appendChild(this.elem);     }     mouseHandler(e){         if(this.bool) return;         // e.currentTarget         var num=this.arr.indexOf(e.target);         if(e.type==="mouseover"){             if(e.target.constructor!==HTMLSpanElement) return;             this.setStar(index=>{                 return index<=num || index<=this.position;             })             Object.assign(this.face.style,{                 backgroundPositionX:-(this.arr.length-num-1)*20+"px",                 left:e.target.offsetLeft+"px",                 display:"block"             })         }else if(e.type==="mouseleave"){             this.setStar(index=>{                 return index<=this.position;             })             this.face.style.display="none"         }     }     clickHandler(e){         if(this.bool) return;         if(e.target.constructor!==HTMLSpanElement) return;         this.position=this.arr.indexOf(e.target);         // 当使用回调函数时,this被重新指向,因此我们需要使用箭头函数重新将this指向实例化的对象        this.setStar(index=>{            return index<=this.position;        });        let evt=new Event(Star.STAR_SELECTED_EVENT);        evt.position=this.position;        evt.content=this.elem.firstElementChild.textContent;        document.dispatchEvent(evt);     }     setStar(fn){         for(let i=0;i

export default class Utils {     static IMG_LOAD_FINISH = "img_load_finish";     constructor() {     }     static ce(type, style, prop) {         let elem = document.createElement(type);         if (style) Object.assign(elem.style, style);         if (prop) Object.assign(elem, prop);         return elem;     }     static randomColor() {         let c = "#";         for (let i = 0; i < 6; i++) {             c += Math.floor(Math.random() * 16).toString(16);         }         return c;     }     static random(min, max) {         return Math.floor(Math.random() * (max - min) + min);     }     static loadImgs(imgList, baseUrl, handler, type) {         let img = new Image();         img.addEventListener("load", Utils.loadHandler);         let url = Utils.getImgUrl(imgList[0], baseUrl, type);         img.src = url;         img.imgList = imgList;         img.baseUrl = baseUrl;         img.handler = handler;         img.type = type;         img.list = [];         img.num = 0;     }     static loadHandler(e) {         let img = this.cloneNode(false);         this.list.push(img);         this.num++;         if (this.num > this.imgList.length - 1) {             this.removeEventListener("load", Utils.loadHandler);             if (this.handler) {                 this.handler(this.list);                 return;             }             let evt = new Event(Utils.IMG_LOAD_FINISH);             evt.list = this.list;             document.dispatchEvent(evt);             return;         }         this.src = Utils.getImgUrl(this.imgList[this.num], this.baseUrl, this.type);     }     static getImgUrl(name, baseUrl, type) {         let url = "";         if (baseUrl) url += baseUrl;         if (type) {             if (name.indexOf(".") < 0) name += "." + type;             else name = name.replace(/\.\w+$/, "." + type);         }         url += name;         return url     } }