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下弹出窗口的变通
Apr 18 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
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中strtotime函数使用方法详解
2011/11/27 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
node.js基础知识小结
2018/02/26 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
Python基于DES算法加密解密实例
2015/06/03 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python实现图片九宫格分割
2021/03/07 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
《颐和园》教学反思
2014/02/26 职场文书