JavaScript面向对象编写购物车功能
之前的项目中需要一个购买数据商品并付款的功能，刚开始一直不敢使用面向对象的写法，主要是没有理清思路，而且那时的数据商品比较的复杂，就一直没敢动，在网上也找些面向对象的写法，把思路理清一遍，就想自己试着写写。
接下来我会一步一步分析，面向对象的写法过程。整个流程大致分为：
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获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要介绍了JavaScript 原始包装类型汇总，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了JS Ajax请求如何防止重复提交的相关资料，通过覆盖掉$.ajax而达到防止重复提交的问题，实现代码简单，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
layui radio点击事件实现input显示和隐藏的例子
今天小编就为大家分享一篇layui radio点击事件实现input显示和隐藏的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
数组检测是指在编程中对数组进行验证和检查的过程,本文主要介绍了JavaScript中检测数组的3种方法小结,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了微信小程序模板消息推送的两种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
JavaScript中,我们经常需要判断数据类型以便于正确地处理数据,本文将介绍JavaScript中的数据类型判断技术,包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些数据类型判断方法,需要的朋友可以参考下2023-08-08
JS表格组件神器bootstrap table详解（强化版）
这篇文章主要以实例的方式为大家再次介绍了JS表格组件神器bootstrap table，bootstrap table界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端，需要了解更多bootstrap table的朋友可以参考下2016-05-05
这篇文章向大家分享了40多个经典的JavaScript开发技巧，相信读完这篇文章对大家开发javascript有很大的帮助作用，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论