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

 更新时间:2016年08月19日 14:28:08   作者:yu.l   我要评论
这篇文章主要为大家详细介绍了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^)/~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Javascript 继承实现例子

    Javascript 继承实现例子

    在真正的Web站点和应用程序中,几乎不可能创建名为ClassA和ClassB的类,更可能的是创建表示特定事物(如形状)的类。考虑本章开头所述的形状的例子,Polygon、Triangle和Rectangle类就构成了一组很好的探讨数据。
    2009-08-08
  • 详解微信小程序获取当前时间及日期的方法

    详解微信小程序获取当前时间及日期的方法

    这篇文章主要介绍了微信小程序获取当前时间及日期的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    这篇文章主要介绍了纯JS实现表单验证实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • js实现prototype扩展的方法(字符串,日期,数组扩展)

    js实现prototype扩展的方法(字符串,日期,数组扩展)

    这篇文章主要介绍了js实现prototype扩展的方法,实例分析了JavaScript针对字符串、日期、数组等的prototype扩展相关技巧,需要的朋友可以参考下
    2016-01-01
  • js从外部获取图片的实现方法

    js从外部获取图片的实现方法

    下面小编就为大家带来一篇js从外部获取图片的实现方法。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 微信小程序实现页面跳转传值以及获取值的方法分析

    微信小程序实现页面跳转传值以及获取值的方法分析

    这篇文章主要介绍了微信小程序实现页面跳转传值以及获取值的方法,结合实例形式总结分析了微信小程序页面跳转及传值的常用操作技巧,需要的朋友可以参考下
    2017-12-12
  • Javascript 错误处理的几种方法

    Javascript 错误处理的几种方法

    浏览器不会抛出Error类型的exception异常,所以如果捕获到Error类型的异常,可以确定这个异常是用户代码抛出的,不是浏览器抛出的。
    2009-06-06
  • js实现类似新浪微博首页内容渐显效果的方法

    js实现类似新浪微博首页内容渐显效果的方法

    这篇文章主要介绍了js实现类似新浪微博首页内容渐显效果的方法,实例分析了渐显效果的实现要点与方法,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • canvas实现刮刮卡效果

    canvas实现刮刮卡效果

    本文主要介绍了使用canvas实现刮刮卡效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • javascript相等运算符与等同运算符详细介绍

    javascript相等运算符与等同运算符详细介绍

    不管是java、c++、php都有相等运算符与等同运算符,当然javasript也不例外,下面介绍一下
    2013-11-11

最新评论