ネイティブJSデータレンダリングのショッピングカートケースのフロントエンド調査ノート（18）

テンプレート文字列

テンプレートエンジンを使用すると、ページをより迅速にレンダリングするのに役立ちます。使用するサードパーティのjsファイルを導入する必要があります。構文に慣れるのは非常に便利です。

• 共通のテンプレートエンジン？
  => art-template、フロントエンドとバックエンドの両方を使用できます
  =>アンダースクロール、バックエンドJSは使用できません
  => e.js、バックエンドJSは使用できません
  =>テンプレート、バックエンドJSは使用できません
• 手順
  ①サードパーティのJSファイルを最初にインポートする

<script src="./lib/template-web.js"></script>

②タイプtext / htmlでスクリプトタグを作成し、呼び出しを容易にするためにIDを設定します。

 <script type="text/html" id="tmp">
 		{
    
    {
    
    each list}}
       <div class="xiaoji">
         ￥{
    
    {
    
     $value.goods_price * $value.cart_number }}
       </div>
     </li>
     {
    
    {
    
     /each }}
 </script>

③テンプレートメソッドで呼び出す

 var str = template('tmp', {
    
    
       list: cart,
       total: total,
       totalPrice: totalPrice.toFixed(2)
     })
     box.innerHTML = str

データをキャプチャする

      var listbox = document.querySelector('.listbox')
      var viewPortHeight = document.documentElement.clientHeight
      var uloffsetTop = listbox.offsetTop
      var totalPage = Math.ceil(data.length / 20)
      var currentPage = 1
      var flag = true
      var loading = document.querySelector('.loading')

データのレンダリング-> bindHTML（）

 function bindHTML() {
    
    
     var bindList = data.slice((currentPage - 1) * 20, currentPage * 20)
     var frg = document.createDocumentFragment()
     bindList.forEach(element => {
    
    
     var li = document.createElement('li')
     li.innerHTML = `
         <div class="img">
          <img src="${
      
       element.goods_big_logo}" alt="">
          </div>
          <p>${
      
       element.goods_name}</p>
          <span>￥${
      
       element.goods_price.toFixed(2).big().fontcolor('red')}</span>
              `
              var btn = document.createElement('button')
              btn.innerHTML = '添加到购物车'
              btn.setAttribute('goodsid', element.goods_id)
              btn.onclick = addCart

              li.appendChild(btn)
              frg.appendChild(li)
          });
          listbox.appendChild(frg)
          flag = true
          loading.classList.remove('active')
      }
      bindHTML()

プルダウンして更新-> window.oncroll = function（）{}

window.onscroll = function () {
    
    
  var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + viewPortHeight
  var ulHeight = uloffsetTop + listbox.offsetHeight
  // console.log('scrollTop'+ scrollTop)
  // console.log("ulHeight" + ulHeight)
  if (scrollTop < ulHeight) return

  if (currentPage === totalPage) return

  if (!flag) return //开关为开 就跳过去继续执行

  flag = false //为了保证只执行一次 接着关掉开关


  loading.classList.add('active')

  setTimeout(function () {
    
    
      currentPage++
      bindHTML()
  }, 1000)
}

カートに製品を追加-> addCart（）

function addCart(){
    
    
  var goodsid = this.getAttribute('goodsid')-0

  var goods = data.find(function(item){
    
    return item.goods_id === goodsid})

  var list = JSON.parse(window.localStorage.getItem('cart')) || []


  if(!list.length){
    
        //if list is empty ,  
      goods.cart_number = 1 
      list.push(goods)
  }else{
    
          
      var res = list.some(function(item){
    
    return item.goods_id === goodsid})
      if(res){
    
    
          var index = list.findIndex(function (item) {
    
     return item.goods_id === goodsid })
          list[index].cart_number++
          // goods.cart_number++
          // console.log(list[index].cart_number)
          // console.log(goods.cart_number)
      }else{
    
    
          goods.cart_number = 1
          list.push(goods)
      }
  }
  window.localStorage.setItem('cart',JSON.stringify(list))
}