成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

高級(jí)前端進(jìn)階（三）

番茄西紅柿 / 3040人閱讀

摘要：感謝遺忘的過(guò)路人這位博主，發(fā)現(xiàn)了高級(jí)前端進(jìn)階一中的轉(zhuǎn)樹(shù)形數(shù)據(jù)的問(wèn)題。引發(fā)的思考引發(fā)的思考之前的方法，只要進(jìn)行一次遍歷即可，然而現(xiàn)在發(fā)現(xiàn)，之前的方法的前提是數(shù)據(jù)已經(jīng)是排好序的。

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

一、解決問(wèn)題

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

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

// 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%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;}

三、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é)束后，倒序播放，正常是 normalanimation-play-state: running;// 等價(jià)于animation: myfirst 5s linear 2s infinite alternate;
// 動(dòng)畫(huà)名稱的兩種寫(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ǔ)事件名稱，其值用來(lái)存儲(chǔ)需要執(zhí)行的方法。emit發(fā)送事件的時(shí)候，給bus添加事件名稱跟方法，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í)著！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/124527.html

相關(guān)文章

  • 掘金 AMA：聽(tīng)《Android進(jìn)階解密》作者--劉望舒聊 Android 開(kāi)發(fā)、進(jìn)階那些事

    摘要：第二十二期掘金團(tuán)隊(duì)請(qǐng)來(lái)了進(jìn)階解密作者劉望舒做了為期三天的活動(dòng)活動(dòng)已結(jié)束。我們?cè)诖司x了一些來(lái)自用戶的提問(wèn)及劉望舒的回答。提醒本期分布式微服務(wù)主題的正在進(jìn)行，歡迎前去提問(wèn)，傳送門(mén)關(guān)于劉望舒進(jìn)階之光進(jìn)階解密的作者，安卓巴士等技術(shù)大會(huì)特邀講師。第二十二期 AMA 掘金團(tuán)隊(duì)請(qǐng)來(lái)了《Android進(jìn)階解密》作者-- 劉望舒做了為期三天的 Ask Me Anything (AMA) 活動(dòng)（活動(dòng)已結(jié)束）。...

    wenyiweb 評(píng)論0 收藏0

  • Vue 進(jìn)階系列（三）之Render函數(shù)原理及實(shí)現(xiàn)

    摘要：進(jìn)階系列一之響應(yīng)式原理及實(shí)現(xiàn)進(jìn)階系列二之插件原理及實(shí)現(xiàn)進(jìn)階系列三之函數(shù)原理及實(shí)現(xiàn)函數(shù)原理根據(jù)第一篇文章介紹的響應(yīng)式原理，如下圖所示。在初始化階段，本質(zhì)上發(fā)生在函數(shù)中，然后通過(guò)函數(shù)生成，根據(jù)生成。負(fù)責(zé)收集依賴，清除依賴和通知依賴。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）showImg(https://segmentfa...

    geekidentity 評(píng)論0 收藏0

  • 說(shuō)說(shuō)我的web前端之路,分享些前端的好書(shū)

    摘要：推薦高性能網(wǎng)站建設(shè)指南高性能網(wǎng)站建設(shè)進(jìn)階指南理由在讀完前幾本書(shū)之后我們對(duì)前端的性能和自己的代碼的效率已經(jīng)達(dá)到相當(dāng)?shù)母叨攘?，然后我們?cè)诮佑|一些前端工程師的一些精髓。 　　WEB前端研發(fā)工程師，在國(guó)內(nèi)算是一個(gè)朝陽(yáng)職業(yè)，這個(gè)領(lǐng)域沒(méi)有學(xué)校的正規(guī)教育，大多數(shù)人都是靠自己自學(xué)成才。本文主要介紹自己從事web開(kāi)發(fā)以來(lái)(從大二至今)看過(guò)的書(shū)籍和自己的成長(zhǎng)過(guò)程，目的是給想了解JavaScript或者是剛...

    PascalXie 評(píng)論0 收藏0

  • 說(shuō)說(shuō)我的web前端之路,分享些前端的好書(shū)

    摘要：推薦高性能網(wǎng)站建設(shè)指南高性能網(wǎng)站建設(shè)進(jìn)階指南理由在讀完前幾本書(shū)之后我們對(duì)前端的性能和自己的代碼的效率已經(jīng)達(dá)到相當(dāng)?shù)母叨攘?，然后我們?cè)诮佑|一些前端工程師的一些精髓。 　　WEB前端研發(fā)工程師，在國(guó)內(nèi)算是一個(gè)朝陽(yáng)職業(yè)，這個(gè)領(lǐng)域沒(méi)有學(xué)校的正規(guī)教育，大多數(shù)人都是靠自己自學(xué)成才。本文主要介紹自己從事web開(kāi)發(fā)以來(lái)(從大二至今)看過(guò)的書(shū)籍和自己的成長(zhǎng)過(guò)程，目的是給想了解JavaScript或者是剛...

    Integ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<