<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
body {
margin: 0;
}
.goods-list {
list-style: none;
margin: 0;
padding: 0;
}
.goods-list>li {
background-image: linear-gradient(to top, gray 2%, transparent 3%);
background-position: 50% 0%;
background-size: 98% 100%;
background-repeat: no-repeat;
}
.goods-list>li {
padding: 1rem;
display: flex;
/** flex默認是不換行 */
flex-wrap: wrap;
align-items: center;
}
/*
只要設置了img的寬高,src中的圖片就會依此壓縮
但對於寬高比不一致的圖片,直接就形變了
解決辦法:套一層在外面,寬/高自適應,overflow: hidden,使用flex佈局進行居中
*/
.goods-img {
width: 5rem;
height: 5rem;
margin-right: 1rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.goods-img>img {
width: auto;
height: 100%;
}
.goods-desc {
flex-grow: 1;
}
.goods-name {
font-size: 130%;
font-weight: bold;
margin-bottom: .5rem;
}
.sale-volume {
color: gray;
margin-bottom: .5rem;
}
.goods-buy {
display: flex;
flex-wrap: wrap;
/** 讓元素兩邊和父容器對齊 */
justify-content: space-between;
}
.sale-price {
width: 15rem;
margin-bottom: .5rem;
}
.sale-price-now {
font-size: 140%;
color: red;
}
.sale-price-origin {
text-decoration: line-through;
}
.add-shop {
color: white;
background-color: red;
border-radius: 5px;
padding: .5rem;
white-space: nowrap;
}
footer {
/**
fixed是相對於瀏覽器窗口進行定位,跟absolute一樣也是絕對定位
但是它倆的參照物不同:
fixed參考的是瀏覽器窗口
absolute參考的是relative的祖先
*/
position: fixed;
box-shadow: 0 0 .5rem gray;
width: 100%;
bottom:0px;
}
#shopCart {
display: inline-block;
width: 2rem;
height: 2rem;
padding: 1rem;
}
</style>
<template id="template">
<div class="goods-img">
<!--
<img style="background-image:url('{{ src }}')"/>
-->
<img src="{{ src }}"/>
</div>
<div class="goods-desc">
<div class="goods-name">{{ name }}</div>
<div class="sale-volume">月銷 {{saleVolume}}</div>
<div class="goods-buy">
<div class="sale-price">
<span class="sale-price-now">¥{{price}}</span>
<span>/份 </span>
<span class="sale-price-origin">¥{{priceOrigin}}/份 </span>
</div>
<div class="add-shop">加入購物車</div>
</div>
</div>
</template>
<script>
const data = {
data:[
{name: "谷歌瀏覽器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3260362442,351141342&fm=58" , saleVolume: 123, price: 20, priceOrigin: 999},
{name: "搜狗瀏覽器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3710305442,2088471281&fm=58" , saleVolume: 1, price: 1, priceOrigin: 6},
{name: "火狐瀏覽器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3824766833,1967460780&fm=58&s=74F528722828EF3AC1BF94F50300C028&bpow=121&bpoh=75" , saleVolume: 992, price: 37, priceOrigin: 666},
{name: "簡單搜索", src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2407325608,2146020119&fm=58" , saleVolume: 500, price: 25, priceOrigin: 555},
{name: "UC瀏覽器", src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=252893326,2138469974&fm=58" , saleVolume: 33, price: 5, priceOrigin: 88},
], delimiters: ["{{", "}}"]
};
String.prototype.trim = function() {
//該方法不改變原始字符串,並且返回一個新的字符串
return this.replace(/^\s*|\s*$/g, '');
}
function templateEngine(data, template, delimiters) {
/*
不加入g,則只返回第一個匹配,無論執行多少次均是如此,
如果加入g,則第一次執行也返回第一個匹配,再執行返回第二個匹配,依次類推
i,表示忽略大小寫 ignore
m,表明可以進行多行匹配
\\s表示不可見字符
\\S表示可見字符
.等價於\\s|\\S
最長匹配(貪婪匹配)和最短匹配(懶惰匹配,在長度指示符後面加?)
*/
const regStr = "(.+?)";
//const regStr = "(\\s*\\S+?\\s*)";
const reg = new RegExp(delimiters[0] + regStr + delimiters[1], "g");
let str = template.innerHTML.replace(reg, function() {
/*
這裏的RegExp是全局對象,RegExp.$1...$9是全局屬性。
每次執行正則表達式操作,都會覆蓋掉之前的存儲數據
由於string.replace是先查找出所有之後,在一次性替換
arguments的第一個參數是匹配模式的字符串。
接下來的參數是與模式中的子表達式匹配的字符串,可以有 0 個或多個這樣的參數。
接下來的參數是一個整數,聲明瞭匹配在 stringObject 中出現的位置。
最後一個參數是 stringObject 本身。
chrome中RegExp.$1無法獲取到值,只能通過arguments來得到值
firefox可以用RegExp獲取子表達式的值
*/
return data[( RegExp.$1 || arguments[1]).trim()];
});
return str;
}
window.onload = ()=>{
const template = document.getElementById("template");
const goodsList = document.getElementsByClassName("goods-list")[0];
for(const d of data.data) {
const li = document.createElement("li");
li.innerHTML = templateEngine(d, template, data.delimiters);
goodsList.appendChild(li);
}
}
</script>
</head>
<body>
<ul class="goods-list">
</ul>
<footer>
<img id="shopCart" src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1545113836&di=95ae09e0ada9cb41b10498ae63c15447&src=http://pic.90sjimg.com/design/00/69/49/81/58faca780920b.png">
</footer>
</body>
</html>
JavaScript 自制可以替換屬性的模板引擎(Template)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.