ES6 - Web Music Case ideas and writing methods

Thinking and writing method of Web Music cases

In some cases, we often receive the data from the background, and then write the page for the data

  • Basic page frame
	<h2 class="title">Baidu Music List</h2>
	<ul id="list">
 
	</ul>
	<footer class="footer">
		<label><input type="checkbox" id="checkAll" />All election/Totally unselected</label>
		<a href="javascript:;" id="remove">delete</a>
		<input type="text" id="newInfo" />
		<a href="javascript:;" id="add">Add to</a>
	</footer>

Detached data

	let data = [
    {
        id: 0,
        title: "Left hand refers to the moon - Full of joy", 
        checked: true,
        collect: true
    },{
        id: 1,
        title: "Girl on Bridge - Flower boy", 
        checked: false,
        collect: false
    },{
        id: 2,
        title: "Memories that can't go out - Ren Ran", 
        checked: false,
        collect: false
    },{
        id: 3,
        title: "Light snow - Snow without shadow", 
        checked: false,
        collect: false
    },{
        id: 4,
        title: "Heavy snow - Wang Zi Yu", 
        checked: true,
        collect: false //Collection true collection false no collection
    }
	];

Data synchronization view

  • every / some
    • every
      Return true / false for each item
      All return values are true, and the final result is true; otherwise, false is returned
    • some
      One item returns true, and the result is true
	{
		let list = document.querySelector("#list");
		let checkAll = document.querySelector("#checkAll");

		// Render structure based on data
        let render = () => {
			list.innerHTML = data.map(item => {
            	return `
				<li>
                	<input type="checkbox" ${item.checked?"checked":""} />
                    <span>${item.txt}</span>
                    <a href="javascript:;" class="remove">delete</a>
				</li>
                    `;
			}).join("");
            // All election
            checkAll.checked = data.every(item=>item.checked);
		};
            render();
	}

Add corresponding action

  • forEach
    Do the same for each
	/* How to operate data */
    // Add a piece of data
    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);
    };
            
   	// Modify selected status
   	let changeChecked = (id,checked)=>{
   		data.forEach(item=>{
        	if(item.id == id){
            	item.checked = checked;
            }
        });
        render();
    };

Event delegation

  • filter( )
    Filter, build a new array, the elements in the new array are all qualified elements in the specified array by checking
    filter will not change the original array; it will not detect empty arrays; every element will execute
    //   Event delegation (event agent): use event bubbling to delegate its own events to the parent for processing
    
    //    let {target} = event; deconstruct assignment
      list.onchange = ({target})=>{  
          let li = target.parentNode;
           changeChecked(li.dataset.id,target.checked); 
      }

      //Delete single item
      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");
      //Delete selected items
      removeAll.onclick = ()=>{
          console.log(data)
          //1. The default value of checked is false 
          //2. true after clicking         
          //3. Because the value to be returned to false 
          //4. So reverse true  
          // data = data.filter(item=>!item.checked);
          data = data.filter(item=>{
               // console.log(item.checked);
               return !item.checked;    
          });

          rander();
     }     
     

Collection and non collection

      // Collections and cancellations
      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();
     }  
  • Supplement:
    sort( )
    The sorting order can be specified. It must be a function. Sorting on the original array does not produce copies
	arr = arr.sort(
		( a - b ) => {
			return  a - b ;
			// a - b ascending (less than 0)
			// b - a descending (greater than 0)
		}
	);
Published 63 original articles, won praise 1, visited 1432
Private letter follow

Tags: Javascript less

Posted on Fri, 07 Feb 2020 06:23:11 -0800 by The_Anomaly