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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
基于node实现websocket协议
Apr 25 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
vue实现按需加载组件及异步组件功能
May 27 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生成(支持多模板)二维码海报代码
2018/04/30 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
批处理与python代码混合编程的方法
2016/05/19 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python实现桌面托盘气泡提示
2019/07/29 Python
python3 map函数和filter函数详解
2019/08/26 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
2014年六一儿童节演讲稿
2014/05/23 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
建筑工地文明标语
2014/10/09 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
小学思品教学反思
2016/02/20 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL