前端记录 - 记录分享前端知识技能

使用安全三角和延迟取消的方法优化 hover 浮层

碰到一个算是比较常见问题，如下图：需求：显而易见，当 hover 在对话框上时，显示反馈浮层，使用 hover 或鼠标事件都能实现。 BUG：由于浮层跟主体之间有空隙，当鼠标移动向浮层时触发了 MouseLeave 事件，以至于鼠标没来及移动到浮层上，浮层就消失掉了。以下是...

碰到一个算是比较常见问题，如下图：需求：显而易见，当 hover 在对话框上时，显示反馈浮层，使用 hover 或鼠标事件都能实现。 BUG：由于浮层跟主体之间有空隙，当鼠标移动向浮层时触发了 ...

10月8日, 2023 Tumars 937 views次 1

使用安全三角和延迟取消的方法优化 hover 浮层

10月8日, 2023 937 views次

碰到一个算是比较常见问题，如下图：需求：显而易见，当 hover 在对话框上时，显示反馈浮层，使用 hover 或鼠标事件都能实现。 BUG：由于浮层跟主体之间有...

阅读全文 1

JavaScript

记一次 hooks 闭包陷阱问题

题图为作者拍于稻城亚丁五色海。 hooks 的闭包陷阱是个老生常谈的问题了，但依然很容易在开发时忽略。近日再次遭遇了这个问题，记录一下。发现 bug 需求很简单：一个卡片上有多个下载按钮，点击后请求文件地址。大概实现如下： ...

题图为作者拍于稻城亚丁五色海。 hooks 的闭包陷阱是个老生常谈的问题了，但依然很容易在开发时忽略。近日再次遭遇了这个问题，记录一下。发现 bug 需求很简单：一个卡片上有多个下载按...

11月11日, 2022 Tumars 1,476 views次 1

记一次 hooks 闭包陷阱问题

11月11日, 2022 1,476 views次

题图为作者拍于稻城亚丁五色海。 hooks 的闭包陷阱是个老生常谈的问题了，但依然很容易在开发时忽略。近日再次遭遇了这个问题，记录一下。发现 bug 需求...

阅读全文 1

JavaScript

如何正确使用 useMemo 和 useCallback

题图为作者拍于稻城亚丁洛绒牛场。前言 useMemo 和 useCallback 是 React 的内置 Hook，通常作为优化性能的手段被使用。他们可以用来缓存函数、组件、变量，以避免两次渲染间的重复计算。但是实践过程中，他们经常被过度使用：担心性能的开发者给每个组件、函数...

题图为作者拍于稻城亚丁洛绒牛场。前言 useMemo 和 useCallback 是 React 的内置 Hook，通常作为优化性能的手段被使用。他们可以用来缓存函数、组件、变量，以避免两次渲染间的重复计算...

07月19日, 2022 Tumars 1,762 views次 1

如何正确使用 useMemo 和 useCallback

07月19日, 2022 1,762 views次

题图为作者拍于稻城亚丁洛绒牛场。前言 useMemo 和 useCallback 是 React 的内置 Hook，通常作为优化性能的手段被使用。他们可以用来缓存函数、组件、变...

阅读全文 1

JavaScript

前言本文系翻译自 Check out these useful ECMAScript 2015 (ES6) tips and tricks 本文首发于个人博客：http://www.ferecord.com/check-out-these-useful-ecmascript-2015-es6-tips-and-tricks.html。如若转载请附上原文地址，以便更新溯源。 EcmaScript 2015 ...

03月27日, 2018 Tumars 3,676 views次 2

ES6 的几个小技巧

03月27日, 2018 3,676 views次

前言本文系翻译自 Check out these useful ECMAScript 2015 (ES6) tips and tricks 本文首发于个人博客：http://www.ferecord.com/check-out-these-usefu...

阅读全文 2

CSS JavaScript

利用perspective和transform创建随鼠标倾斜的动画

前言本文系翻译自 Animate a Container on Mouse Over Using Perspective and Transform 本文首发于个人博客：(http://www.ferecord.com/animate-a-container-on-mouse-over-using-perspective-and-transform/.html)。如若转载请附上原文地址，以便更新溯源。 ...

前言本文系翻译自 Animate a Container on Mouse Over Using Perspective and Transform 本文首发于个人博客：(http://www.ferecord.com/animate-a-container-on-mouse-over-using-persp...

03月16日, 2018 Tumars 3,649 views次 11

利用perspective和transform创建随鼠标倾斜的动画

03月16日, 2018 3,649 views次

前言本文系翻译自 Animate a Container on Mouse Over Using Perspective and Transform 本文首发于个人博客：(http://www.ferecord.com/animate-a-conta...

阅读全文 11

JavaScript

撸js基础之异步

前言前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 异步的基础知识。本系列目前已有四篇：撸js基础之数组撸js基础之对象撸js基础之函数撸js...

前言前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 异步的基础知识。本...

02月26日, 2018 Tumars 2,967 views次 2

撸js基础之异步

02月26日, 2018 2,967 views次

前言前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单...

阅读全文 2

CSS

理解 CSS 布局和块级格式上下文

前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context，内容足够简洁明了。本文的目的是介绍一些概念，来帮...

前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block F...

12月14日, 2017 Tumars 2,105 views次 2