js實現購物車功能

/**
 * Created by Administrator on 2017/9/3.
 */


/***
 * 購物車操作模塊
 *
 */

//商品類
/***
 * @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;
}

var shopCart = function(window){

 "use strict";
 //全局變量
 // note new new Date("2020-12-23") 在ie下面報錯，不支持這樣的語法
 var items = [],cartName='kuaidian_shop_cart',expires = new Date( new Date().getTime()+86400000*30 )
 ,debug = true,decimal = 2;
 var options = {
 'cartName' : cartName, //cookie的名字
 'expires' : expires, //cookie失效的時間
 'debug' : debug, //是否打印調試信息
 'decimal' : decimal, //錢的精確到小數點后的位數
 'callback' : undefined
 };


 //暴露給外部的接口方法
 return {
 inited : false,
 init: function(option){
 //判斷用戶是否禁用cookie
 if(!window.navigator.cookieEnabled ){
 alert('您的瀏覽器不支持cookie無法使用購物車！,請設置允許設置cookie。');
 return false;
 }
 //從cookie中獲取購物車中的數據
 this.inited = true;
 if(option){
 extend(options,option);
 }
 var cookie = getCookie(options.cartName);
 if(typeof cookie === 'undefined'){
 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;
 }
 }
 return undefined;
 }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.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，那么就返回該商品的總價格
 var totalPrice = 0.0;
 if(sku){
 var num = parseInt((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).quantity )),
 price = parseFloat((typeof this.findItem(sku) === 'undefined' ? 0 : this.findItem(sku).price ));
 num = num=== 'NaN' ? 0 : num;
 price = price === 'NaN' ? 0 : price;
 totalPrice = price * num;
 }else{
 for(var i=0,l=items.length;i<l;i++){
 totalPrice += (parseFloat(items[i].price ) * parseInt(items[i].quantity));
 }
 }
 return totalPrice.toFixed(options.decimal);
 },
 getCookie : getCookie,
 setCookie : setCookie
 };


 /**
 * 設置cookie
 * @name setCookie
 * @example
 setCookie(name, value[, options])
 * @params {string} name 需要設置Cookie的鍵名
 * @params {string} value 需要設置Cookie的值
 * @params {string} [path] cookie路徑
 * @params {Date} [expires] cookie過期時間
 */
 function setCookie(name, value, options) {
 options = options || {};
 var expires = options.expires || null;
 var path = options.path || "/";
 var domain = options.domain || document.domain;
 var secure = options.secure || null;
 /**
 document.cookie = name + "=" + escape(value)
 + ((expires) ? "; expires=" + expires.toGMTString() : "")
 + "; path=" + path
 + "; domain=" + domain ;
 + ((secure) ? "; secure" : "");
 */
 var str = name + "=" + encodeURIComponent(value)
 + ((expires) ? "; expires=" + expires.toGMTString() : "")
 + "; path=/";
 document.cookie = str;
 };

 /**
 * 獲取cookie的值
 * @name getCookie
 * @example
 getCookie(name)
 * @param {string} name 需要獲取Cookie的鍵名
 * @return {string|null} 獲取的Cookie值，獲取不到時返回null
 */
 function getCookie(name) {
 var arr = document.cookie.match(new RegExp("(^| )" + name
 + "=([^;]*)(;|$)"));
 if (arr != null) {
 return decodeURIComponent(arr[2]);
 }
 return undefined;
 };

 //***********************私有方法********************/
 function _saveCookie(){
 var i=0,l=items.length;
 if(l>0){
 var tItems = [];
 for(;i<l;i++){
 var item = items[i];
 tItems[i] = item.sku + '|' +item.name + '|' + item.price + '|' + item.quantity;
 };
 var str = tItems.join('&');
 setCookie(options.cartName, str, {expires:options.expires});
 }else{
 setCookie(options.cartName, '', {expires:options.expires});
 }

 };

 //***********************工具方法********************/
 //顯示調試信息
 function _log(info){
 if(typeof console != 'undefined'){
 console.log(info);
 }
 };
 //繼承屬性
 function extend(destination, source) {
 for ( var property in source) {
 destination[property] = source[property];
 }
 };
}(typeof window === 'undifined' ? this: window);

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

</head>
<body>

 <script type="text/javascript" src="./shop.js"></script>

 <script>

 shopCart.init({
 'decimal' : 4
 });

 var a = new item('aa','bb',12,22);
 shopCart.addItem(a); //添加商品到購物車,參數item
 shopCart.delItem('12345'); //從購物車中刪除商品,參數squ
// shopCart.emptyCart(); //清空購物車
 item.quantity = 4;
 alert(shopCart.getTotalPrice()); //獲取購物車中的數量,參數squ


 shopCart.findItem();//根據sku標示查找商品,參數squ
 //如果木有提供sku,則返回所有的item
 shopCart.getItemIndex('aa') //獲取item在items的數組下標,參數squ
 shopCart.updateQuantity(a) //更新商品的數量,參數item
 shopCart.getTotalCount()//獲取購物車商品的數量，如果傳某個商品的id，那么就返回該商品的數量,參數squ
 </script>

</body>
</html>