快捷導(dǎo)航

JavaScript面向?qū)ο缶帉?xiě)購(gòu)物車(chē)功能

更新時(shí)間：2016年08月19日 14:28:08 作者：yu.l

這篇文章主要為大家詳細(xì)介紹了JavaScript面向?qū)ο缶帉?xiě)購(gòu)物車(chē)功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

之前的項(xiàng)目中需要一個(gè)購(gòu)買(mǎi)數(shù)據(jù)商品并付款的功能，剛開(kāi)始一直不敢使用面向?qū)ο蟮膶?xiě)法，主要是沒(méi)有理清思路，而且那時(shí)的數(shù)據(jù)商品比較的復(fù)雜，就一直沒(méi)敢動(dòng)，在網(wǎng)上也找些面向?qū)ο蟮膶?xiě)法，把思路理清一遍，就想自己試著寫(xiě)寫(xiě)。

接下來(lái)我會(huì)一步一步分析，面向?qū)ο蟮膶?xiě)法過(guò)程。整個(gè)流程大致分為：
1、先定義好一個(gè)商品列表的數(shù)據(jù)形式和商品總數(shù)集，類(lèi)似：

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

很明顯在 data 數(shù)組里 name 表示單個(gè)商品名稱(chēng)，unitPrice 表示單個(gè)商品單價(jià)，num 表示單個(gè)商品數(shù)量；在 total 對(duì)象里 type 表示商品種類(lèi)、totalNum 表示商品總數(shù)量、price 表示商品總價(jià)。

2、創(chuàng)建一個(gè)購(gòu)物車(chē)的函數(shù)對(duì)象 ShoppingCart，并設(shè)置它的相應(yīng)屬性，如下：

 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};
}

用一個(gè) info 來(lái)把單個(gè)商品的名稱(chēng)、單價(jià)、數(shù)量保存起來(lái)，然后需要把這個(gè) info 放到 data 數(shù)組里并且計(jì)算商品總數(shù)集 total，所以就需要設(shè)置這個(gè)函數(shù)對(duì)象的兩個(gè)方法。就在 this.info 下面添加兩個(gè)方法：

this.add();
this.getTotal();
這里要說(shuō)明一下，為什么要把這兩個(gè)方法放在函數(shù)對(duì)象的原型里，當(dāng) new 一個(gè)實(shí)例化對(duì)象時(shí)，就需要馬上添加這個(gè)商品信息和計(jì)算商品總數(shù)集，所以沒(méi)必要再用這個(gè)實(shí)例化對(duì)象調(diào)用這兩個(gè)方法。

然后使用對(duì)象的 prototype 屬性，把方法都放在這個(gè)屬性里來(lái)調(diào)用，如下：

ShoppingCart.prototype = {
  // 添加商品
  add: function() {
    var _this = this;
    data.push(_this.info); 
  },
  // 商品總數(shù)集
  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、有添加就會(huì)有刪除單個(gè)商品，就在 prototype 屬性里再添加刪除商品的方法，刪除商品需要依據(jù)一個(gè)標(biāo)識(shí)來(lái)刪除指定的商品，這里我通過(guò) name 值來(lái)刪除，這時(shí)就需要一個(gè)方法去 date 數(shù)組里找對(duì)應(yīng)這個(gè) name 的商品，如下：

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

4、修改單個(gè)商品數(shù)量，如下：

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

這里需要傳一個(gè)參數(shù)，來(lái)設(shè)置指定的商品的數(shù)量。

整體代碼如下：

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;
    }
  }
}

這個(gè) data 數(shù)組初始化數(shù)據(jù)可以是從后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)，但是必須數(shù)據(jù)形式和定義的一樣，并且要調(diào)用一下 getTotal 這個(gè)方法獲取商品總數(shù)集。

最后就是簡(jiǎn)單的 new 一個(gè)個(gè)實(shí)例化，例如：

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 打印出來(lái)看看結(jié)果\(^o^)/~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: