~~~ let listBox = document.getElementById('list'), headerBox = document.getElementById('header'), linkList = headerBox.getElementsByTagName('a'), productList = listBox.getElementsByTagName('li'); ~function () { //=>AJAX let productData = null, xhr = new XMLHttpRequest; xhr.open('GET', 'json/product.json', false); xhr.onreadystatechange = () => { xhr.readyState === 4 && xhr.status === 200 ? productData = xhr.responseText : null; //->FORMAT DATA productData ? productData = JSON.parse(productData) : null; }; xhr.send(null); //=>BIND DATA let str = ``; for (let i = 0; i < productData.length; i++) { let { title, img, price, time, hot } = productData[i]; //=>自定義屬性名最好叫做“data-xxx” str += `<li data-price="${price}" data-time="${time}" data-hot="${hot}"> <a href="javascript:;"> <img src="${img}" alt=""> <p>${title}</p> <span>￥${price}</span> </a></li>`; } listBox.innerHTML = str; }(); //=>HANDLE CLICK ~function () { let sortList = () => { //=>按照價格升序排列 //1.基于GET-ELEMENTS-BY-TAG-NAME獲取的元素集合是一個類數組， 不能直接使用數組中的SORT方法(我們首先把它轉換為數組,然后在排序) let productAry = [].slice.call(productList); //=>用這種借用SLICE方式操作元素集合或者節點集合，在IE6~8中不兼容 //2.基于SORT給所有的LI按照其價格進行排序 productAry.sort((a, b) => { //=>a:數組中的當前項 //=>b:數組中的下一項 // return a-b; 數組當前項減去下一項，如果返回的值大于零，則A/B交換位置，否則小于等于零什么都不做 //=>A是當前LI,B下一個LI,我們應該獲取出每個LI的價格,讓價格相減從而實現排序 （首先數據綁定的時候，我們可以把后面需要用到的“價格/日期/銷量”等信息存儲到LI的自定義屬性上 [在結構中顯示 后期只能基于GET-ATTRIBUTE這種模式獲取到]，后期需要用到這個值的時候， 我們基于自定義屬性獲取到即可） let aP = a.getAttribute('data-price'), bP = b.getAttribute('data-price'); return aP - bP; }); //3.按照排好序的數組，我們把LI重新增加到頁面中 for (let i = 0; i < productAry.length; i++) { let curLi = productAry[i]; listBox.appendChild(curLi); } }; sortList(); }(); ~~~