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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
chrome原生方法之数组
Nov 30 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
微信小程序自定义组件
Aug 16 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
js通过循环多张图片实现动画效果
Dec 19 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
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php数组转成json格式的方法
2015/03/09 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python微信好友数据分析详解
2018/11/19 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
linux下进程间通信的方式
2013/01/23 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
委托证明的格式
2014/01/10 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
城管年度个人总结
2015/02/28 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL