JavaScript物件導向編寫購物車功能_javascript技巧

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

接下來我會一步一步分析，物件導向的寫法過程。整個流程大致分為：               
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^)/~

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。