获得徽章 2
动态
文章
专栏
沸点
收藏集
关注
作品
赞
12
赞
12
返回
|
搜索文章
父节点

在第一种结构中其实没有专门的根节点，在最外层的数组中每一项都是第一层级的父节点。

而在第二种结构中一般都会有一个item专门来表示根节点，就比如这个对象第一行id为root的item。
展开
青训营-快乐出发
评论
条件断点
条件断点，相对于普通断点多了条件逻辑判断，只有符合条件逻辑的才会进入断点，这能解决有些断点会进入多次，但我们只需要符合特定逻辑的断点，这能提高效率
青训营-快乐出发
评论
VS code 断点
有些人喜欢在浏览器打断点，有些人喜欢在IDE断点，这个看个人喜好。但是Vs Code断点还是需要学会的，对于编译问题、脚本或者脚手架工具这些Node运行环境，就需要借助于IDE的调试环境了，当然Vs Code断点的很简单，跟浏览器类似，都是主流操作
青训营-快乐出发
评论
DOM断点
当想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：

单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
展开
青训营-快乐出发
评论
breakpoint
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。
青训营-快乐出发
评论
console.$i
这个功能是让我们可以在 devtool 开发者工具直接使用npm包，当然这个按需功能，需要扩展程序Console Importer作为辅助工具

以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
展开
青训营-快乐出发
评论
console.table
这个方法可能比较少人知道，可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的。
青训营-快乐出发
评论
console.dir

对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
青训营-快乐出发
评论
白屿白汐
赞了这篇文章
前端小森的头像
前端小森
前端开发工程师
·
2年前

你的私人ChatGPT来啦！

一、申请 OpenAI API Key 1. 访问OpenAI的官网。 https://platform.openai.com/account/api-keys 2. 登录...
image
67
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
青训营-快乐出发
评论
console.warn
在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.error
在控制台输出错误信息，用于代码错误和异常的提示
青训营-快乐出发
评论
console.log
这应该是我们最常用的功能，基本上每天都会使用到，作用也很简单，在控制台输出内容，这边有个小技巧。

假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法，可以更直观的查看变量对应。
展开
青训营-快乐出发
评论
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
青训营-快乐出发
评论
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制

函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行

CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性

CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果

还可以通过 transition 的回调函数动态设置按钮禁用态

这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
展开
青训营-快乐出发
评论
白屿白汐的头像
白屿白汐
学生
·
2年前

计算机网络概论 | 青训营笔记

1. 课程介绍 通过一个示例建立对计算机网络的整体认识 建立对网络协议分层的认知 分析HTTP1、2、3的关系 介绍CDN运行的基本原理 了解网络安全的最基本准则 分析方法...
评论
防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
节流：指定时间内 频繁触发一个事件，只会触发一次
青训营-快乐出发
评论
TinyPng
使用智能的「有损压缩技术」来减少WEBP、JPEG和PNG文件的文件大小。通过选择性地减少图像中的「颜色数量」，使用更少的字节来存储数据。这种效果几乎是看不见的，但在文件大小上有非常大的差别。

使用过TinyPng的都知道，它的压缩效果非常好，体积大幅度降低且显示效果几乎没有区别( 👀 看不出区别）。因此，选择其作为压缩工具，是一个不错的选择。
展开
青训营-快乐出发
评论
1. position: sticky
标题在滚动的时候，会一直贴着最顶上。
这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。
展开
青训营-快乐出发
评论
正常点击 NEXT 进入下一步指引，仔细观察 SVG 相关数据发生了变化
等到指引部分指向代码块的内容区时，复制了此时 SVG 中和 path 相关的参数
返回到第一步很明显此时的高亮部分高度较小，将上一步复制的参数直接替换当前 SVG 中和 path 相关的参数，此时发现整体 SVG 高亮内容宽高发生了变化
核心结论：通过 SVG 可编码的特点，利用 SVG 来实现蒙版效果，并且在绘制蒙版时，预留出目标元素的高亮区间（即 SVG 不需要绘制这一部分），这样就解决了使用 z-index 可能会失效的问题。
展开
青训营-快乐出发
评论
z-index + position + transition

核心实现：

高亮部分 通过控制 z-index 的值，让目标元素展示在蒙层之上

引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动

过渡动画 通过 transition 实现位置的平滑移动

页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息

缺点：

当目标元素的父元素 position: fixed | absolute | sticky 时，目标元素的 z-index 无法超过蒙版层
展开
青训营-快乐出发
评论
下一页
个人成就
文章被阅读 405
掘力值 72
收藏集
0
关注标签
4
加入于