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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue设置一开始进入的页面教程
Oct 28 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Javascript浅谈之this
2013/12/17 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
学生信息管理系统Python面向对象版
2019/01/30 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
八年级生物教学反思
2014/01/22 职场文书
总经理岗位职责范本
2014/02/02 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
产品质量承诺范本
2014/03/31 职场文书
供货协议书范本
2014/04/22 职场文书
先进班组事迹材料
2014/12/25 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL