JavaScript面向对象编写购物车功能

2019-11-20 09:11:49

字体：大中小

来源：转载

供稿：网友

之前的项目中需要一个购买数据商品并付款的功能，刚开始一直不敢使用面向对象的写法，主要是没有理清思路，而且那时的数据商品比较的复杂，就一直没敢动，在网上也找些面向对象的写法，把思路理清一遍，就想自己试着写写。

接下来我会一步一步分析，面向对象的写法过程。整个流程大致分为：
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^)/~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现select选择框效果及美化

下一篇：javascript设计模式之module(模块)模式