javascript - 购物车的JS底层原理是怎样的？

Question

1.购物车的底层原理是怎么样的？怎样才能完成统计？2.使用函数传参做出来前半部分，后半部分该如何实现？3.代码如下： {代码...} 下面那部分的：商品合计一共n件，其中最贵的商品单价是a元，总共花费了b元的那部...

淡淡烟草味 · Answer

我把代码全贴出来。你看一下吧

天蓬老师 · Answer

用面向对象来写购物车再合适不过了，下面是es6代码

class Cart{
    constructor(){
        //set，map，array，随你选
        this.list = [];
    }
    //将商品加入购物车，需要判断购物车内是否有该商品，
    //以及商品规格是否相同
    add(goods){}
    //将商品移除购物车,这个key可以是id，名称等等，你自己决定
    remove(key){}
    //计算购物车总价，当然，最贵的当然可以计算出来了，排个序就号了
    computeMoney(){}
    //保存购物车，localstorage,服务器，你自己决定，保存之后还是之前更新界面还是你决定
    save(){}
    //清空购物车
    clear(){}
    //购物车是否为空
    isEmpty(){}
    //更多逻辑.......
}

最好给每个方法添加勾子函数（onSave,onAdd,onRemove....），以实现复用，解耦

phpcn_u1582 · Answer

原理就是用户在商品选择页点击加号的时候从数据源拿到数据放到一个新数组

var data=res.data;
var shopCar=[];
add(index){//点击加号的时候
    shopCar[index]=data[index] 
}

然后得到一个新的数组对象，就是购物车清单。
统计就是把数组对象里的价格字段相加，至于你用什么方法相加看你自己喜好,我用的reduce。

如果有减号，也要有相应的减去操作。