介绍页

努力学习前端技术中... 😋

本博客主要用于个人记录各式实现方法、遇到的问题以及解决方案。

链表

class ListNode {
    val: number
    next: ListNode | null

    constructor(val: number = 0, next: ListNode | null = null) {
        this.val = val
        this.next = next
    }
}

概述

WindowAffix 能将页面元素固定在一个区域内。

原理

想要实现 Affix 效果，需要获取元素的位置。我们可以借助 Element.getBoundingClientRect()，该方法返回一个 DOMRect 对象，通过这个对象可以获取元素上、右、下、左相对于视窗左上边缘的距离、xy距离以及元素宽高。
详情参见 MDN 文档：Element.getBoundingClientRect()

概述

BackTop 是一个返回页面顶部的快捷按钮。

实现

• props 传入的自定义按钮文本，默认为“顶部”
• 使用 requestAnimationFrame() 替代直接赋值 scrollTop = 0，以获得更好的动画效果

fade 淡入淡出

<div class="fade-in">Fade In</div>

bind 方法

• 参数有 thisArg 和原函数的参数 args
• 若 thisArg 为 undefined，则赋值全局对象 window
• 支持衔接后续传入的参数 otherArgs

forEach 方法

• 参数有 callback 和 thisArg
• 遍历所有元素并逐个执行 callback

概述

• 当事件触发时，函数 fn 不会立即执行，而是等待一段时间
• 若等待时间内没有再次触发事件，则执行函数 fn
• 当事件被频繁触发时，防抖函数 debounce 表现为延迟执行

概述

• 当事件触发时，函数 fn 立即执行
• 当事件触发后，等待一段时间才会再次执行函数 fn
• 当事件被频繁触发时，节流函数 throttle 表现为按一定频率执行

概述

柯里化函数能将一个接受多个参数的函数，转换为一个接受单一参数的函数，其会返回另一个函数，并继续接受剩余的参数

如下所示，foo 和 bar 函数的返回结果均为 a + b + c = 10，调用的方式却不相同。foo 函数一次性将所有参数传入，而 bar 函数则是逐个参数传入。foo 函数转换为 bar 函数的过程，即 currying 柯里化。