JS完美收官 localstorage 中遇到的知识点
1、运算符 && 的优先级比 = 等号高
这是什么错误？
Uncaught SyntaxError: Invalid left-hand side in assignment
<div></div>
<script>
var last = document.getElementsByTagName('div')[0];
last && last.className = 'active'; // Uncaught SyntaxError: Invalid left-hand side in assignment
console.dir(last.className);
</script>这是一个语法的错误
1. last && last.className 运算符 && 的优先级，比 = 等号要高 = 'active'
2. 所以先这样运算 last && last.className
再赋值运算 = 'active'
3. last && last.className 运算完是空字符串，空字符串再赋值 className 当然会报错
last && ( last.className = 'active' ) 所以要加一个括号，提升优先级
<div></div>
<script>
var last = document.getElementsByTagName('div')[0];
last && (last.className = 'active');
console.dir(last.className); // active
</script>2、选项卡
逻辑
1. 先让 last.className 设置为空，
所以如果 last 是 true 把 last.className 设置为空，如果 last.className 是 false 还设置为空
2. 再让 last.className 等于active
3. 最后把当前点击的 span 对象赋值给 last，下一次点击的时候是上一个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
.color{
width:300px;height:26px;color:#333;font-weight:bold;
position:absolute;top:50%;left:50%;margin-left:-150px;margin-top:-100px;
}
.color span{
display:inline-block;
width:54px;height:26px;line-height:26px;text-align:center;
color:#666;font-size:12px;
border:1px solid #ddd;margin-right:10px;cursor:pointer;box-sizing:border-box;
}
.color span.active{
border:2px solid #b4a078;line-height:24px;
}
</style>
</head>
<body>
<div class="color">
<span>粉色</span>
<span>蓝色</span>
<span>黄色</span>
<span>绿色</span>
</div>
<script>
var product = document.getElementsByTagName('div')[0];
var spans = product.getElementsByTagName('span');
var last = null;
for(var i = 0; i < spans.length; i++){
spans[i].onclick = function(){
last && (last.className = '');
this.className = 'active';
last = this; // 把当前点击的span对象赋值给last，下一次点击的时候是上一个对象
}
}
</script>
</body>
</html>注意一下：
last && ( last.className = '' ) 不加括号点击会会报错
Uncaught TypeError: Cannot set properties of null (setting 'className')
意思是 last 元素是 null 不能设置这个元素，因为上面声明的时候就是 null
点击选中的颜色后，再点击一次取消选中，下面是我自己写的代码
var product = document.getElementsByTagName('div')[0];
var spans = product.getElementsByTagName('span');
var last = null;
for(var i = 0; i < spans.length; i++){
spans[i].onclick = function(){
if(this != last){
last && (last.className = '');
this.className = 'active';
last = this;
}else{
this.className = '';
last = null;
}
}
}陈老师讲的简洁高效
var product = document.getElementsByTagName('div')[0];
var spans = product.getElementsByTagName('span');
var last = null;
for(var i = 0; i < spans.length; i++){
spans[i].onclick = function(){
last && last!=this && (last.className = '');
// 这句的意思主要是把last.className设置为空，就是取消掉className
// 什么时候取消呢？
// 1.last 这个不说了
// 2.last!=this 意思是当前的last不等于，当前的点击的this，
// 就是说上一个和当前的不一样，我们才会清掉className(ast.className = '')
// 判断this.className有值给一个空，否则赋值active，就是第一次点击的时候
this.className = this.className ? '' : 'active';
last = this;
}
}3、dataset 属性
获取属性
<div
id="expense"
data-drink="coffee"
data-food="sushi"
data-meal="lunch"
>¥20.12</div>
<script>
var obox = document.getElementById('expense');
console.log(obox.dataset); // DOMStringMap {drink: 'coffee', food: 'sushi', meal: 'lunch'}
console.log(obox.dataset.drink); // coffee
console.log(obox.dataset.food); // sushi
console.log(obox.dataset.meal); // lunch
</script>添加属性
<div id="expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
<script>
var obox = document.getElementById('expense');
obox.dataset.name = '南极';
console.log( obox.dataset ); // DOMStringMap {drink: 'coffee', food: 'sushi', meal: 'lunch', name: '南极人'}
</script>页面元素也添加了属性 <div id="expense" data-drink="coffee" data-food="sushi" data-meal="lunch" data-name="南极人">¥20.12</div>
项目中的用法
<span data-id="10001">粉色</span>
<script>
var oSpan = document.getElementsByTagName('span')[0];
console.log(oSpan.dataset.id); // 10001
oSpan.dataset.name = '南极人'; // <span data-id="10001" data-name="南极人">粉色</span>
</script>4、拼接图片名
图片命名 img_01-1.png ，
01 代表第一行的商品，后面的 -1 代表第一行第一张图片，一定要加括号，不加括号变成字符串了
var n = 0,
index = 0;
console.log('images/img_0' +(n+1)+ '-' +(index+1)+ '.png'); // images/img_01-1.png
console.log('images/img_0' + n+1 + '-' + index+1 + '.png'); // images/img_001-01.png5、反向思维
正向思维
<button style="height:50px;padding:0 20px;background:#cb4a61;color:#fff;cursor:pointer;border:none;outline:none;">加入购物车</button>
<script>
var btn = document.getElementsByTagName('button')[0];
var colorValue = '';
btn.onclick = function(){
if(colorValue){
// 加入购物车代码...
}else{
alert('请选择商品颜色')
}
}
</script>正向的思维的伪代码
if(有颜色 && 有数量){
// 加入购物车...
}else{
alert()
}反向思维的写发
<button style="height:50px;padding:0 20px;background:#cb4a61;color:#fff;cursor:pointer;border:none;outline:none;">加入购物车</button>
<script>
var btn = document.getElementsByTagName('button')[0];
var colorValue = '';
btn.onclick = function(){
// 反向思维
if(!colorValue){
alert('请选择商品颜色');
return; // 这里必须有 return 不然接着往下执行了
}
document.write('执行购物车代码~~~~'); // 这行不会被执行
}
</script>6、selectDate 对象赋值后本地存储
<span data-id="10001">粉色</span> 每一个商品的 data-id 就对应一个商品，这个 id 号就像身份证一样是唯一的不会重复
<span data-id="10001">粉色</span>
<script>
var selectData = {};
var oSpan = document.getElementsByTagName('span')[0],
colorId = oSpan.dataset.id;
var id = 10001,
name = '打不翻的吸盘碗',
colorValue = '粉色',
price = '21.00',
selectNum = '商品选的件数',
imgSrc = 'images/img_01-1.png',
time = new Date().getTime();
selectData[colorId] = {
"id": colorId,
"name": name,
"color": colorValue,
"price": price,
"num": selectNum,
"img": imgSrc,
"time": new Date().getTime()
}
console.log(JSON.stringify(selectData)); // 储存的selectData对象，要转为字符串格式
localStorage.setItem('shoppingCart', JSON.stringify(selectData));
</script>把id 10001当做key，这就是一条数据，
"10001":{
"id":"10001",
"name","打不翻的吸盘碗",
...
},
"10002":{
"id":"10002",
"name","打不翻的吸盘碗",
...
}
selectData[colorId] = {
"id":"10001",
"name":"打不翻的吸盘碗",
"color":"粉色",
"price":"21.00",
"num":6 商品选的件数,
"img":"images/img_01-1.png",
"time":时间戳，为了排序
}