高级前端进阶（三）

番茄西红柿发布于2021-11-23 09:51 / 2858人阅读

摘要：感谢遗忘的过路人这位博主，发现了高级前端进阶一中的转树形数据的问题。引发的思考引发的思考之前的方法，只要进行一次遍历即可，然而现在发现，之前的方法的前提是数据已经是排好序的。

感谢遗忘的过路人这位博主，发现了高级前端进阶（一）中的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%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过渡跟动画

这两者的区别，很简单，
过渡就是字面上意思，比如，宽度从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]    }}

看完代码，你一定很懵，这，这，这，也太简单了吧！的确是这样。以上就是最简单的事件总线代码。我本人也使用这个，毕竟简单、粗暴。

学习技术要执着，但也不能太执着！

服务器托管私有云 python高级进阶高级前端高级前端开发前端高级开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/124527.html

掘金 AMA：听《Android进阶解密》作者--刘望舒聊 Android 开发、进阶那些事

摘要：第二十二期掘金团队请来了进阶解密作者刘望舒做了为期三天的活动活动已结束。我们在此精选了一些来自用户的提问及刘望舒的回答。提醒本期分布式微服务主题的正在进行，欢迎前去提问，传送门关于刘望舒进阶之光进阶解密的作者，安卓巴士等技术大会特邀讲师。第二十二期 AMA 掘金团队请来了《Android进阶解密》作者-- 刘望舒做了为期三天的 Ask Me Anything (AMA) 活动（活动已结束）。...

wenyiweb 2019-05-23 17:30 评论0 收藏0
Vue 进阶系列（三）之Render函数原理及实现

摘要：进阶系列一之响应式原理及实现进阶系列二之插件原理及实现进阶系列三之函数原理及实现函数原理根据第一篇文章介绍的响应式原理，如下图所示。在初始化阶段，本质上发生在函数中，然后通过函数生成，根据生成。负责收集依赖，清除依赖和通知依赖。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 评论0 收藏0
说说我的web前端之路,分享些前端的好书

摘要：推荐高性能网站建设指南高性能网站建设进阶指南理由在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。　　WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚...

PascalXie 2019-08-20 17:27 评论0 收藏0
说说我的web前端之路,分享些前端的好书

摘要：推荐高性能网站建设指南高性能网站建设进阶指南理由在读完前几本书之后我们对前端的性能和自己的代码的效率已经达到相当的高度了，然后我们在接触一些前端工程师的一些精髓。　　WEB前端研发工程师，在国内算是一个朝阳职业，这个领域没有学校的正规教育，大多数人都是靠自己自学成才。本文主要介绍自己从事web开发以来(从大二至今)看过的书籍和自己的成长过程，目的是给想了解JavaScript或者是刚...

Integ 2019-08-29 12:48 评论0 收藏0