电商---实现购物车功能

购物车实现3种方式

1、利用cookie

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

2、利用 session

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

3、利用数据库

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

购物车需求分析

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

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

3、可以清空购物车

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

5、可以结算

• 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);

   

• HTML页面简单调用

  <!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>