一个简单的购物车案例代码

129 阅读1分钟
 //购物车业务:
		//后端取出来的数据 要先解析然后保存到前端的某个数据容器中
        //用控制台打印代表页面数据渲染
        var myCar={
            //前端的数据容器
            data:new Map(),
            network(){
                //业务:从后端请求的数据
                let shuju=[
                    {id:1,
                    name:"烤肉饭",
                    price:22,
                    count:1},
                    {id:2,
                    name:"柠檬水",
                    price:7,
                    count:1},
                    {id:3,
                    name:"香芋地瓜丸",
                    price:10,
                    count:1}
                ];
                shuju.forEach((el)=>{
                    //遍历保存到前端的某个数据容器中
                    this.data.set(el.id,el);
                });
            },
            addcount(id){
                //业务:增加数据的数量
                let obj=this.data.get(id);
                if(obj){
                    obj.count++;
                    this.data.set(id,obj);
                }
            },
            minus(id){
                //业务:减少数据的数量
                let obj=this.data.get(id);
                if(obj){
                    obj.count--;
                    //当数据的数量小于等于0时,从数据容器中删除这个数据
                    if(obj.count<=0){
                        this.data.delete(id);
                    };
                };
            },
            total(){
                //业务:计算数据的总价
                let total=0;
                this.data.forEach((el)=>{
                    total+=el.count*el.price;
                });
                return total;
            },
            clear(){
                //业务:一键清空购物车
                this.data.clear();
            }
        };
        myCar.network();
        myCar.addcount(1);
        myCar.addcount(2);
        myCar.addcount(3);
        console.log(myCar.data,311);
        console.log(myCar.total(),816);
        myCar.minus(1);
        myCar.minus(1);
        console.log(myCar.data);
        console.log(myCar.total(),530);
        myCar.clear();
        console.log(myCar.data,729);

image.png

image.png