我跟着教程学的程序已经正常运行,但我有一点不能理解
问题是这样的。实现数据的单项绑定
//左侧模板类目
var itemTmpl = `<div class="menu-item">
<img class="img" src="$picture" />
<div class="menu-item-right">
<p class="item-title">$name</p>
<p class="item-description">$description</p>
<p class="item-zan">$praise_content</p>
<p class="item-price">¥$min_price<span class="unit">/$unit</span></p>
</div>
<div class="select-content">
<div class="minus"></div>
<div class="count">$chooseCount</div>
<div class="plus"></div>
</div>
</div>`
//这里因为外面穿入了data,我们就不自己get了
function getList(data){
var list =data;
initRightList(list);
}
//渲染列表 parma array 就是spus
function initRightList(list){
$('.right-list-inner').html('');
list.forEach((item, index) => {
if(!item.chooseCount){
item.chooseCount = 0; //在这里创建的chooseCount
}
var str = itemTmpl.replace('$picture', item.picture)
.replace('$name', item.name)
.replace('$description', item.description)
.replace('$praise_content', item.praise_content)
.replace('$min_price', item.min_price)
.replace('$unit', item.unit)
.replace('$chooseCount', item.chooseCount);
var $target = $(str);
$target.data('itemData', item);
$('.right-list-inner').append($target);
});
}
//渲染title parma array
function initRightTitle(str){
$('.right-title').text(str);
}
//给按钮绑定点击事件
function addClick(){
$('.menu-item').on('click', '.plus', (e) => {
var $count = $(e.currentTarget).parent().find('.count');
$count.text(parseInt($count.text() || '0') + 1);
var item = $(e.currentTarget).parents('.menu-item').first();//用first是因为可能是一个数组
var itemData = item.data('itemData');
itemData.chooseCount = itemData.chooseCount + 1;
console.log('我为这个项目添加了chooseCount', itemData);
console.log('我是更改了之后的总数据window.food_spu_tags', window.food_spu_tags);
window.ShopBar.renderItems();
});
$('.menu-item').on('click', '.minus', (e) => {
var $count = $(e.currentTarget).parent().find('.count');
if($count.text() == 0) return;
$count.text(parseInt($count.text() || '0') - 1);
var item = $(e.currentTarget).parents('.menu-item').first();//用first是因为可能是一个数组
var itemData = item.data('itemData');
itemData.chooseCount = itemData.chooseCount - 1;
window.ShopBar.renderItems();
});
}
function init(data){ //这里的data指的是food_spu_tags,也就是list
getList(data.spus || []);
initRightTitle(data.name || '');
addClick();
}
//不能直接用init()的原因是,如果用了就会直接调用,但此时init的data还没传入
window.Right = {
refresh: init
}
注意那个点击事件,点击完后就调用了shopbar.js
代码如下
//顶部模板字符串
var itemTopTmpl = `<div class="choose-content">
<div class="content-top">
<div class="clear-car">清空购物车</div>
</div>
</div>`;
//底部模板字符串
var itemBottomTmpl = `<div class="bottom-content">
<div class="shop-icon">
<div class="dot-num hide">1</div>
</div>
<div class="price-content">
<p class="total-price">¥<span class="total-price-span">0</span></p>
<p class="other-price">另需配送 ¥<span class="shipping-fee">0</span></p>
</div>
<div class="submit-btn">去结算</div>
</div>`;
var $strBottom = $(itemBottomTmpl);
var $strTop = $(itemTopTmpl);
function init(data){
$('.shop-bar').append($strTop);
$('.shop-bar').append($strBottom);
}
function renderItems(){
$strTop.find('.choose-item').remove();
var list = window.food_spu_tags || [];
var tmpl = `<div class="choose-item">
<div class="item-name">$name</div>
<div class="price">¥<span class="total">$price</span></div>
<div class="select-content">
<div class="minus"></div>
<div class="count">$chooseCount</div>
<div class="plus"></div>
</div>
</div>`
var totalPrice = 0;
list.forEach((item, index) => {
item.spus.forEach((_item) => {
//如果有菜品数量大于0就开始渲染这条数据
if(_item.chooseCount > 0){
//计算每个菜品的总价就是单价x数量
var price = _item.min_price*_item.chooseCount;
var row = tmpl.replace('$name', _item.name)
.replace('$price', price)
.replace('chooseCount', _item.chooseCount);
// 计算整个总价
totalPrice += price;
var $row = $(row);
$row.data('itemData', _item); //这里的row就是改了数据的tmpl,是div.choose-item
$strTop.append($row);
}
})
});
}
window.ShopBar = {
renderItems: renderItems
}
init();
我觉得很奇怪的点在上面那个JS的点击事件,他不是复制了一个IitemData等于jquery对象里传递过来的数据了吗,但之后改动他为什么前面暴露出来的window_spu_tags会变啊,是因为深浅拷贝的原因吗,有人能帮我细讲吗,如果要变成深拷贝应该怎么改?