商品列表
功能需求：根据数据创建商品列表
来看一下效果：
html结构：模拟商品数据，根据数据实例化Main对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>goodsList</title>
</head>
<body>
<script type="module">
import Main from './js/Main.js';
var arr=[
{img:"img01.webp",title:"不知火丑柑丑橘5斤装",desc:"第二件9.9元",price_desc:"1年历史最低价",price_now:"19.9",price_pre:"29.9",sale:"511",href:"https://item.jd.com/21562085787.html"},
{img:"img02.webp",title:"【第二件9.9】霜降圆柿饼2斤装",desc:"第二件9.9元",price_desc:"38天历史最低价",price_now:"19.9",price_pre:"39.9",sale:"130",href:"https://item.jd.com/62033699001.html"},
{img:"img03.webp",title:"第二件半价】融极厚切眼肉5片",desc:"第二件半价",price_desc:"88天历史最低价",price_now:"99",price_pre:"159",sale:"189",href:"https://item.jd.com/59888245671.html"},
{img:"img04.webp",title:"德州扒鸡500g 山东特产年货",desc:"88元选4件",price_desc:"134天历史最低价",price_now:"23.9",price_pre:"36.9",sale:"266",href:"https://item.jd.com/20821451207.html"},
{img:"img05.webp",title:"九善食 活冻厄瓜多尔白虾",desc:"2份立减",price_desc:"32天历史最低价",price_now:"49",price_pre:"89",sale:"528",href:"https://item.jd.com/63882104774.html"},
{img:"img06.webp",title:"全母盛宴（2.0-2.3两）10只",desc:"现捕现发",price_desc:"82天历史最低价",price_now:"98",price_pre:"189",sale:"35",href:"https://item.jd.com/60387540668.html"},
{img:"img07.webp",title:"态好吃100%纯可可脂黑巧克力",desc:"买一送一丝滑细腻",price_desc:"181天历史最低价",price_now:"17.9",price_pre:"29.9",sale:"150",href:"https://item.jd.com/50895183185.html"},
{img:"img08.webp",title:"陶唐峪酱卤猪头肉500g",desc:"下酒菜",price_desc:"86天历史最低价",price_now:"29.5",price_pre:"49.8",sale:"140",href:"https://item.jd.com/58729017337.html"},
{img:"img09.webp",title:"乐锦记 手撕面包2斤/整箱1000g",desc:"整箱2斤装",price_desc:"309天历史最低价",price_now:"19.8",price_pre:"29.8",sale:"259",href:"https://item.jd.com/43443070344.html"},
{img:"img10.webp",title:"买一送一雪媚娘蛋黄酥330g/盒",desc:"买一送一共12枚",price_desc:"1年历史最低价",price_now:"27.8",price_pre:"39.8",sale:"292",href:"https://item.jd.com/25665431802.html"},
{img:"img11.webp",title:"五常有机稻花香500g（1斤）",desc:"正宗五常大米",price_desc:"138天历史最低价",price_now:"19.9",price_pre:"29.9",sale:"10",href:"https://item.jd.com/56090150750.html"},
{img:"img12.webp",title:"湖南毛毛鱼 小鱼干20包 糖醋",desc:"2件8折3件7折",price_desc:"230天历史最低价",price_now:"13.9",price_pre:"19.9",sale:"103",href:"https://item.jd.com/49202317748.html"},
]
init();
function init(){
let frg=document.createDocumentFragment();
for(let i=0;i<arr.length;i++){
let main = new Main(arr[i],"./img/");
main.appendTo(frg);
}
document.body.appendChild(frg);
}
</script>
</body>
</html>
Main.js文件：根据数据创建商品列表。
import Utils from './Utils.js';
export default class Main {
static styles=false;
constructor(_list, basePath) {
//拼接图片的路径
if (basePath) _list.img = basePath + _list.img;
this.elem = this.createElem(_list);
}
createElem(_list) {
if(this.elem) return this.elem;
let div = Utils.createE("div");
div.className = "goodsContainer";
//页面结构
div.innerHTML = `<a class="goodsInfo" href="${_list.href}" target="_blank">
<img class="goodsImg" src="${_list.img}" title="${_list.title}">
<span class="goodsTit">${_list.title}</span>
<span class="goodsDesc">${_list.desc}</span></a>
<div class="goodsPrice clearfix"><div class="leftCon">
<div class="priceDesc">${_list.price_desc}</div><div class="priceNow"><span>￥</span>${_list.price_now}</div>
<del class="pricePre">￥${_list.price_pre}</del></div>
<div class="rightCon"><p class="sale">已卖<span>${_list.sale}</span>件</p><a class="saleBtn" href="${_list.href}" target="_blank">立即抢购</a></div></div>`;
//写样式
Main.setStyles();
return div;
}
appendTo(parent) {
Utils.appendTo(this.elem, parent);
}
static setStyles() {
if(Main.styles) return;
Main.styles=true;
Utils.insertCss("body", {
background: "#f5f5f5"
})
Utils.insertCss("body,div,p", {
margin: "0px",
padding: "0px"
})
Utils.insertCss(".goodsContainer", {
width: "290px",
height: "400px",
margin: "10px 0px 0px 10px",
background: "#fff",
float: "left"
})
Utils.insertCss(".goodsInfo", {
width:"270px",
paddingLeft:"20px",
cursor:"pointer",
textDecoration:"none"
})
Utils.insertCss(".goodsImg", {
width: "200px",
height: "200px",
margin: "20px 0px 0px 25px"
})
Utils.insertCss(".goodsImg:hover", {
position:"relative",
top:"-7px",
})
Utils.insertCss(".goodsTit", {
fontSize: "14px",
color: "#333333",
margin: "0px 20px 10px",
fontWeight: "bold",
textAlign: "left",
lineHeight: "20px",
height: "20px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow: "hidden",
display:"block"
})
Utils.insertCss(".goodsDesc", {
margin: "0px 0px 10px 20px",
fontSize: "14px",
color: "#e01222",
display:"block"
})
Utils.insertCss(".goodsPrice", {
paddingLeft:"20px",
paddingTop:"13px",
borderTop: "1px solid #f3f3f3"
})
Utils.insertCss(".leftCon", {
float: "left"
})
Utils.insertCss(".priceDesc", {
padding: "0 8px",
height: "16px",
lineHeight: "16px",
backgroundColor: "#e6e6e6",
fontSize: "10px",
color: "#999",
borderRadius: "2px",
position: "relative",
marginBottom:"10px"
})
Utils.insertCss(".priceDesc:after", {
content: "\".\"",
position: "absolute",
left: "0",
right: "0",
bottom: "-6px",
margin: "0 auto",
width: "0",
height: "0",
borderWidth: "3px",
borderStyle: "solid dashed dashed",
borderColor: "#e6e6e6 transparent transparent",
pointerEvents: "none",
})
Utils.insertCss(".priceNow", {
fontSize: "24px",
color: "#e01222",
marginRight: "2px",
lineHeight: "1",
minWidth: "50px",
marginBottom:"3px"
})
Utils.insertCss(".priceNow span", {
fontSize: "14px"
})
Utils.insertCss(".pricePre", {
lineHeight: "1.2",
color: "#999",
fontSize: "18px",
})
Utils.insertCss(".rightCon", {
float: "right"
})
Utils.insertCss(".sale", {
height: "18px",
fontSize: "12px",
color: "#999999",
textAlign: "right",
paddingRight: "10px",
})
Utils.insertCss(".sale span", {
fontSize: "18px",
color: "#df0021"
})
Utils.insertCss(".saleBtn", {
marginTop: "15px",
color: "#fff",
height: "38px",
lineHeight: "38px",
fontSize: "16px",
display: "block",
width: "90px",
textAlign: "center",
background: "#df0021",
textDecoration:"none"
})
Utils.insertCss(".clearfix::after", {
content: "\".\"",
display: "block",
overflow: "hidden",
visibility: "hidden",
height: "0px",
clear: "both"
})
}
}
Utils.js文件：是一个工具包文件。
export default class Utils{
static createE(elem,style,prep){
elem=document.createElement(elem);
if(style) for(let prop in style) elem.style[prop]=style[prop];
if(prep) for(let prop in prep) elem[prop]=prep[prop];
return elem;
}
static appendTo(elem,parent){
if (parent.constructor === String) parent = document.querySelector(parent);
parent.appendChild(elem);
}
static randomNum(min,max){
return Math.floor(Math.random*(max-min)+min);
}
static randomColor(alpha){
alpha=alpha||Math.random().toFixed(1);
if(isNaN(alpha)) alpha=1;
if(alpha>1) alpha=1;
if(alpha<0) alpha=0;
let col="rgba(";
for(let i=0;i<3;i++){
col+=Utils.randomNum(0,256)+",";
}
col+=alpha+")";
return col;
}
static insertCss(select,styles){
if(document.styleSheets.length===0){
let styleS=Utils.createE("style");
Utils.appendTo(styleS,document.head);
}
let styleSheet=document.styleSheets[document.styleSheets.length-1];
let str=select+"{";
for(var prop in styles){
str+=prop.replace(/[A-Z]/g,function(item){
return "-"+item.toLocaleLowerCase();
})+":"+styles[prop]+";";
}
str+="}"
styleSheet.insertRule(str,styleSheet.cssRules.length);
}
static getIdElem(elem,obj){
if(elem.id) obj[elem.id]=elem;
if(elem.children.length===0) return obj;
for(let i=0;i<elem.children.length;i++){
Utils.getIdElem(elem.children[i],obj);
}
}
}
