汇盛国际:JavaScript面向对象编写购物车功能

时间: 作者:关民

  

[js,面向对象,购物车]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;  }  }  }  
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际