日期:2014-05-16  浏览次数:20432 次

javascript 实现购物车
购物车实现3种方式

1、利用cookie

优点:不占用服务器资源,可以永远保存,不用考虑失效的问题
缺点:  对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买。

2、利用 session

优点:用户禁用cookie,也可以购物
缺点:占用服务器资源,要考虑session失效的问题

3、利用数据库

优点:可以记录用户的购买行为,便于数据分析用户的喜好,推荐商品
缺点:给数据库造成太大的压力,如果数据量很大的话。


购物车需求分析

1、可以添加商品到购物车中

2、可以删除购物车中的商品

3、可以清空购物车

4、可以更新购物车的商品

5、可以结算




/***
 * 购物车操作模块
 * 
 */
var shopCart = function(window){
	
	"use strict";
	//全局变量
	var items = [],cartName='kuaidian_shop_cart',expires = new Date("2020-12-23"),debug = true,decimal = 2;
	var options = {
		'cartName' : cartName, //cookie的名字
		'expires' : expires, //cookie失效的时间
		'debug' : debug,  //是否打印调试信息
		'decimal' : decimal, //钱的精确到小数点后的位数
		'callback' : undefined
	};
	//商品类
	/***
	 * @name item
	 * @example 
	   item(sku, name, price, quantity)
	 * @params {string} sku 商品的标示
	 * @params {string} name 商品的名字
	 * @param {number} price 商品的价格
	 * @param {number} quantity 商品的数量
	 */
	function item(sku, name, price, quantity){
		this.sku = sku;
		this.name = name;
		this.price = price;
		this.quantity = quantity;
	}
	
	
	//暴露给外部的接口方法
	return {
		inited : false,
		init: function(option){
			//判断用户是否禁用cookie
			if(!window.navigator.cookieEnabled ){
				alert('您的浏览器不支持cookie无法使用购物车!,请设置允许设置cookie。');
				return false;
			}
			//从cookie中获取购物车中的数据
			this.inited = true;
			option = option || {};
			extend(options,option);
			if(getCookie(options.cartName) == ''){
				setCookie(options.cartName,'',options.expires); 
			}else{
				//每个item之间用&分开,item的属性之间用|分割
				var cookie = getCookie(options.cartName);
				if(cookie){
					var cItems = cookie.split('&');
					for(var i=0,l=cItems.length;i<l;i++){
						var cItem = cItems[i].split('|');
							var item = {};
							item.sku = cItem[0] || '';
							item.name = cItem[1] || '';
							item.price = cItem[2] || '';
							item.quantity = cItem[3] || '';
							items.push(item);
					};
				};
				
			};
		},
		findItem: function(sku){//根据sku标示查找商品
			//如果木有提供sku,则返回所有的item
			if(sku){
				for(var i=0,l=items.length;i<l;i++){
					var item = items[i];
					if(item.sku == sku){
						return item;
					}
				}
			}else{
				return items;
			}
			
		},
		getItemIndex : function(sku){ //获取item在items的数组下标
			for(var i=0,l=items.length;i<l;i++){
				var item = items[i];
				if(item.sku == sku){
					return i;
				}
			}
			//木有找到返回-1
			return -1;
		},
		addItem: function(item){ //增加一个新商品到购物车
			//添加一个商品
			if(this.findItem(item.sku)){
				if(options.debug){
					_log('商品已经存在了');
					return false;
				}
			}
			items.push(item);
			_saveCookie();
			return true;
		},
		delItem: function(sku){ //从购物车中删除一个商品
			//删除一个商品
			var index = this.getItemIndex(sku);
			if(index > -1){
				items = items.splice(index,-1);
				_saveCookie();
			}else{
				if(options.debug){
					_log('商品不存在');
					return false;
				}
			}
		},
		updateQuantity: function(item){ //更新商品的数量
			//更新一个商品
			var index = this.getItemIndex(item.sku);
			if(index > -1){
				items[index].quantity = item.quantity; 
				_saveCookie();
			}else{
				if(options.debug){
					_log('商品不存在');
					return false;
				}
			}
		},
		emptyCart: function(){
			//清空数组
			items.length = 0;
			_saveCookie();
		},
		checkout: function(){
			//点击结算后的回调函数
			if(options.callback){
				options.callback();
			}
		},
		getTotalCount: function(sku){
			//获取购物车商品的数量,如果传某个商品的id,那么就返回该商品的数量
			var totalCount = 0;
			if(sku){
				totalCount = (typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity );
			}else{
				for(var i=0,l=items.length;i<l;i++){
					totalCount += (parseInt(items[i].quantity) === 'NaN' ? 0 : parseInt(items[i].quantity )) ;
				}
			}
			return totalCount;
		},
		getTotalPrice : function(sku){
			//获取购物车商品的总价格 ,如果传某个商品的id,那么就返回该商品的总价格