模擬瑞幸小程序購物車

這篇具有很好參考價值的文章主要介紹了模擬瑞幸小程序購物車。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

是根據(jù)渡一袁老師的大師課寫的，如有什么地方存在問題，還請大家指出來喲ど?????????う?～

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>亞亞外賣</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/container.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/add-to-car.css" />
  </head>
  <body>
    <div class="container">
      <div class="menu">
        <div class="menu-item active"><span>推薦</span></div>
        <div class="menu-item"><span>熱銷</span></div>
        <div class="menu-item"><span>折扣</span></div>
        <div class="menu-item"><span>夏日冰咖必喝榜</span></div>
        <div class="menu-item"><span>進(jìn)店必喝</span></div>
        <div class="menu-item"><span>只喝美式</span></div>
        <div class="menu-item"><span>酷爽特調(diào)水果冰萃</span></div>
        <div class="menu-item"><span>經(jīng)典奶咖</span></div>
        <div class="menu-item"><span>創(chuàng)意奶咖</span></div>
        <div class="menu-item"><span>瑞納冰季</span></div>
        <div class="menu-item"><span>不喝咖啡</span></div>
        <div class="menu-item"><span>輕食甜品</span></div>
        <div class="menu-item"><span>熱賣套餐</span></div>
      </div>
      <div class="goods-list"></div>
    </div>
    <div class="footer">
      <div class="footer-car-container">
        <div class="footer-car">
          <i class="iconfont i-gouwuchefill"></i>
          <span class="footer-car-badge">0</span>
        </div>
        <div class="footer-car-price">
          <span class="footer-car-unit">￥</span>
          <span class="footer-car-total">0.00</span>
        </div>
        <div class="footer-car-tip">配送費￥0</div>
      </div>
      <div class="footer-pay">
        <a href="">去結(jié)算</a>
        <span>還差￥0元起送</span>
      </div>
    </div>

    <!-- <div class="add-to-car">
      <i class="iconfont i-jiajianzujianjiahao"></i>
    </div> -->

    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>

common.css

@import url('https://at.alicdn.com/t/c/font_3555577_me2a6tdmvu8.css');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 0.125vw;
}
body {
  font-size: 35rem;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-family: 'Microsoft Yahei', 'sans-serif';
}
a {
  color: inherit;
  text-decoration: none;
}
.iconfont {
  font-size: inherit;
}

container.css

.container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 100rem);
  display: flex;
  color: #333;
}
.menu {
  background: #f5f5f5;
  width: 190rem;
  overflow-y: scroll;
  padding-bottom: 50rem;
  flex: 0 0 auto;
}
.menu::-webkit-scrollbar {
  width: 0;
}

.menu-item {
  height: 141rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rem;
  position: relative;
}
.menu-item span {
  font-size: 30rem;
  line-height: 40rem;
  max-height: 80rem;
  overflow: hidden;
}
.menu-item.active {
  font-weight: bold;
  background: #fff;
}
.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 7.5rem;
  background: #3190e8;
}

.goods-list {
  flex-grow: 1;
  overflow-y: scroll;
}
.goods-list::-webkit-scrollbar {
  width: 0;
}

.goods-item {
  border-bottom: 1rem solid #f8f8f8;
  padding: 30rem 20rem;
  display: flex;
}
.goods-pic {
  width: 200rem;
  height: 200rem;
  object-fit: contain;
  border: 1rem solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}
.goods-info {
  flex: 1 1 auto;
  padding: 0 35rem;
  overflow: hidden;
}
.goods-title {
  font-size: 35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 20rem;
}
.goods-desc {
  font-size: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20rem;
}
.goods-sell {
  color: #858687;
  font-size: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20rem;
  display: flex;
}
.goods-sell span:first-child {
  margin-right: 18rem;
}
.goods-confirm {
  display: flex;
  justify-content: space-between;
}
.goods-price {
  display: flex;
  font-size: 35rem;
  font-weight: bold;
  color: #f60;
  align-items: flex-end;
}
.goods-price-unit {
  font-size: 25rem;
  margin-bottom: 4rem;
  font-weight: normal;
}
.goods-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-btns .iconfont {
  width: 40rem;
  height: 40rem;
  background: #4a90e1;
  color: #fff;
  border-radius: 50%;
  font-size: 23rem;
  line-height: 40rem;
  text-align: center;
}
.goods-btns span {
  margin: 0 15rem;
  display: none;
}
.goods-btns .i-jianhao {
  border: 1rem solid #4a90e1;
  background: #fff;
  color: #4a90e1;
  font-weight: bold;
  display: none;
}
.goods-item.active span {
  display: block;
}
.goods-item.active .i-jianhao {
  display: block;
}

