数据驱动视图式编写实例：模拟百度音乐模拟百度音乐（数据驱动视图式编写）

模拟百度音乐（数据驱动视图式编写）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" class="check" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>

    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    {
      let data = [
        {
          id: 1,
          title: "残酷月光 - 费启鸣",
          checked: false,
          collect: true
        }, {
          id: 2,
          title: "兄弟 - 艾热",
          checked: true,
          collect: false
        }, {
          id: 3,
          title: "毕生 - 夏增祥",
          checked: true,
          collect: true
        }, {
          id: 4,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false
        }, {
          id: 5,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false //是否收藏 true 收藏 false 没有收藏
        }
      ];

      let list = document.querySelector('#list');
      let checkAll = document.querySelector('#checkAll');



      // 数据驱动，数据优先；
      function render(data) {
        list.innerHTML = `${data.map(item => creatLi(item)).join('')}`;
        // //事件监听
        let li = list.querySelectorAll('li');
        li.forEach((item, index) => {
          li[index].addEventListener('click', (e) => {
            let { target } = e;
            switch (target.className) {
              case 'check':
                data[index].checked = target.checked;
                break;
              case 'cancelCollect':
                console.log('cancelCollect');
                data[index].collect = false;
                break;
              case 'collect':
                console.log('collect');
                data[index].collect = true;
                break;
              case 'remove':
                console.log('remove');
                data.splice(index, 1);
                break;

            }
            render(data);
          })
        })
      }

      render(data);

      function creatLi(item) {
        let inner = '';
        inner = ` 
      <li>
        <input type="checkbox" class="check" ${item.checked ? 'checked' : ''}/>
        <span>${item.title}</span>
        ${item.collect ?
            '<a href="javascript:;" class="cancelCollect">取消收藏</a>' :
            '<a href="javascript:;" class="collect">收藏</a>'}
        
        <a href="javascript:;" class="remove">删除</a>
      </li>`;
        return inner;
      }

      //全选
      let bool;
      let checks = document.querySelectorAll(".check");
      for(let i=0;i<checks.length;i++){
        checks[i].onclick = function () {
          data[i].checked=this.checked;
          console.log(1);
          bool = data.every(function (item, index) {
             return item.checked;
          });
          console.log(bool);
          if (bool) {
            checkAll.checked = true;
          } else {
            checkAll.checked = false;
          }
        }

        checkAll.onclick = function () {

          data.forEach(item => {
            item.checked = this.checked;
          });
          render(data);
        }
      }

      // 删除
      document.querySelector("#remove").onclick = () => {
        data = data.filter(item => !item.checked);
        render(data);
      }

      // 添加数据
      document.querySelector("#add").onclick = () => {
        if (document.querySelector("#newInfo").value.trim()) {

          data.push({
            id: Date.now(),
            title: document.querySelector("#newInfo").value,
            checked: false,
            collect: false
          })
          document.querySelector("#newInfo").value = '';
          render(data)
        }
      }


    }
  </script>
</body>

</html>