ES6 - 网页音乐 案例思路及写法

网页音乐 案例思路及写法

有些情况下，我们往往是接收到后台给的数据，然后针对数据进行页面编写

• 基本的页面框架

	<h2 class="title">百度音乐榜单</h2>
	<ul id="list">
 
	</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>

抽离数据

	let data = [
    {
        id: 0,
        title: "左手指月 - 咻咻满", 
        checked: true,
        collect: true
    },{
        id: 1,
        title: "桥边姑娘 - 花僮", 
        checked: false,
        collect: false
    },{
        id: 2,
        title: "走不出的回忆 - 任然", 
        checked: false,
        collect: false
    },{
        id: 3,
        title: "小雪 - 雪无影", 
        checked: false,
        collect: false
    },{
        id: 4,
        title: "大雪 - 王梓钰", 
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
    }
	];

数据同步视图

• every / some
  • every
    每一项都返回 true / false
    全部返回值为 true ， 最终结果为true ；否则返回 false
  • some
    有一项返回true，结果即为 true

	{
		let list = document.querySelector("#list");
		let checkAll = document.querySelector("#checkAll");

		// 根据数据渲染结构
        let render = () => {
			list.innerHTML = data.map(item => {
            	return `
				<li>
                	<input type="checkbox" ${item.checked?"checked":""} />
                    <span>${item.txt}</span>
                    <a href="javascript:;" class="remove">删除</a>
				</li>
                    `;
			}).join("");
            // 全选
            checkAll.checked = data.every(item=>item.checked);
		};
            render();
	}

添加相应的操作

• forEach
  每一项执行相同的操作

	/* 数据的操作方法 */
    // 添加一条数据
    let add = (txt) => {
    	data.push({
        	id: Date.now(),
            txt,
            checked: false
        });

        render();
    };
            
    let newInfo = document.querySelector("#newInfo");
    let addBtn = document.querySelector("#add");
    addBtn.onclick = ()=>{
         add(newInfo.value);
    };
            
   	// 修改选中状态
   	let changeChecked = (id,checked)=>{
   		data.forEach(item=>{
        	if(item.id == id){
            	item.checked = checked;
            }
        });
        render();
    };

事件委托

• filter( )
  过滤器，构建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  filter不会改变原数组；不会对空数组进行检测；每个元素都会执行

    //   事件委托(事件代理)： 利用事件冒泡，将自身的事件委托给父祖级来进行处理
    
    //    let {target} = event;  解构赋值
      list.onchange = ({target})=>{  
          let li = target.parentNode;
           changeChecked(li.dataset.id,target.checked); 
      }

      //删除单项
      let remove = (id)=>{
            data = data.filter(item=>item.id!=id);
            rander();
      }

      list.onclick = ({target})=>{
            if(target.className == "remove"){
                remove(target.parentNode.dataset.id);
            }
      }
      
      let removeAll = document.querySelector("#remove");
      //删除选中项目
      removeAll.onclick = ()=>{
          console.log(data)
          //1.checked 默认值为 false 
          //2.点击之后为 true         
          //3.因为要返回为false的值 
          //4.所以对true取反  
          // data = data.filter(item=>!item.checked);
          data = data.filter(item=>{
               // console.log(item.checked);
               return !item.checked;    
          });

          rander();
     }     
     

收藏与未收藏

      // 收藏 和 取消收藏
      function collect(id){
                data.forEach(item=>{
                    if(item.id == id){
                        item.collect = true;
                    }
                });
            rander();
     }
           
     function cancelCollect(id){
		data.forEach(item=>{
			if(item.id == id){
				item.collect = false;
            }
        });
        rander();
     }  

• 补充:
  sort( )
  可规定排序顺序，必须为函数，原数组上排序不产生副本

	arr = arr.sort(
		( a - b ) => {
			return  a - b ;
			// a - b  升序排列（小于0）
			// b - a  降序排列（大于0）
		}
	);

• 资源下载地址
  自行寻找