跳至主要內容
haneball Blog

haneball Blog

一个小博客

介绍页

介绍页

一个努力学习前端技术的 🐤。😎

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


haneball小于 1 分钟
实现几种数据结构

链表

class ListNode {
    val: number
    next: ListNode | null

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

haneball小于 1 分钟TypeScript数据结构
WindowAffix 窗口图钉

概述

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

原理

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


haneball大约 2 分钟Vue组件
BackTop 返回顶部

概述

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

实现

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

haneball大约 3 分钟Vue组件
实现 Function 的原生方法

bind 方法

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

haneball大约 1 分钟JavaScriptTypeScript原生方法
防抖函数

概述

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

haneball大约 1 分钟JavaScriptTypeScript性能优化
节流函数

概述

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

haneball小于 1 分钟JavaScriptTypeScript性能优化
柯里化函数

概述

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

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


haneball大约 2 分钟JavaScriptTypeScript常用函数
2

已经达到知识的荒漠~ (-ω-)