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


Posted in Javascript onAugust 19, 2016

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

接下来我会一步一步分析,面向对象的写法过程。整个流程大致分为:               
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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
js重写方法的简单实现
Jul 10 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
在vue项目中使用sass的配置方法
Mar 20 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 #Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
jQuery Validate插件实现表单验证
Aug 19 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
Javascript与vbscript数据共享
2007/01/09 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
微信小程序开发探究
2016/12/27 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python获取代码运行时间的实例代码
2018/06/11 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
tensorflow多维张量计算实例
2020/02/11 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
部队党性分析材料
2014/02/16 职场文书
防沙治沙典型材料
2014/05/07 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
第一军规观后感
2015/06/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers