DIV CSS 佈局教程網

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

接下來我會一步一步分析，面向對象的寫法過程。整個流程大致分為：               
1、先定義好一個商品列表的數據形式和商品總數集，類似： 

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

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

2、創建一個購物車的函數對象 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;             
    }   
  }
}

3、有添加就會有刪除單個商品，就在 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;
  }
}

4、修改單個商品數量，如下： 

// 修改單個商品的數量
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^)/~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。