老师,我的问题是关于详情页。

来源:3-2 项目作业

慕斯0469344

2019-09-27 20:43:08

(function(){

    // 顶部模版字符串
    var itemTopTmpl = '<div class="choose-content hide">'+
                          '<div class="content-top">'+
                            '<div class="clear-car">清空购物车</div>'+
                          '</div>'+
                      '</div>';

    // 底部模版字符串
    var itemBottomTmpl = '<div class="bottom-content">'+
                            '<div class="shop-icon">'+
                              '<div class="dot-num hide"></div>'+
                            '</div>'+
                            '<div class="price-content">'+
                                '<p class="total-price">¥<span class="total-price-span">0</span></p>'+
                                '<p class="other-price">另需配送&nbsp;¥<span class="shipping-fee">0</span></p>'+
                            '</div>'+
                            '<div class="submit-btn">去结算</div>'+
                        '</div>';


    var $strBottom = $(itemBottomTmpl);
    var $strTop = $(itemTopTmpl);


    function changeShippingPrice(str){
        $strBottom.find('.shipping-fee').text(str);
    }
      function changeTotalPrice(str){
        $strBottom.find('.total-price-span').text(str);
    }


    /**
     * 渲染购物车顶部
     * param 
     */
    function renderItems(){
      $strTop.find('.choose-item').remove();
      var list = window.food_spu_tags || [];
      var tmpl = '<div class="choose-item">'+
                     '<div class="item-name">$name</div>'+
                     '<div class="price">¥<span class="total">$price</span></div>'+
                    '<div class="select-content">'+
                          '<div class="minus"></div>'+
                          '<div class="count">$chooseCount</div>'+
                          '<div class="plus"></div>'+
                      '</div>';
      var totalPrice = 0;

      list.forEach(function(item){
          item.spus.forEach(function(_item){

              // 如果有菜品数量大于0就开始渲染这条数据
              if (_item.chooseCount > 0) {

                  // 计算每个菜品的总价 就是 单价*数量
                  var price = _item.min_price*_item.chooseCount;
                  var row = tmpl.replace('$name',_item.name)
                            .replace('$price',price)
                            .replace('$chooseCount',_item.chooseCount)
                  
                  // 计算整个总价
                  totalPrice += price;

                  var $row = $(row);

                  $row.data('itemData',_item);



                  $strTop.append($row);
              }
          })

          // 改变总价
          changeTotalPrice(totalPrice);

          // 改变红点个数
          changeDot();

      });



    }

    /**
     * 渲染数量红点
     * param 
     */
    function changeDot(){

       // 先拿到所有的counts
       var $counts = $strTop.find('.count');

       var total = 0;


       // 遍历每个count 相加
       for (var i = 0 ; i < $counts.length ; i++) {
          total += parseInt($($counts[i]).text());
       }

       if (total > 0) {
        $('.dot-num').show().text(total)
       } else {
        $('.dot-num').hide();
       }
    }


    function addClick(){

        $('.shop-bar').on('click', '.shop-icon', function(){
            $('.mask').toggle();
            $strTop.toggle();
        });
        $strTop.on('click','.plus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');

            $count.text(parseInt($count.text()||'0')+1);

            var $item = $(e.currentTarget).parents('.choose-item').first();

            var itemData = $item.data('itemData');

            itemData.chooseCount = itemData.chooseCount + 1;


            renderItems();


            // 找到当前的右侧详情的数据,进行联动
            $('.left-item.active').click();

        });

        $strTop.on('click','.minus', function(e){
            var $count = $(e.currentTarget).parent().find('.count');


            if ($count.text() == 0) return;
            $count.text(parseInt($count.text()||'0')-1);

            var $item = $(e.currentTarget).parents('.choose-item').first();

            var itemData = $item.data('itemData');

            itemData.chooseCount = itemData.chooseCount - 1;


            renderItems();


            // 找到当前的右侧详情的数据,进行联动
            $('.left-item.active').click();

        });
    }


    function init(data){
      $('.shop-bar').append($strTop);
      $('.shop-bar').append($strBottom);
      addClick();
    }

    init();

    window.ShopBar = {
        renderItems: renderItems,
        changeShippingPrice:changeShippingPrice
    }


})();

老师,为什么写这两句代码呢?

window.ShopBar = {

        renderItems: renderItems,

        changeShippingPrice:changeShippingPrice

    }

这两句代码能实现什么功能?

写回答

1回答

好帮手慕星星

2019-09-28

同学你好。

这里是将方法添加在window的ShopBar属性(属性名自己定义)上,这样其它页面也就可以使用这个方法了。

例如添加的renderItems方法,是在shopBar.js中定义的:

http://img.mukewang.com/climg/5d8ec0a30907fa4b03520075.jpg

以对象属性值的形式被添加在全局之后,right.js中使用了:

http://img.mukewang.com/climg/5d8ec1190995c84407720398.jpg

直接调用即可。

可以再理解下,祝学习愉快!

0

0 学习 · 6815 问题

查看课程