面向對象 —— 購物車

以前的項目中須要一個購買數據商品並付款的功能，剛開始一直不敢使用面向對象的寫法，主要是沒有理清思路，並且那時的數據商品比較的複雜，就一直沒敢動，在網上也找些面向對象的寫法，把思路理清一遍，就想本身試着寫寫。

接下來我會一步一步分析，面向對象的寫法過程。整個流程大體分爲：              

一、先定義好一個商品列表的數據形式和商品總數集，相似：

var data  = [{name: 'name', unitPrice: 10, num: 2}];
var total = {type: 0, totalNum: 0, price: 0};

很明顯在 data 數組裏 name 表示單個商品名稱，unitPrice 表示單個商品單價，num 表示單個商品數量；在 total 對象裏 type 表示商品種類、totalNum 表示商品總數量、price 表示商品總價。

 

二、建立一個購物車的函數對象 ShoppingCart，並設置它的相應屬性，以下：

function ShoppingCart (name, unitPrice, num) {
    this.name      = name;
    this.unitPrice = unitPrice;
    this.num       = num;
    this.info      = {name: this.name,unitPrice: this.unitPrice,num: this.num};
}

用一個 info 來把單個商品的名稱、單價、數量保存起來，而後須要把這個 info 放到 data 數組裏而且計算商品總數集 total，因此就須要設置這個函數對象的兩個方法。就在 this.info 下面添加兩個方法：

this.add();
this.getTotal();

這裏要說明一下，爲何要把這兩個方法放在函數對象的原型裏，當 new 一個實例化對象時，就須要立刻添加這個商品信息和計算商品總數集，因此不必再用這個實例化對象調用這兩個方法。

而後使用對象的 prototype 屬性，把方法都放在這個屬性裏來調用，以下：

ShoppingCart.prototype = {
    // 添加商品
    add: function() {
        var _this = this;
        data.push(_this.info); 
    },
    // 商品總數集
    getTotal: function () {
        total.type     = data.length;
        total.totalNum = 0;
        total.price    = 0;
        for (var i = 0; i < data.length; i++) {
            total.totalNum += data[i].num;
            total.price    += data[i].num * data[i].unitPrice;                          
        }      
    }
}

 

三、有添加就會有刪除單個商品，就在 prototype 屬性裏再添加刪除商品的方法，刪除商品須要依據一個標識來刪除指定的商品，這裏我經過 name 值來刪除，這時就須要一個方法去 date 數組裏找對應這個 name 的商品，以下：

// 刪除商品
delect: function () {
    var _this = this;
    data.splice(_this.check(_this.name), 1);
    _this.getTotal();
},
// 根據名稱查商品
check: function (name) {
    for (var i = 0; i < data.length; i++) {
        if (name == data[i].name) return i;
    }
}

 

四、修改單個商品數量，以下：

// 修改單個商品的數量
changeNum: function (num) {
    var _this = this;
    if (num == 0) {
        _this.delect();
        return;
    }
    var _index  = _this.check(_this.name);
    data[_index].num = num;
    _this.getTotal();
}

這裏須要傳一個參數，來設置指定的商品的數量。

 

總體代碼以下：

var data    = new Array;
var total   = {type: 0, totalNum : 0, price:0};
function ShoppingCart (name, unitPrice, num) {
    this.name      = name;
    this.unitPrice = unitPrice;
    this.num       = num;
    this.info      = {name: this.name,unitPrice: this.unitPrice,num: this.num};
    this.add();
    this.getTotal();
}
ShoppingCart.prototype = {
    add: function() {
        var _this = this;
        data.push(_this.info); 
    },
    getTotal: function () {
        total.type  = data.length;
        total.totalNum    = 0;
        total.price = 0;
        for (var i = 0; i < data.length; i++) {
            total.totalNum += data[i].num;
            total.price    += data[i].num * data[i].unitPrice;                          
        }      
    },
    delect: function () {
        var _this = this;
        data.splice(_this.check(_this.name), 1);
        _this.getTotal();
    },
    changeNum: function (num) {
        var _this = this;
        if (num == 0) {
            _this.delect();
            return;
        }
        var _index  = _this.check(_this.name);
        data[_index].num = num;
        _this.getTotal();
    },
    check: function (name) {
        for (var i = 0; i < data.length; i++) {
            if (name == data[i].name) return i;
        }
    }
}

這個 data 數組初始化數據能夠是從後臺傳過來的數據，可是必須數據形式和定義的同樣，而且要調用一下 getTotal 這個方法獲取商品總數集。

最後就是簡單的 new 一個個實例化，例如：

var goods1 = new ShoppingCart('123', 100, 2 )
var goods2 = new ShoppingCart('456', 10, 3 )
var goods3 = new ShoppingCart('789', 1, 4 )

goods2.delect();
good3.changeNum(2)
goods2 = new ShoppingCart('1234', 11, 1 )
goods2.changeNum(0)

自行能夠把 data 和 total 打印出來看看結果\(^o^)/~