面向对象封装购物车

面向对象 1511

定义大对象

// 产品对象
function Product(id, name, price, num) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.num = num;
}
// 购物车对象
function ShopCar() {
    //存储对象
    this.productArr = [];
}

定义属性和方法

// 产品对象
function Product(id, name, price, num) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.num = num;
}
// 购物车对象
function ShopCar() {
    //存储对象
    this.productArr = [];
}
// 添加产品
ShopCar.prototype.add = function () {}
// 删除商品
ShopCar.prototype.del = function () {}
// 找产品
ShopCar.prototype.findProduct = function (id) {}
// 选中
ShopCar.prototype.check = function () {}
// 取消选中
ShopCar.prototype.uncheck = function () {}
// 添加num
ShopCar.prototype.plus = function () {}
// 减少num 
ShopCar.prototype.minus = function () {}

书写业务逻辑

实现选中功能逻辑

01.实例化购物车

// 第一步：使用对象
window.onload = function(){
    var shop = new ShopCar();
}

02.实现添加商品

// 添加产品
ShopCar.prototype.add = function (p) {
    this.productArr.push(p);
    console.log("成功添加一个商品：",this.productArr);
}

03.实现选中商品

// 选中
ShopCar.prototype.check = function (dom) {
    var shopInfo = $(dom).parents('.shop-info');
    // Product(id, name, price, num)
    var id = shopInfo.data('id');
    console.log(shopInfo.data('id'));
    var name = shopInfo.find('h4').text();
    var price = +shopInfo.find('.price').text();
    var num = +shopInfo.find('.num').text();
    var pro = new Product(id, name, price, num);
    // 保存到购物车
    this.add(pro);
    // 更新价格
    this.updateTotalPrice();
}

04.实现更新价格

// 更新价格
ShopCar.prototype.updateTotalPrice = function(){
    var total = 0;
    for(var i=0; i< this.productArr.length; i++){
        total += this.productArr[i]['price']*this.productArr[i]['num'];
    }
    $("#AllTotal").text(total);
}

实现反选逻辑

01.拓展数组功能

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

02.选中逻辑

// initEvent
ShopCar.prototype.initEvent = function(){
    var that = this;
    // 绑定选中时间
    $(".goodsCheck").click(function(){
        // this点击谁就是谁
        if(this.checked){ // 如果选中，则添加
            that.check(this);
        }else{// 否则，删除商品
            that.uncheck(this);
        }
    })
}

03.取消选中

// 取消选中
ShopCar.prototype.uncheck = function (dom) {
    var shopInfo = $(dom).parents('.shop-info');
    var id = shopInfo.data('id');
    for(var i=0; i<this.productArr.length; i++){
        if(this.productArr[i]['id'] === id){
            this.productArr.remove(this.productArr[i]);
            this.updateTotalPrice();
        }
    }
}

实现添加、减少功能

01.实现添加

// 添加num
ShopCar.prototype.plus = function (dom) {
        var shopInfo = $(dom).parents('.shop-info');
        var id = shopInfo.data('id');
        var name = shopInfo.find('h4').text();
        var price = parseInt(shopInfo.find('.price').text());
        var num = +shopInfo.find('.num').text();
            num++;
            shopInfo.find('.num').text(num)
        // isChecked[0].checked 原生的用法
        // jq用法 isChecked.is(':checked')
        // isChecked[0] jq数组转换为原生
        // dom对象转换为jq， $(DOM)
        var checkDom = shopInfo.find('.goods-check').is(':checked');
        if(checkDom){// 如何选中，则更新num
            // 怎么改变
            for(var i=0; i<this.productArr.length;i++){
                if(this.productArr[i]['id'] === id){
                    var obj = this.productArr[i];
                    obj.num = num;
                }
            }
            this.updateTotalPrice();
        }else{
        }
        console.log(name,price,num ,checkDom);
}

实现全选和反选

01.全选和反选

    // 绑定店铺全选
    $(".shopCheck").click(function(){
        var isCheck = $(this).is(':checked');
        // console.log(isCheck);
        var shopGroupItem = $(this).parents('.shop-group-item');
        var shopInfoArr = shopGroupItem.find('.shop-info');
        var newArr = [];
        for(var i=0; i<shopInfoArr.length; i++){
            var shopInfo = $(shopInfoArr[i]);
            var checkDom = shopInfo.find('.goodsCheck');
            if(isCheck){
                checkDom.prop('checked', true);
                // Product(id, name, price, num)
                var id = shopInfo.data('id');
                console.log(shopInfo.data('id'));
                var name = shopInfo.find('h4').text();
                var price = +shopInfo.find('.price').text();
                var num = +shopInfo.find('.num').text();
                var pro = new Product(id, name, price, num);
                newArr.push(pro);
                // $(":checkbox").prop("checked", true);
            }else{
                checkDom.prop('checked', false);
            }
            // checkDom.checked = true;
        }
        that.productArr = newArr; // 把数据替换原来的数据
        that.updateTotalPrice();
    })

02.是否全选，受到单个选中 影响

// 判断是否已经全选
ShopCar.prototype.checkAll = function(){
   var checkList =  $(".goodsCheck");
   var flag = false;
   checkList.each(function(index,item){
       //console.log(this)
       var isCheck = $(this).is(':checked');
       if (!isCheck){//只要有一个未选中，则全选不选中
         flag = true;
       }
   })
   if(flag){//表示有一个未选中
       $(".shopCheck").prop('checked',false);
   }else{
       $(".shopCheck").prop('checked', true);
   }
}