原生JS结合cookie实现商品评分组件
组件样式效果：
再次访问记录用户上次操作：
开发思路如下:
1.利用JS直接操作DOM的方式开发商品评分组件，主要实现功能有：显示评价评分的样式以及将用户操作后对应的数据返回到主页面
2.主页面引入商品评分组件的js文件并根据规定格式的数据，生成对应的组件元素并插入页面
3.主页面利用侦听事件接收组件抛发的数据并保存，每次有组件抛发事件都会覆盖上次抛发的数据，直到页面关闭，将最后一次抛发的数据保存到cookie中。
4.当再次打开主页面时，先判断cookie中是否有对应的数据，如果有提取cookie其中的数据，先根据页面数据生成对应的组件元素，再将cookie中数据传入对应组件元素中重新渲染，最后将元素插入主页面
注意点：
因为当再次打开页面，用户可能不一定会修改所有的组件元素，这样组件抛出的数据就不完整，不会是所有元素的数据，当我们在保存数据的时候需要和上一次保存的数据进行比对，只覆盖和上一次保存数据不同的属性，保证数据的完整性。
主页面JS部分代码如下：
import Star from "./js/Star.js";
var data=["商品符合度","店家服务态度","快递配送速度","快递员服务","快递包装"];
var cookieStorage={};
// 初始化加载先拿到cookie,切割好数据之后，在初始化创建渲染完评分数据对象之后，再通过setData的方法修改数据
var hository=JSON.parse(document.cookie.split("=")[1]);
data.forEach((item)=>{
var star=new Star(item);
star.addEventListener("change",changeHandler);
if(JSON.stringify(hository)!=="{}"){//判断cookie中是否有对应的数据
star.setData(hository[item])
}
star.appendTo(".ShowStarList");
})
cookieStorage=hository;
function changeHandler(e){
for(var prop in e.StarList){//因为当再次打开页面，用户可能不一定会修改所有的组件元素，这样抛出的数据就不完整不会是所有元素的数据
cookieStorage[prop]=e.StarList[prop];
}
}
//页面点击操作之后，将数据存放到cookieStorage中，当下一次再点击时将cookieStorage中的数据覆盖
// 直到页面被关闭时，触发下述事件，将cookieStorage+时间段的方式存储到cookie中
window.onbeforeunload=closeHandler;
function closeHandler(){
var date=new Date();
date.setFullYear(2021);
document.cookie="cookieStorage="+JSON.stringify(cookieStorage)+";expires="+date.toUTCString();
}
商品评分组件JS部分代码如下：
import Base from "./Base.js";
export default class Star extends Base{
static StarList = {};//用来存储数据选中的评分数据到时候返回页面
label;
starCon = [];
pos=-1
labelWrap;
starWrap;
face;
scoreWrap;
constructor(_label) {
// 第一次创建是用label生成的对象，后面都是用StarList去渲染对象
super();
this.label = _label;
this.elem.setAttribute("class", "StarCon");
this.createStarCon();
this.setStyle();
}
//创建评分组件的HTML结构
createStarCon() {
this.labelWrap = document.createElement("span");
this.labelWrap.textContent = this.label;
this.starWrap = document.createElement("div");
for (let i = 0; i < 5; i++){
let singleStar = document.createElement("div");
singleStar.setAttribute("class", "singleStar");
this.starWrap.appendChild(singleStar);
this.starCon.push(singleStar);
}
this.face = document.createElement("div");
this.starWrap.appendChild(this.face);
this.scoreWrap = document.createElement("span");
this.scoreWrap.textContent = "0分";
this.labelWrap.setAttribute("class", "label");
this.starWrap.setAttribute("class", "star");
this.face.setAttribute("class", "face");
this.scoreWrap.setAttribute("class", "score");
this.elem.appendChild(this.labelWrap);
this.elem.appendChild(this.starWrap);
this.elem.appendChild(this.scoreWrap);
this.starWrap.addEventListener("mouseover",e=>this.mouseHandler(e));
this.starWrap.addEventListener("click",e=>this.mouseHandler(e));
this.starWrap.addEventListener("mouseleave",e=>this.mouseHandler(e));
}
mouseHandler(e) {
// click和mouseover都要不停渲染星星样式，所以都要通过遍历识别鼠标当前指向的是哪个e.target，从而通过for循环渲染星星
// 其中点击事件和鼠标移动事件不同的地方在于
// 点击事件会记录下一个全局变量pos表示选中该数据，且会抛出事件传递包括同页面其他实例对象的数据给页面
// 鼠标移动事件则是利用相同原理除了渲染星星外，还要渲染分数和笑脸
switch (e.type) {
case "mouseover":
let index = this.starCon.indexOf(e.target);
if (index < 0) return;
this.changeScore(index + 1);
this.changeFace(index);
this.changeStar(index);
break;
case "click":
let index1 = this.starCon.indexOf(e.target);
if (index1 < 0) return;
this.pos = index1;
this.dispatch();
this.changeStar(index1);
break;
case "mouseleave":
this.changeStar(this.pos);
this.changeScore(this.pos + 1);
this.changeFace(-1);
break;
}
}
//根据分数改变星星样式
changeStar(n){
for(var i=0;i<this.starCon.length;i++){
if(i<=n || i<=this.pos){
this.starCon[i].style.backgroundPositionY="-16px";
}else{
this.starCon[i].style.backgroundPositionY="0px";
}
}
}
//根据分数改变分数样式
changeScore(n){
this.scoreWrap.textContent=n+"分";
if(n===0){
this.scoreWrap.style.color="#999";
}else{
this.scoreWrap.style.color="#e4393c";
}
}
//根据分数改变笑脸样式
changeFace(n){
if(n<0){
this.face.style.display="none";
return
}
var index=5-n-1
// 鼠标移动时，笑脸的div位置和其背景图的位置都要同时移动
// 鼠标离开或者点击之后，笑脸消失
this.face.style.display="block";
this.face.style.backgroundPositionX=-index*20+"px";
this.face.style.left=this.starCon[n].offsetLeft+"px";
}
//每次点击后抛发改变后的实例化组件元素群组的数据
dispatch() {
Star.StarList[this.label]=this.pos+1;
var evt=new Event("change");
evt.score=this.pos+1;
evt.label=this.label;
evt.StarList=Star.StarList;
this.dispatchEvent(evt);
}
//根据cookie传入的数据重新渲染组件元素
setData(historyScore) {
if (historyScore < 1) return;
this.pos = historyScore-1;
this.changeStar(historyScore-1);
this.changeScore(historyScore);
}
//设置实例化组件的样式
setStyle() {
Utils.addCSS(".label",{
float: "left",
height: "16px",
font: '12px / 150% tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋体, sans-serif',
marginRight: "10px",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
color: "rgb(102, 102, 102)",
});
Utils.addCSS(".star",{
float: "left",
height: "16px",
position: "relative",
marginTop: "1px",
});
Utils.addCSS(".singleStar",{
float: "left",
height: "16px",
width: "16px",
backgroundImage: "url(../img/commstar.png)",
backgroundPositionY: "0px",
});
Utils.addCSS(".face",{
height: "16px",
width: "16px",
backgroundImage: "url(../img/face-red.png)",
position:"absolute",
top:"-16px",
display: "none",
backgroundPositionX:"0px",
left:"0px",
});
Utils.addCSS(".score",{
position:"relative",
width:"30px",
height:"16px",
top:"-2px",
marginLeft: "10px",
font: '12px / 150% tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", 宋体, sans-serif',
textAlign:"right",
color:"#999",
});
}
}
