介绍页
努力学习前端技术中... 😋
本博客主要用于个人记录各式实现方法、遇到的问题以及解决方案。
小于 1 分钟
链表
class ListNode {
val: number
next: ListNode | null
constructor(val: number = 0, next: ListNode | null = null) {
this.val = val
this.next = next
}
}
小于 1 分钟
概述
WindowAffix 能将页面元素固定在一个区域内。
原理
想要实现 Affix 效果，需要获取元素的位置。我们可以借助 Element.getBoundingClientRect()，该方法返回一个 DOMRect 对象，通过这个对象可以获取元素上、右、下、左相对于视窗左上边缘的距离、xy距离以及元素宽高。
详情参见 MDN 文档：Element.getBoundingClientRect()
大约 2 分钟
概述
BackTop 是一个返回页面顶部的快捷按钮。
实现
props传入的自定义按钮文本，默认为“顶部”- 使用
requestAnimationFrame()替代直接赋值scrollTop = 0，以获得更好的动画效果
大约 3 分钟
fade 淡入淡出
<div class="fade-in">Fade In</div>
小于 1 分钟
bind 方法
- 参数有
thisArg和原函数的参数args - 若
thisArg为undefined，则赋值全局对象window - 支持衔接后续传入的参数
otherArgs
大约 1 分钟
forEach 方法
- 参数有
callback和thisArg - 遍历所有元素并逐个执行
callback
大约 6 分钟
概述
- 当事件触发时，函数
fn不会立即执行，而是等待一段时间 - 若等待时间内没有再次触发事件，则执行函数
fn - 当事件被频繁触发时，防抖函数
debounce表现为延迟执行
大约 1 分钟
概述
- 当事件触发时，函数
fn立即执行 - 当事件触发后，等待一段时间才会再次执行函数
fn - 当事件被频繁触发时，节流函数
throttle表现为按一定频率执行
小于 1 分钟
概述
柯里化函数能将一个接受多个参数的函数，转换为一个接受单一参数的函数，其会返回另一个函数，并继续接受剩余的参数
如下所示，foo 和 bar 函数的返回结果均为 a + b + c = 10，调用的方式却不相同。foo 函数一次性将所有参数传入，而 bar 函数则是逐个参数传入。foo 函数转换为 bar 函数的过程，即 currying 柯里化。
大约 2 分钟