JavaScript面向对象编写购物车功能
之前的项目中需要一个购买数据商品并付款的功能，刚开始一直不敢使用面向对象的写法，主要是没有理清思路，而且那时的数据商品比较的复杂，就一直没敢动，在网上也找些面向对象的写法，把思路理清一遍，就想自己试着写写。
接下来我会一步一步分析，面向对象的写法过程。整个流程大致分为：
1、先定义好一个商品列表的数据形式和商品总数集，类似：
vardata=[{name:'name',unitPrice:10,num:2}];
vartotal={type:0,totalNum:0,price:0};
很明显在data数组里name表示单个商品名称，unitPrice表示单个商品单价，num表示单个商品数量；在total对象里type表示商品种类、totalNum表示商品总数量、price表示商品总价。
2、创建一个购物车的函数对象ShoppingCart，并设置它的相应属性，如下：
functionShoppingCart(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(vari=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(vari=0;i<data.length;i++){
if(name==data[i].name)returni;
}
}
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();
}
这里需要传一个参数，来设置指定的商品的数量。
整体代码如下：
vardata=newArray;
vartotal={type:0,totalNum:0,price:0};
functionShoppingCart(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(vari=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(vari=0;i<data.length;i++){
if(name==data[i].name)returni;
}
}
}
这个data数组初始化数据可以是从后台传过来的数据，但是必须数据形式和定义的一样，并且要调用一下getTotal这个方法获取商品总数集。
最后就是简单的new一个个实例化，例如：
vargoods1=newShoppingCart('123',100,2)
vargoods2=newShoppingCart('456',10,3)
vargoods3=newShoppingCart('789',1,4)
goods2.delect();
good3.changeNum(2)
goods2=newShoppingCart('1234',11,1)
goods2.changeNum(0)
自行可以把data和total打印出来看看结果\(^o^)/~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。