日韩日BaV,亚洲天堂欧美精品一本,久久一区二区三区69

快捷導航

JavaScript面向?qū)ο缶帉戀徫镘嚬δ?/h1>

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

這篇文章主要為大家詳細介紹了JavaScript面向?qū)ο缶帉戀徫镘嚬δ艿南嚓P(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

之前的項目中需要一個購買數(shù)據(jù)商品并付款的功能，剛開始一直不敢使用面向?qū)ο蟮膶懛ǎ饕菦]有理清思路，而且那時的數(shù)據(jù)商品比較的復雜，就一直沒敢動，在網(wǎng)上也找些面向?qū)ο蟮膶懛?，把思路理清一遍，就想自己試著寫寫?nbsp;

接下來我會一步一步分析，面向?qū)ο蟮膶懛ㄟ^程。整個流程大致分為：
1、先定義好一個商品列表的數(shù)據(jù)形式和商品總數(shù)集，類似：

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

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

2、創(chuàng)建一個購物車的函數(shù)對象 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};
}

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

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

然后使用對象的 prototype 屬性，把方法都放在這個屬性里來調(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、有添加就會有刪除單個商品，就在 prototype 屬性里再添加刪除商品的方法，刪除商品需要依據(jù)一個標識來刪除指定的商品，這里我通過 name 值來刪除，這時就需要一個方法去 date 數(shù)組里找對應(yīng)這個 name 的商品，如下：

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

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

// 修改單個商品的數(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();
}

這里需要傳一個參數(shù)，來設(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;
    }
  }
}

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

最后就是簡單的 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 打印出來看看結(jié)果\(^o^)/~

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

您可能感興趣的文章: