資訊專欄INFORMATION COLUMN
摘要：感謝遺忘的過路人這位博主，發現了高級前端進階一中的轉樹形數據的問題。引發的思考引發的思考之前的方法，只要進行一次遍歷即可，然而現在發現，之前的方法的前提是數據已經是排好序的。
感謝 遺忘的過路人 這位博主，發現了 高級前端進階（一） 中的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添加屬性的同時獲取其父親節點，如果順序錯亂的話，自然就會出現問題了。
此方法針對vue項目hash路由模式
// http://localhost:9090/#/test/url?id=34&name=%E6%86%A8%E6%86%A8function 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;}這兩者的區別，很簡單，
過渡就是字面上意思，比如，寬度從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;// 動畫一個周期結束后，倒序播放，正常是 normalanimation-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] }}看完代碼，你一定很懵，這，這，這，也太簡單了吧！的確是這樣。以上就是最簡單的事件總線代碼。我本人也使用這個，畢竟簡單、粗暴。
學習技術要執著，但也不能太執著！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/124527.html
摘要：第二十二期掘金團隊請來了進階解密作者劉望舒做了為期三天的活動活動已結束。我們在此精選了一些來自用戶的提問及劉望舒的回答。提醒本期分布式微服務主題的正在進行，歡迎前去提問，傳送門關于劉望舒進階之光進階解密的作者，安卓巴士等技術大會特邀講師。第二十二期 AMA 掘金團隊請來了《Android進階解密》作者-- 劉望舒做了為期三天的 Ask Me Anything (AMA) 活動（活動已結束）。...
摘要：進階系列一之響應式原理及實現進階系列二之插件原理及實現進階系列三之函數原理及實現函數原理根據第一篇文章介紹的響應式原理，如下圖所示。在初始化階段，本質上發生在函數中，然后通過函數生成，根據生成。負責收集依賴，清除依賴和通知依賴。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）showImg(https://segmentfa...
摘要：推薦高性能網站建設指南高性能網站建設進階指南理由在讀完前幾本書之后我們對前端的性能和自己的代碼的效率已經達到相當的高度了，然后我們在接觸一些前端工程師的一些精髓。 WEB前端研發工程師，在國內算是一個朝陽職業，這個領域沒有學校的正規教育，大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程，目的是給想了解JavaScript或者是剛...
摘要：推薦高性能網站建設指南高性能網站建設進階指南理由在讀完前幾本書之后我們對前端的性能和自己的代碼的效率已經達到相當的高度了，然后我們在接觸一些前端工程師的一些精髓。 WEB前端研發工程師，在國內算是一個朝陽職業，這個領域沒有學校的正規教育，大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程，目的是給想了解JavaScript或者是剛...
閱讀 730·2023-04-25 19:43
閱讀 3974·2021-11-30 14:52
閱讀 3801·2021-11-30 14:52
閱讀 3865·2021-11-29 11:00
閱讀 3796·2021-11-29 11:00
閱讀 3894·2021-11-29 11:00
閱讀 3571·2021-11-29 11:00
閱讀 6154·2021-11-29 11:00
