数据的渲染和操作案例总结

购物车案例

步骤分析：

1.首先需要获取到数据

<!-- 引入数据文件 -->
    <script src="./data.js"></script>

2.找到需要数据渲染的html结构

                      <tr>
                        <td>
                          <input class="s_ck" type="checkbox" ${
                            item.state ? 'checked' : ''
                          }/>
                        </td>
                        <td>
                          <img src="${item.img}" />
                          <p>${item.name}</p>
                        </td>
                        <td class="price">${item.price}</td>
                        <td>
                          <div class="count-c clearfix">
                            <button class="reduce"  id='${index}'>-</button>
                            <input type="text" value="${item.count}" />
                            <button class="add" id='${index}'>+</button>
                          </div>
                        </td>
                        <td class="total">${item.price * item.count}￥</td>
                        <td>
                          <a href="javascript:" class="del"  id='${
                            item.id
                          }'>删除</a>
                        </td>
                      </tr>`

3.遍历数据数组，并拿到每个特定的数据，用来与结构上的数据一一对应

data.forEach(function(item, index)

4.通过字符串的拼接，来让数据动态渲染

        htmlStr += `<tr>
                        <td>
                          <input class="s_ck" type="checkbox" ${
                            item.state ? 'checked' : ''
                          }/>
                        </td>
                        <td>
                          <img src="${item.img}" />
                          <p>${item.name}</p>
                        </td>
                        <td class="price">${item.price}</td>
                        <td>
                          <div class="count-c clearfix">
                            <button class="reduce"  id='${index}'>-</button>
                            <input type="text" value="${item.count}" />
                            <button class="add" id='${index}'>+</button>
                          </div>
                        </td>
                        <td class="total">${item.price * item.count}￥</td>
                        <td>
                          <a href="javascript:" class="del"  id='${
                            item.id
                          }'>删除</a>
                        </td>
                      </tr>`
        })
        carBody.innerHTML = htmlStr

5.通过事件委托来绑定事件，以便来操作未来元素数据的渲染

// 加减是动态生成的元素，事件绑定需要使用事件委托
      carBody.addEventListener('click', function(e) {
        if (e.target.className == 'add') {
          // 加
          let index = e.target.id
          // 修改数据
          data[index].count++
          // 重新渲染
          init()
        } else if (e.target.className == 'reduce') {
          // 减
          let index = e.target.id
          if (data[index].count == 1) {
            return
          }
          // 修改数据
          data[index].count--
          // 重新渲染
          init()
        } else if (e.target.className == 'del') {
          // 删除
          let id = e.target.id

          // 直接删除
          data = data.filter(function(v) {
            return v.id != id
          })

          init()
        }
      })

本案例体现的是事件委托的重要性和元素操作的本质

事件委托： 1.将事件绑定给已存在的父容器，让子元素进行触发 2.它的复用了事件委托的原理，当子元素触发事件之后，会将事件冒泡给父容器 3.如果想对真正触发事件的元素进行处理，可以使用e.target获取当前真正触发事件的元素 4.如果子元素的操作不一样，需要通过判断，一般我们会对子元素添加一个标识，判断当前触发事件的元素是否有这个标识

元素操作：元素操作一定要体现到数据，用户操作是的界面元素，但是本质上是操作数据

注意点：以后业务处理的时候需要一个值，你一般有两种方式获取到这个值 1.传递参数 2.自己先存储再获取