高階前端進階（三）

打遊戲也要有夢想發表於2021-11-22
前端
感謝 遺忘的過路人 這位博主，發現了 高階前端進階（一） 中的list轉樹形資料的問題。當然也是我的疏忽。抱歉！！！

一、解決問題

復現一下問題

將list資料不按id順序排序，將之打亂

// list資料
[
    {
        id: 4, pid: 1, name: "二級資料2-1"
    },
    {
        id: 5, pid: 1, name: "二級資料2-2"
    },
    {
        id: 6, pid: 1, name: "二級資料2-3"
    },
    {
        id: 1, pid: 0, name: "一級資料1"
    },
    {
        id: 2, pid: 0, name: "一級資料2"
    },
    {
        id: 3, pid: 0, name: "一級資料3"
    },
    {
        id: 7, pid: 3, name: "三級資料3-1"
    },
    {
        id: 8, pid: 3, name: "二級資料3-2"
    },
    {
        id: 9, pid: 8, name: "三級資料3-1"
    }
]

使用listToArray方法得到的資料便會出現問題。

解決方法：

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

對，就是這一行程式碼。加上這一行程式碼，便解決了。

引發的思考

之前的方法，只要進行一次遍歷即可，然而現在發現，之前的方法的前提是資料已經是排好序的。
如果錯亂了呢？那不得不進行一次sort排序。這樣的話，不還是兩次遍歷了嗎？（加上了一次sort排序遍歷）
再次分析一下原理
我們知道，核心原理就是這個東西 itemMap[id] = item; 將list資料以物件的屬性跟值儲存，方便獲取。
一次遍歷的話，給物件itemMap新增屬性的同時獲取其父親節點，如果順序錯亂的話，自然就會出現問題了。

二、解析URL中的引數

此方法針對vue專案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過渡跟動畫

這兩者的區別，很簡單，
過渡就是字面上意思，比如，寬度從1px，慢慢增加到10px，這便是一種過渡；
動畫，也是字面上意思，不過跟過渡最大的區別就是最終的狀態，不管執行了什麼動畫，最終的狀態會還原，比如說寬度從1px，慢慢增加到10px，動畫結束後，會還原到1px。

舉幾個例子，舉一反三即可。
1、過渡屬性：

transition: width 1s linear 2s;
// 等價於
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

例項（滑鼠懸浮在div上，3秒後，寬度從150px，2秒的時間均勻增長到400px，然後停止）

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

2、動畫屬性

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;// 動畫迴圈次數，永久
animation-direction: alternate;// 動畫一個週期結束後，倒序播放，正常是 normal
animation-play-state: running;
// 等價於
animation: myfirst 5s linear 2s infinite alternate;

// 動畫名稱的兩種寫法
@keyframes myName1 {
  from {
    background: red;
  }
  to {
    background: yellow;
  }
}
@keyframes myName2 {
  0% {
    background: red;
  }
  50% {
    background: green;
  }
  100% {
    background: blue;
  }
}

例項（div的背景顏色從紅色->綠色->藍色，藍色->綠色->紅色，無限迴圈）

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

四、事件匯流排

我們知道JavaScript中的，apply，call，bind的使用及其區別。
有個地方便用到了，就是事件匯流排。
首先，簡述一下原理。
其實很簡單的。
先申明一個物件bus，其中的物件用來儲存事件名稱，其值用來儲存需要執行的方法。emit傳送事件的時候，給bus新增事件名稱跟方法，on則接收事件名，來觸發對應的方法。
很簡單吧！
程式碼如下：

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

看完程式碼，你一定很懵，這，這，這，也太簡單了吧！的確是這樣。以上就是最簡單的事件匯流排程式碼。我本人也使用這個，畢竟簡單、粗暴。

學習技術要執著，但也不能太執著！

相關文章