感謝 遺忘的過(guò)路人 這位博主，發(fā)現(xiàn)了 高級(jí)前端進(jìn)階（一） 中的list轉(zhuǎn)樹(shù)形數(shù)據(jù)的問(wèn)題。當(dāng)然也是我的疏忽。抱歉?。?！

一、解決問(wèn)題

復(fù)現(xiàn)一下問(wèn)題

將list數(shù)據(jù)不按id順序排序，將之打亂

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的武江網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

// list數(shù)據(jù)
[
    {
        id: 4, pid: 1, name: "二級(jí)數(shù)據(jù)2-1"
    },
    {
        id: 5, pid: 1, name: "二級(jí)數(shù)據(jù)2-2"
    },
    {
        id: 6, pid: 1, name: "二級(jí)數(shù)據(jù)2-3"
    },
    {
        id: 1, pid: 0, name: "一級(jí)數(shù)據(jù)1"
    },
    {
        id: 2, pid: 0, name: "一級(jí)數(shù)據(jù)2"
    },
    {
        id: 3, pid: 0, name: "一級(jí)數(shù)據(jù)3"
    },
    {
        id: 7, pid: 3, name: "三級(jí)數(shù)據(jù)3-1"
    },
    {
        id: 8, pid: 3, name: "二級(jí)數(shù)據(jù)3-2"
    },
    {
        id: 9, pid: 8, name: "三級(jí)數(shù)據(jù)3-1"
    }
]

使用listToArray方法得到的數(shù)據(jù)便會(huì)出現(xiàn)問(wèn)題。

解決方法：

listData.sort((a, b) => { return Number(a[idMap]) - Number(b[idMap]) });

對(duì)，就是這一行代碼。加上這一行代碼，便解決了。

引發(fā)的思考

之前的方法，只要進(jìn)行一次遍歷即可，然而現(xiàn)在發(fā)現(xiàn)，之前的方法的前提是數(shù)據(jù)已經(jīng)是排好序的。
如果錯(cuò)亂了呢？那不得不進(jìn)行一次sort排序。這樣的話，不還是兩次遍歷了嗎？（加上了一次sort排序遍歷）
再次分析一下原理
我們知道，核心原理就是這個(gè)東西 itemMap[id] = item; 將list數(shù)據(jù)以對(duì)象的屬性跟值存儲(chǔ)，方便獲取。
一次遍歷的話，給對(duì)象itemMap添加屬性的同時(shí)獲取其父親節(jié)點(diǎn)，如果順序錯(cuò)亂的話，自然就會(huì)出現(xiàn)問(wèn)題了。

二、解析URL中的參數(shù)

此方法針對(duì)vue項(xiàng)目hash路由模式

// http://localhost:9090/#/test/url?id=34&name=%E6%86%A8%E6%86%A8
function getUrlParams() {
    let index = window.location.href.indexOf('?');
    let urlSearchParams = new URLSearchParams(window.location.href.slice(index + 1));
    let params = Object.fromEntries(urlSearchParams.entries());
    return params;
}

三、CSS3過(guò)渡跟動(dòng)畫(huà)

這兩者的區(qū)別，很簡(jiǎn)單，
過(guò)渡就是字面上意思，比如，寬度從1px，慢慢增加到10px，這便是一種過(guò)渡；
動(dòng)畫(huà)，也是字面上意思，不過(guò)跟過(guò)渡最大的區(qū)別就是最終的狀態(tài)，不管執(zhí)行了什么動(dòng)畫(huà)，最終的狀態(tài)會(huì)還原，比如說(shuō)寬度從1px，慢慢增加到10px，動(dòng)畫(huà)結(jié)束后，會(huì)還原到1px。

舉幾個(gè)例子，舉一反三即可。
1、過(guò)渡屬性：

transition: width 1s linear 2s;
// 等價(jià)于
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

實(shí)例（鼠標(biāo)懸浮在div上，3秒后，寬度從150px，2秒的時(shí)間均勻增長(zhǎng)到400px，然后停止）

div {
  width: 150px;
  height: 100px;
  background: blue;
  transition: width 1s linear 3s;
}
div:hover {
  width: 400px;
}

2、動(dòng)畫(huà)屬性

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;// 動(dòng)畫(huà)循環(huán)次數(shù)，永久
animation-direction: alternate;// 動(dòng)畫(huà)一個(gè)周期結(jié)束后，倒序播放，正常是 normal
animation-play-state: running;
// 等價(jià)于
animation: myfirst 5s linear 2s infinite alternate;

// 動(dòng)畫(huà)名稱(chēng)的兩種寫(xiě)法
@keyframes myName1 {
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}
@keyframes myName2 {
  0% {
    background: red;
  }
  50% {
    background: green;
  }
  100% {
    background: blue;
  }
}

實(shí)例（div的背景顏色從紅色->綠色->藍(lán)色，藍(lán)色->綠色->紅色，無(wú)限循環(huán)）

div
{
    animation: myfirst2 5s linear 2s infinite alternate;
}

四、事件總線

我們知道JavaScript中的，apply，call，bind的使用及其區(qū)別。
有個(gè)地方便用到了，就是事件總線。
首先，簡(jiǎn)述一下原理。
其實(shí)很簡(jiǎn)單的。
先申明一個(gè)對(duì)象bus，其中的對(duì)象用來(lái)存儲(chǔ)事件名稱(chēng)，其值用來(lái)存儲(chǔ)需要執(zhí)行的方法。emit發(fā)送事件的時(shí)候，給bus添加事件名稱(chēng)跟方法，on則接收事件名，來(lái)觸發(fā)對(duì)應(yīng)的方法。
很簡(jiǎn)單吧！
代碼如下：

class EventBus {
    constructor() {
        this.bus = {};
    }
    $on(busName, fn) {
        if (this.bus.hasOwnProperty(busName)) {
            console.log('該事件名已訂閱過(guò)');
            return;
        }
        this.bus[busName] = fn;
    }
    $emit(busName, ...args) {
        this.bus[busName].apply(null, args);
    }
    $off(busName) {
        delete this.bus[busName]
    }
}

看完代碼，你一定很懵，這，這，這，也太簡(jiǎn)單了吧！的確是這樣。以上就是最簡(jiǎn)單的事件總線代碼。我本人也使用這個(gè)，畢竟簡(jiǎn)單、粗暴。

學(xué)習(xí)技術(shù)要執(zhí)著，但也不能太執(zhí)著！