思路
1.在哪里存储数据到cookie中
2.如何处理cookie数据
3.cookie数据回显
import Component from "./Component.js";
export default class Star extends Component {
static STAR_NUM = 5;
label = "";
starCon;
face;
score;
pos = -1;
starArr = [];
static StarScoreList = {};
constructor(_label) {
super();
this.label = _label;
Object.assign(this.elem.style, {
width: "auto",
float: "left",
height: "16px",
paddingBottom: "10px",
marginRight: "20px",
paddingTop: "16px"
})
Star.StarScoreList[_label] = 0;
this.createLabel(_label);
this.createStar();
this.createScore();
//初始化显示
this.useCookie();
}
//使用cookie数据来回显页面数据
//1.判断初始值,如果不存在cookie数据时,则不使用cookie
//2.当cookie有数据时,用cookie数据回显
useCookie() {
var obj = this.getCookie();
if (obj[this.label + "_score"] !== 0 && !isNaN(obj[this.label + "_score"])) {
this.changeStar(Number(obj[this.label + "_score"]) - 1);
this.changeScore(obj[this.label + "_score"]);
//记录点击的位置,防止页面刷新
this.pos = Number(obj[this.label + "_score"]) - 1;
}
}
createLabel(_label) {
let labels = document.createElement("span");
labels.textContent = _label;
Object.assign(labels.style, {
float: "left",
height: "16px",
lineHeight: "16px",
marginRight: "10px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
color: "#666"
});
this.elem.appendChild(labels);
}
createStar() {
this.starCon = document.createElement("div");
Object.assign(this.starCon.style, {
float: "left",
height: "16px",
position: "relative",
marginTop: "1px"
})
for (let i = 0; i < Star.STAR_NUM; i++) {
let star = document.createElement("div");
Object.assign(star.style, {
width: "16px",
height: "16px",
float: "left",
backgroundImage: "url(./img/commstar.png)",
})
this.starArr.push(star);
this.starCon.appendChild(star);
}
this.starCon.addEventListener("mouseover", e => this.mouseHandler(e));
this.starCon.addEventListener("click", e => this.mouseHandler(e));
this.starCon.addEventListener("mouseleave", e => this.mouseHandler(e));
this.face = document.createElement("div");
Object.assign(this.face.style, {
width: "16px",
height: "16px",
backgroundImage: "url(./img/face-red.png)",
position: "absolute",
top: "-16px",
display: "none"
})
this.starCon.appendChild(this.face);
this.elem.appendChild(this.starCon);
}
createScore() {
this.score = document.createElement("span");
Object.assign(this.score.style, {
position: "relative",
width: "30px",
height: "16px",
top: "-2px",
marginLeft: "10px",
lineHeight: "16px",
textAlign: "right",
color: "#999",
font: '12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif',
});
this.score.textContent = "0分";
this.elem.appendChild(this.score);
}
mouseHandler(e) {
switch (e.type) {
case "click":
case "mouseover":
let index = this.starArr.indexOf(e.target);
if (index < 0) return;
if (e.type === "click") {
this.pos = index;
this.dispatch();
//记录点击时数据,存储在cookie中,以this.label + "_score=" + this.score.textContent形式存储
document.cookie = this.label + "_score=" + this.score.textContent;
}
else {
this.changeScore(index + 1);
this.changeFace(index);
}
this.changeStar(index);
break;
case "mouseleave":
this.changeStar(this.pos);
this.changeScore(this.pos + 1);
this.changeFace(-1);
break;
}
}
changeStar(n) {
for (var i = 0; i < this.starArr.length; i++) {
if (i <= n || i <= this.pos) {
this.starArr[i].style.backgroundPositionY = "-16px";
} else {
this.starArr[i].style.backgroundPositionY = "0px";
}
}
}
changeScore(n) {
this.score.textContent = n + "分";
if (n === 0) {
this.score.style.color = "#999";
} else {
this.score.style.color = "#e4393c";
}
}
changeFace(n) {
if (n < 0) {
this.face.style.display = "none";
return
}
var index = Star.STAR_NUM - n - 1
this.face.style.display = "block";
this.face.style.backgroundPositionX = -index * 20 + "px";
this.face.style.left = this.starArr[n].offsetLeft + "px";
}
dispatch() {
Star.StarScoreList[this.label] = this.pos + 1;
var evt = new Event("change");
evt.score = this.pos + 1;
evt.label = this.label;
evt.scoreList = Star.StarScoreList;
this.dispatchEvent(evt);
}
/**
* 将点击时存储的cookie取出, 返回对象列表
*/
getCookie() {
if (document.cookie.length == 0) return {};
return document.cookie.split(";").reduce((value, item) => {
var arr = item.split("=");
value[arr[0].trim()] = arr[1].split("分")[0].trim();
return value;
}, {})
}
}