前端记录 记录分享前端知识
JavaScript

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

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

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

10月8日, 2023 667 views次

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

记一次 hooks 闭包陷阱问题

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

记一次 hooks 闭包陷阱问题

11月11日, 2022 1,127 views次

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

如何正确使用 useMemo 和 useCallback

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

如何正确使用 useMemo 和 useCallback

07月19日, 2022 1,527 views次

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

ES6 的几个小技巧

前言 本文系翻译自 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 3,449 views次 2

ES6 的几个小技巧

03月27日, 2018 3,449 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 3,329 views次 11

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

03月16日, 2018 3,329 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 2,812 views次 2

撸js基础之异步

02月26日, 2018 2,812 views次

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

撸js基础之函数

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

撸js基础之函数

12月5日, 2017 5,160 views次

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

使用原生JS写五子棋

前言 听说这是一道腾讯的面试题，可能网上已经有不少答案了，晚上没事看到这道题就自己做了下。逻辑很简单，考虑到是面试题，使用了 ES6 的语法。本文介绍下核心逻辑跟部分代码。 代码请至这里下载 domo 请点击这里查看 目录 前言 目录 思路 保存已下的棋 判断落...
前言 听说这是一道腾讯的面试题，可能网上已经有不少答案了，晚上没事看到这道题就自己做了下。逻辑很简单，考虑到是面试题，使用了 ES6 的语法。本文介绍下核心逻辑跟部分代码。 代码请至...
06月8日, 2017 7,342 views次 4

使用原生JS写五子棋

06月8日, 2017 7,342 views次

前言 听说这是一道腾讯的面试题，可能网上已经有不少答案了，晚上没事看到这道题就自己做了下。逻辑很简单，考虑到是面试题，使用了 ES6 的语法。本文介绍下...
阅读全文 4
JavaScript

撸js基础之对象

前言 前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 对象的基础知识。 本系列另外还有一篇：撸js基础之数组，各位有兴趣的可以看下。 本文日后还会...
前言 前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 对象的基础知识。 ...
04月20日, 2017 4,858 views次 2

撸js基础之对象

04月20日, 2017 4,858 views次

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

撸js基础之数组

前言 前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 数组的基础知识。 本系列另外还有一篇：撸js基础之对象，各位有兴趣的可以看下。 本文日后还会...
前言 前端这两年的新技术铺天盖地，各种框架、工具层出不穷眼花缭乱。最近打算好好复习下 js 基础，夯实的基础才是学习新技术的基石。本文作为读书笔记简单的总结下 js 数组的基础知识。 本...
03月15日, 2017 7,429 views次 5

撸js基础之数组

03月15日, 2017 7,429 views次

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