運用所學的知識做了一個商城排序的案例，實現了以下需求：

1. 分別點選上架時間、價格和熱度，能按照點選的類別進行相應的排序；
2. 升序的時候，代表升序的小三角變顏色，降序的時候正好反過來。
   雖然只是個小小的案例，但是有許多問題解決，比如點選時候，排序小三角變化，當點選的三角變化時，其他沒點選的小三角要恢復原來狀態等等。可以說，涉及到了很多基礎知識。
   當然，程式碼中只有結構和js程式碼，css和json的檔案不在。雖然有點粗糙，但是還是拿出來獻醜一下！！！
   如果需要全部程式碼和檔案的，可以看下我gitHub。https://github.com/GHwangxingren/Sorting-of-goods

<div class="content">
    <div class="header">
        <span>排序</span>
        <a href="javascript:;">上架時間
            <i class="up"></i>
            <i class="down"></i>
        </a>
        <a href="javascript:;">熱度
            <i class="up"></i>
            <i class="down"></i>
        </a>
        <a href="javascript:;">價格
            <i class="up"></i>
            <i class="down"></i>
        </a>
    </div>
    <ul id="list">
        <li>
            <img src="img/1.jpg" alt="">
            <span>華為暢享7（香檳金）</span>
            <span>2018-01-01</span>
            <span>1</span>
            <span>992</span>
        </li>
    </ul>
</div>
<script>
    var list = document.getElementById("list");
    var oLi = list.getElementsByTagName("li");
    var oHeader = document.getElementsByClassName("header")[0];
    var oLinks = oHeader.getElementsByTagName("a");

    //獲取json資料
    var goodsList = null;
    var xhr = new XMLHttpRequest();//建立ajax例項
    xhr.open("get", "./json/product.json", false);//獲取請求（請求方式，請求的api，設定同異步）
//監聽xhr的readyState狀態的change事件
    xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4 && xhr.status == 200) {
            goodsList = xhr.responseText;
        }
    };
    xhr.send(null);
    goodsList = JSON.parse(goodsList);//將json字元轉換為json物件。

    //繫結資料
    var str = "";
    for (var i = 0; i < goodsList.length; i++) {
        var goods = goodsList[i];
//es6模板字串
        str += `<li data-price="${goods.price}" data-hot="${goods.hot}" data-time="${goods.time}">
                <img src="${goods.img}" alt="">
                <span>${goods.title}</span>
                <span>上架時間：${goods.time}</span>
                <span>熱度：${goods.hot}</span>
                <span>價格：￥${goods.price}</span>
                </li>`
    }
    list.innerHTML = str;

    //繫結點選事件
    for (var i = 0; i < oLinks.length; i++) {
        oLinks[i].index = i;
        oLinks[i].flag = -1;
        oLinks[i].onclick = function () {
            for (var k = 0; k < oLinks.length; k++) {
                if (oLinks[k]!==this){
                    oLinks[k].flag=-1;  // 恢復標誌的預設-1
                }
            }
            var oIs1 = oHeader.getElementsByTagName("i");
            for (var j = 0; j < oIs1.length; j++) {
                oIs1[j].classList.remove("bg")
            }
            var oIs = this.getElementsByTagName("i");
            if (this.flag == -1) {
                oIs[0].classList.add("bg");
                oIs[1].classList.remove("bg");
            } else {
                oIs[1].classList.add("bg");
                oIs[0].classList.remove("bg");
            }

            this.flag *= -1;
            mySort.call(this);
        }
    }

    //排序
    function mySort() {
        var newLi = [].slice.call(oLi);// 獲取完不是一個數組，需要轉換成陣列，然後在排序
        var flag = this.flag;
        var index = this.index;
        newLi.sort(function (a, b) {
            var aTtr, bTtr;
            if (index == 0) {
                aTtr = a.getAttribute("data-time").replace(/-/g, "");
                bTtr = b.getAttribute("data-time").replace(/-/g, "");
            } else if (index == 1) {
                aTtr = a.getAttribute("data-hot");
                bTtr = b.getAttribute("data-hot");
            } else {
                aTtr = a.getAttribute("data-price");
                bTtr = b.getAttribute("data-price");
            }
            return (aTtr - bTtr) * flag;
        });
        for (var i = 0; i < newLi.length; i++) {
            list.appendChild(newLi[i]);
        }
    }

</script>