footer.css

.footer {
  height: 100rem;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  z-index: 10;
}

.footer-car-container {
  flex-grow: 1;
  background: #3d3d3f;
  padding-left: 175rem;
  position: relative;
}
.footer-car {
  position: absolute;
  width: 118rem;
  height: 118rem;
  border: 9rem solid #444;
  left: 25rem;
  top: -35rem;
  border-radius: 50%;
  background: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rem;
}
.footer-car-badge {
  position: absolute;
  width: 35rem;
  height: 35rem;
  background: #ec5533;
  font-size: 25rem;
  text-align: center;
  border-radius: 50%;
  line-height: 35rem;
  right: 0;
  top: 0;
  display: none;
}
.footer-car.active {
  background: #4a90e1;
}
.footer-car.active .footer-car-badge {
  display: block;
}
.footer-car.animate {
  animation: footer-car-animate 500ms ease-in-out;
}

@keyframes footer-car-animate {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.footer-car-price {
  font-size: 40rem;
  display: flex;
  margin-top: 5rem;
}
.footer-car-tip {
  font-size: 20rem;
  margin-left: 6rem;
}
.footer-pay {
  background: #535356;
  width: 250rem;
  font-size: 35rem;
  line-height: 100rem;
  text-align: center;
}
.footer-pay > * {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-pay a {
  display: none;
}
.footer-pay span {
  font-size: 30rem;
}
.footer-pay.active {
  background: #76d572;
}
.footer-pay.active a {
  display: block;
}
.footer-pay.active span {
  display: none;
}

add-to-car.css

.add-to-car {
  position: fixed;
  color: #fff;
  font-size: 23rem;
  line-height: 40rem;
  text-align: center;
  z-index: 9;
  margin-left: -20rem;
  margin-top: -20rem;
  left: 0;
  top: 0;
  /* 勻速動畫 */
  transition: 0.5s linear;
}

.add-to-car .iconfont {
  width: 40rem;
  height: 40rem;
  background: #4a90e1;
  border-radius: 50%;
  display: block;
  /* i元素過渡動畫，i不應(yīng)該設(shè)置勻速動畫。cubic-bezier函數(shù)，x1,y1,x2,y2分別代表起點和終點的坐標(biāo) */
  transition: 0.5s cubic-bezier(0.5, -0.5, 1, 1);
}

data.js

var goods = [
    {
      pic: './assets/g1.png',
      title: '椰云拿鐵',
      // desc是富文本
      desc: `1人份【年度重磅，一口吞云】
      √原創(chuàng)椰云topping，綿密輕盈到飛起！
      原創(chuàng)瑞幸椰云?工藝，使用椰漿代替常規(guī)奶蓋
      打造豐盈、綿密，如云朵般細(xì)膩奶沫體驗
      椰香清甜飽滿，一口滑入口腔
      
      【飲用建議】請注意不要用吸管，不要攪拌哦~`,
      sellNumber: 200,//銷量,月售
      favorRate: 95,//好評率
      price: 32,//價格
    },
    {
      pic: './assets/g2.png',
      title: '生椰拿鐵',
      desc: `1人份【YYDS，無限回購】
      現(xiàn)萃香醇Espresso，遇見優(yōu)質(zhì)冷榨生椰漿，椰香濃郁，香甜清爽，帶給你不一樣的拿鐵體驗！
      
      主要原料：濃縮咖啡、冷凍椰漿、原味調(diào)味糖漿
      圖片及包裝僅供參考，請以實物為準(zhǔn)。建議送達(dá)后盡快飲用。到店飲用口感更佳。`,
      sellNumber: 1000,
      favorRate: 100,
      price: 19.9,
    },
    {
      pic: './assets/g3.png',
      title: '加濃 美式',
      desc: `1人份【清醒加倍，比標(biāo)美多一份Espresso】
      口感更佳香醇濃郁，回味持久
      圖片僅供參考，請以實物為準(zhǔn)。建議送達(dá)后盡快飲用。`,
      sellNumber: 200,
      favorRate: 93,
      price: 20.3,
    },
    {
      pic: './assets/g4.png',
      title: '瓦爾登藍(lán)鉆瑞納冰',
      desc: `1人份【爆款回歸！藍(lán)色治愈力量】
      靈感來自下澄明、碧藍(lán)之境---瓦爾登湖。含藻藍(lán)蛋白，夢幻藍(lán)色源自天然植物成分，非人工合成色素，融入人氣冷榨生椰漿，椰香濃郁，清冽冰爽；底部添加Q彈小料，0脂原味晶球，光澤剔透，如鉆石般blingbling。搭配奶油頂和彩虹色棉花糖，滿足你的少女心～
      【去奶油小提示】由于去掉奶油后頂料口味會受影響，為保證口感，選擇“去奶油”選項時將同時去掉奶油及頂料，請注意哦！【溫馨提示】瑞納冰系列產(chǎn)品形態(tài)為冰沙，無法進(jìn)行少冰、去冰操作，請您諒解?！緢D片僅供參考，請以實物為準(zhǔn)】`,
      sellNumber: 17,
      favorRate: 80,
      price: 38,
    },
    {
      pic: './assets/g5.png',
      title: '椰云精萃美式',
      desc: `1人份【不用吸管 大口吞云！】
  
      1杯熱量*≈0.6個蘋果！
      原創(chuàng)瑞幸椰云?工藝，將「椰漿」變成綿密、豐盈的“云朵”，口感綿密順滑！0乳糖植物基，清爽輕負(fù)擔(dān)！
      
      *數(shù)據(jù)引自《中國食物成分表》第六版，蘋果每100克可食部分中能量約為53千卡，以每個蘋果250克/個計，1杯椰云精萃美式約80千卡，相當(dāng)于約0.6個蘋果。
      【圖片僅供參考，請以實物為準(zhǔn)】`,
      sellNumber: 50,
      favorRate: 90,
      price: 21.12,
    },
  ];

index.js

// 這里利用ES6中的類來實現(xiàn)單件商品的數(shù)據(jù)，這種寫法是一種面向?qū)ο缶幊痰膶懛?，?yōu)勢是可以將數(shù)據(jù)和方法進(jìn)行封裝，
// 單件商品的數(shù)據(jù)
class UIGoods {
  // 構(gòu)造函數(shù)
  constructor(g) {
    this.data = g; // 初始化data屬性為傳入的參數(shù)g
    this.choose = 0; // 初始化choose屬性為0
    // this.totalPrice=0;// 初始化totalPrice屬性為0，但這樣會導(dǎo)致每次計算總價都要重新計算，造成數(shù)據(jù)冗余
    // 數(shù)據(jù)冗余的解決方法：將totalPrice屬性設(shè)置為私有屬性，通過getter方法來獲取和設(shè)置值
    // 數(shù)據(jù)冗余的優(yōu)缺點：性能下降，但可以減少代碼量。且可以提高代碼的可讀性、可維護(hù)性
  }

  /**
   * 獲取、計算總價
   * @return {number} 總價
   */
  getTotalPrice() {
    return this.data.price * this.choose;
  }

  // 是否選中了此件商品
  isChoose() {
    // 如果choose大于0，則表示選中了此件商品
    return this.choose > 0;
  }

  /* 
  選擇的數(shù)量+1
  這么寫的好處是，可以避免多次判斷，提高性能。而且可以提高代碼的可讀性、可維護(hù)性。如果想要在原有基礎(chǔ)上增加數(shù)量，可以直接調(diào)用increase方法
  */
  increase() {
    this.choose++;
  }
  // 選擇的數(shù)量-1
  decrease() {
    // 如果選擇的數(shù)量為0，則表示沒有選擇此件商品，不需要減
    if (this.choose === 0) {
      return;
    }
    this.choose--;
  }
}

// 整個界面的數(shù)據(jù)
class UIData {
  constructor() {
    // 數(shù)組
    var uiGoods = [];
    // 遍歷原始數(shù)據(jù)，將原始數(shù)據(jù)轉(zhuǎn)換為單件商品的數(shù)據(jù)
    for (var i = 0; i < goods.length; i++) {
      var uig = new UIGoods(goods[i]);
      uiGoods.push(uig);
    }
    // 將單件商品的數(shù)據(jù)保存到uiGoods屬性中
    this.uiGoods = uiGoods;
    // 起送標(biāo)準(zhǔn) => 還差多少錢起送
    this.deliveryThreshold = 30;
    // 起送標(biāo)準(zhǔn) => 起送價格，配送費用
    this.deliveryPrice = 5;
  }
// 總價
  getTotalPrice() {
    var sum = 0;
      // 遍歷循環(huán)
    for (var i = 0; i < this.uiGoods.length; i++) {
      var g = this.uiGoods[i];
      sum += g.getTotalPrice();
    }
    return sum;
  }

  // 增加某件商品的選中數(shù)量，通過下標(biāo)拿到對應(yīng)的商品
  increase(index) {
    this.uiGoods[index].increase();
  }
  // 減少某件商品的選中數(shù)量
  decrease(index) {
    this.uiGoods[index].decrease();
  }

  // 得到總共的選擇數(shù)量
  getTotalChooseNumber() {
    var sum = 0;
    for (var i = 0; i < this.uiGoods.length; i++) {
      sum += this.uiGoods[i].choose;
    }
    return sum;
  }

  // 判斷購物車中有沒有東西
  hasGoodsInCar() {
    // 這里調(diào)用了getTotalChooseNumber，如果數(shù)量大于0，那就代表購物車中有東西
    return this.getTotalChooseNumber() > 0;
  }

  // 是否跨過了起送標(biāo)準(zhǔn)
  isCrossDeliveryThreshold() {
    return this.getTotalPrice() >= this.deliveryThreshold;
  }

  // 判斷是否選中了商品，利用了商品的下標(biāo)
  isChoose(index) {
    return this.uiGoods[index].isChoose();
  }
}

// 整個界面
class UI {
  constructor() {
    // 商品數(shù)據(jù),對商品進(jìn)行封裝，不管是對商品進(jìn)行增刪改查，還是對商品進(jìn)行計算，都可以統(tǒng)一封裝到一個對象中
    this.uiData = new UIData();
    // 是用來獲取元素的，因為我們是用js來操作dom，所以需要用到dom元素。這doms里面包含了各種dom元素
    this.doms = {
      // 獲取商品列表容器
      goodsContainer: document.querySelector(".goods-list"),
      // 獲取配送費
      deliveryPrice: document.querySelector(".footer-car-tip"),
      // 獲取頁腳
      footerPay: document.querySelector(".footer-pay"),
      // 獲取頁腳內(nèi)的span
      footerPayInnerSpan: document.querySelector(".footer-pay span"),
      // 獲取總價
      totalPrice: document.querySelector(".footer-car-total"),
      // 獲取購物車
      car: document.querySelector(".footer-car"),
      // 獲取購物車的角標(biāo)
      badge: document.querySelector(".footer-car-badge"),
    };
    //  獲取購物車的位置
    var carRect = this.doms.car.getBoundingClientRect();

    // 獲取購物車的中心點
    var jumpTarget = {
      x: carRect.left + carRect.width / 2,
      y: carRect.top + carRect.height / 5,
    };
    // 獲取購物車的中心點
    this.jumpTarget = jumpTarget;

    // 創(chuàng)建商品列表 => 是為了循環(huán)創(chuàng)建商品列表元素
    this.createHTML();
    // 更新頁腳
    this.updateFooter();
    // 監(jiān)聽各種事件
    this.listenEvent();
  }

  // 監(jiān)聽各種事件
  listenEvent() {
    // 購物車動畫
    this.doms.car.addEventListener("animationend", function () {
      this.classList.remove("animate");
    });
  }

  // 根據(jù)商品數(shù)據(jù)創(chuàng)建商品列表元素
  /*
    兩種方式(這里用第一種方式)
    1.遍歷商品數(shù)據(jù)，將商品數(shù)據(jù)轉(zhuǎn)換為html字符串 => 優(yōu)點：可以減少代碼量、簡單，但性能下降、執(zhí)行效率低。因為字符串得parse html，得解析成dom元素，且無法直接操作dom元素(總的來說，就是執(zhí)行效率低，開發(fā)效率高)

    2.一個一個創(chuàng)建商品列表元素 => 優(yōu)點：性能高、執(zhí)行效率高，但代碼量多，不好維護(hù)。而且不需要解析成dom元素，可以直接操作dom元素(總的來說，執(zhí)行效率高，開發(fā)效率低)
  */
  createHTML() {
    // 生成html字符串
    var html = "";
    // 遍歷商品數(shù)據(jù)
    for (var i = 0; i < this.uiData.uiGoods.length; i++) {
      // 獲取單個商品數(shù)據(jù)
      var g = this.uiData.uiGoods[i];

      // 將單個商品數(shù)據(jù)轉(zhuǎn)換為html字符串，這里進(jìn)行了拼接。因為這里是拼接，所以需要使用+=。而且拼接之后就不用在html中添加<div>了
      html += `<div class="goods-item">
        <img src="${g.data.pic}" alt="" class="goods-pic">
        <div class="goods-info">
          <h2 class="goods-title">${g.data.title}</h2>
          <p class="goods-desc">${g.data.desc}</p>
          <p class="goods-sell">
            <span>月售 ${g.data.sellNumber}</span>
            <span>好評率${g.data.favorRate}%</span>
          </p>
          <div class="goods-confirm">
            <p class="goods-price">
              <span class="goods-price-unit">￥</span>
              <span>${g.data.price}</span>
            </p>
            <div class="goods-btns">
              <i index="${i}" class="iconfont i-jianhao"></i>
              <span>${g.choose}</span>
              <i index="${i}" class="iconfont i-jiajianzujianjiahao"></i>
            </div>
          </div>
        </div>
      </div>`;
    }

    // 將html字符串添加到商品列表容器中
    this.doms.goodsContainer.innerHTML = html;
  }

  // 界面的增加
  increase(index) {
    // 增加商品數(shù)量
    this.uiData.increase(index);
    // 調(diào)用更新某個商品元素的顯示狀態(tài)
    this.updateGoodsItem(index);
    // 更新頁腳
    this.updateFooter();
    // 跳到對應(yīng)的商品
    this.jump(index);
  }

  // 界面的減少
  decrease(index) {
    this.uiData.decrease(index);
    this.updateGoodsItem(index);
    this.updateFooter();
  }

  // 更新某個商品元素的顯示狀態(tài)
  updateGoodsItem(index) {
    // 獲取商品元素
    var goodsDom = this.doms.goodsContainer.children[index];
    // 判斷是否選中
    if (this.uiData.isChoose(index)) {
      // 選中，就加上active類
      goodsDom.classList.add("active");
    } else {
      // 未選中，就去掉active類
      goodsDom.classList.remove("active");
    }
    // 更新數(shù)量
    var span = goodsDom.querySelector(".goods-btns span");
    // 將span元素的文本設(shè)置為當(dāng)前商品的數(shù)量
    span.textContent = this.uiData.uiGoods[index].choose;
  }

  // 更新頁腳
  updateFooter() {
    // 得到總價數(shù)據(jù)
    var total = this.uiData.getTotalPrice();
    // 設(shè)置配送費
    this.doms.deliveryPrice.textContent = `配送費￥${this.uiData.deliveryPrice}`;
    // 設(shè)置起送費還差多少
    if (this.uiData.isCrossDeliveryThreshold()) {
      // 到達(dá)起送點，就加上active類
      this.doms.footerPay.classList.add("active");
    } else {
      // 沒有到達(dá)起送點，就去掉active類
      this.doms.footerPay.classList.remove("active");
      // 如果沒有到達(dá)起送點，就更新還差多少錢
      var dis = this.uiData.deliveryThreshold - total;
      // 四舍五入。因為計算機中小數(shù)點計算不準(zhǔn)，所以要四舍五入
      dis = Math.round(dis);
      // 更新span元素的文本
      this.doms.footerPayInnerSpan.textContent = `還差￥${dis}元起送`;
    }

    // 設(shè)置總價，toFixed(2)表示保留兩位小數(shù) => 是因為小數(shù)點計算不準(zhǔn)，所以要四舍五入。利用toFixed(2)將總價變?yōu)榱俗址袷降臄?shù)字
    this.doms.totalPrice.textContent = total.toFixed(2);

    // 設(shè)置購物車的樣式狀態(tài)
    if (this.uiData.hasGoodsInCar()) {
      // 有商品，就加上active類
      this.doms.car.classList.add("active");
    } else {
      // 沒有商品，就去掉active類
      this.doms.car.classList.remove("active");
    }
    // 設(shè)置購物車中的數(shù)量，得到總數(shù)
    this.doms.badge.textContent = this.uiData.getTotalChooseNumber();
  }

  // 購物車動畫
  carAnimate() {
    this.doms.car.classList.add("animate");

    // 去除動畫結(jié)束事件，但是這樣寫的話，動畫結(jié)束事件會被執(zhí)行兩次。而且每寫一次，都會有一次動畫結(jié)束事件。直接在開始寫一個動畫結(jié)束事件，在動畫結(jié)束事件中去掉動畫結(jié)束事件，這樣就只會執(zhí)行一次動畫結(jié)束事件。=> 上面的listenEvent()方法中有寫過，效果一樣的
    // this.doms.car.addEventListener("animationend", function () {
    //   // 這里的this是動畫事件觸發(fā)的元素
    //   this.classList.remove("animate");
    // });
  }

  // 拋物線跳躍的元素
  jump(index) {
    // 找到對應(yīng)商品的加號
    var btnAdd = this.doms.goodsContainer.children[index].querySelector(
      ".i-jiajianzujianjiahao"
    );
    // 得到加號的坐標(biāo)
    var rect = btnAdd.getBoundingClientRect();
    // 起始坐標(biāo)
    var start = {
      x: rect.left,
      y: rect.top,
    };
    // 跳吧
    var div = document.createElement("div");
    // div的樣式
    div.className = "add-to-car";
    var i = document.createElement("i");
    // i的樣式
    i.className = "iconfont i-jiajianzujianjiahao";
    // 設(shè)置初始位置，div管橫向，i管縱向
    div.style.transform = `translateX(${start.x}px)`;
    i.style.transform = `translateY(${start.y}px)`;
    // 將i添加到div中
    div.appendChild(i);
    // 將div添加到body中
    document.body.appendChild(div);
    // 強行渲染
    div.clientWidth;

    // 設(shè)置結(jié)束位置，添加一個過渡效果
    div.style.transform = `translateX(${this.jumpTarget.x}px)`;
    i.style.transform = `translateY(${this.jumpTarget.y}px)`;
    var that = this;

    // 過渡結(jié)束后，刪除div => 是為了防止動畫結(jié)束后，div還在body中，導(dǎo)致動畫結(jié)束后，div還會執(zhí)行動畫結(jié)束事件
    div.addEventListener(
      "transitionend",
      function () {
        div.remove();
        // 購物車動畫得到觸發(fā)
        that.carAnimate();
      },
      {
        once: true, // 事件僅觸發(fā)一次
      }
    );
  }
}

var ui = new UI();

// 事件
// 添加點擊事件
ui.doms.goodsContainer.addEventListener("click", function (e) {
  // 判斷點擊的元素是否是加號
  if (e.target.classList.contains("i-jiajianzujianjiahao")) {
    // 得到商品的索引，如果點擊的是加好，就加1，如果點擊的是減號，就減1。這里將索引(字符串)轉(zhuǎn)成數(shù)字類型
    var index = +e.target.getAttribute("index");
    ui.increase(index);
  } else if (e.target.classList.contains("i-jianhao")) {
    var index = +e.target.getAttribute("index");
    ui.decrease(index);
  }
});

// 按鍵事件，如果用戶按了+號，就輸出Equal，如果按了-號，就輸出Minus。這里只是演示，實際開發(fā)中，按鍵事件要用到keydown事件。
window.addEventListener("keypress", function (e) {
  if (e.code === "Equal") {
    ui.increase(0);
  } else if (e.code === "Minus") {
    ui.decrease(0);
  }
});



/*
也可以用這種方式寫，但是用這種方式寫的話，會導(dǎo)致代碼冗余
function UIGoods(g) {
  this.data = g;
  this.choose = 1;
}
UIGoods.prototype.getTotalPrice = function(){
  return this.data.price * this.choose;
}
UIGoods.prototype.isChoose = function(){
  return this.choose >0;
}
new UIGoods(goods[0]);*/

// 提前優(yōu)化的優(yōu)缺點：永遠(yuǎn)不要提前優(yōu)化，因為優(yōu)化之后，代碼會變得更復(fù)雜、可讀性會變差。
// 什么時候優(yōu)化：出問題的時候，優(yōu)化一下。要么就是出問題了，要么就是出問題了，要么就是出問題了。