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

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


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

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

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

记一次 hooks 闭包陷阱问题


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

记一次 hooks 闭包陷阱问题

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

如何正确使用 useMemo 和 useCallback


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

如何正确使用 useMemo 和 useCallback

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

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 ...

ES6 的几个小技巧

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

利用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...

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

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

撸js基础之异步


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

撸js基础之异步

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

理解 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...

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

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understand...
阅读全文 2

撸js基础之函数


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

撸js基础之函数

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

使用原生JS写五子棋


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

使用原生JS写五子棋

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

撸js基础之对象


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

撸js基础之对象

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