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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
我常用的几个类
2006/10/09 PHP
网络资源
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
用ADODB.Stream转换
2007/01/22 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python实现简单购物商城
2016/05/21 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python机器学习之神经网络实现
2018/10/13 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
幼儿园教师备课制度
2014/01/12 职场文书
运动会解说词100字
2014/01/31 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
防暑降温通知书
2015/04/27 职场文书
负责培养人意见
2015/06/05 职场文书
护士业务学习心得体会
2016/01/25 职场文书