
前端
文章平均质量分 92
夏安
这个作者很懒,什么都没留下…
展开
-
盘点 TypeScript 内置类型
了解和熟悉这些内置类型对于编写健壮、可维护和类型安全的 TypeScript 代码至关重要。通过合理地使用这些类型,我们可以在开发过程中更好地捕获错误、提高代码质量并减少调试时间。本文将带大家了解 TypeScript 的一些高级类型的使用以及它的实现。原创 2023-07-31 15:50:49 · 422 阅读 · 0 评论 -
源码阅读:p-limit
p-limit是一个用于限制并发操作的包,它可以控制同时执行的异步操作数量。它提供了一种简单的方式来管理并发操作,以避免系统资源过度占用和性能下降。p-limit的工作原理是使用一个计数器来跟踪当前正在执行的操作数量。当有新的操作需要执行时,它会检查当前的计数器值,如果小于设定的并发限制数,则立即执行操作并将计数器加一。如果计数器已达到并发限制数,则将操作加入等待队列,直到有空闲的位置。p-limit简单易用:使用p-limit。原创 2023-07-31 15:48:45 · 622 阅读 · 0 评论 -
源码阅读:yocto-queue
队列是元素的有序列表,其中元素在队列末尾插入,并从队列前面删除。队列基于先进先出原则工作。如果你在大型数组上执行大量 Array#push() 和 Array#shift() 操作,则应该使用此包而不是数组,因为 Array#shift() 的线性时间复杂度为 O(n),而 Queue#dequeue() 是基于链表实现的,具有恒定的时间复杂度 O(1)。这对于大型队列来说有很大的不同。原创 2023-07-31 15:47:42 · 274 阅读 · 0 评论 -
源码阅读:classnames
classnames一个简单的 JavaScript 实用程序,用于有条件地将类名连接在一起。可以通过npm包管理器从npmclassNames函数接受任意数量的参数,可以是字符串或对象。参数'foo'是 { foo: true } 的缩写。如果与给定键关联的值是假的,则该键将不会包含在输出中。// => 'foo bar' // 支持不同类型的参数同时传入 classNames('foo' , {原创 2023-07-31 15:43:19 · 953 阅读 · 0 评论 -
JavaScript BigInt 使用指南
在本文中,我们将了解 `BigInt` 是什么、它的优点以及如何在 JavaScript 中正确使用它。原创 2023-06-25 22:50:17 · 1144 阅读 · 0 评论 -
如何在 Node.js 应用程序中处理大数
在 JavaScript 生态系统中,你可以使用 `BigInt` 来处理大整数。但是,你也可以使用具有类似于 `BigInt` 功能的第三方库。本文将是使用 `BigInt` 和提供类似功能的流行库管理大数的完整指南。我们还将比较第三方库的用例、优势和劣势。原创 2023-06-25 22:39:24 · 1404 阅读 · 0 评论 -
深入了解 useLayoutEffect
近年来,React 已经在不断变化的 Web 开发领域巩固了自己的地位,成为构建高性能和交互式用户界面的最有效方法之一。随着 Hooks 新特性的引入,React 彻底改变了开发人员在函数组件中管理有状态和可重用逻辑的方式。在本文中,我们将深入探索`useLayoutEffect`hook、它与 `useEffect` 的不同之处,并学习如何正确地利用其功能来增强用户体验。原创 2023-06-22 13:46:49 · 2488 阅读 · 0 评论 -
Bun vs. Node.js
在本文中,我们将介绍最近在技术领域引起轰动的新的 Bun 运行时。我们将讨论运行时是做什么的,以及为什么一些开发人员转而使用 Bun。我们还将进行一些基准测试,看看 Bun 是否真的像 Bun 团队所说的那样拥有最快的运行时间。原创 2023-06-19 16:57:37 · 1637 阅读 · 0 评论 -
推荐 8 个 React 可视化库
在构建网站或应用程序时,有无数种方法可以在工作中显示图表。你可以决定从头开始构建你的图表,或者使用许多可用的 React 可视化库。在本文中,我们将比较 React 应用程序的 8 个顶级可视化库。原创 2023-02-22 22:21:07 · 2317 阅读 · 2 评论 -
前端开发人员使用的顶级 Node.js 框架介绍
在本文中,我们介绍了很多内容,首先介绍了为什么应该使用框架、框架的类型以及关于不同框架的一些统计数据。然后我们浏览了五个最流行的框架,包括 Express、Koa、Socket.io、Fastify 和 NestJS。希望本文能让你更好地了解每个框架的不同之处。原创 2023-02-21 15:11:50 · 4060 阅读 · 0 评论 -
CSS-in-JS 指南
任何 JavaScript 前端框架或库都可以实现 CSS-in-JS 的思想。本文使用 React——迄今为止最流行的 JavaScript 前端库——来讨论 CSS-in-JS 的应用,以及它显著的优点和缺点。原创 2023-02-13 19:05:24 · 670 阅读 · 0 评论 -
深入了解 CSS 中的 :where() 和 :is() 函数
在本文中,我们将讨论 :where() 伪类函数,并演示如何在生产环境中使用它。我们将回顾与 :where() 函数相关的叠加、优先级和安全性。我们还将研究一些特定的用例,并讨论它与 :is() 函数的异同。原创 2023-02-12 21:57:40 · 8435 阅读 · 2 评论 -
细说 rem 与 em
本文我们将介绍CSS中的rem 和 `em,理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。原创 2023-02-01 15:04:45 · 5653 阅读 · 0 评论 -
如何实现 add[1][2][3] + 4 === 6?
所以说,当我们当问代理对象的属性时,即使该属性不存在,我们依然能返回值。否则,正常情况下我们访问一个不存在的属性会返回。对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。则是以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。对象中,我们是访问任意属性的时候触发对应的方法,即对应的是。然而,函数柯里化的实现是基于函数的,调用的时候使用。我们需要访问一个属性,去触发特定的方法,相信熟悉。,而这里我们使用的是。是我们要代理的对象,原创 2022-10-31 18:39:55 · 720 阅读 · 0 评论 -
React useRef 指南
在本文中,我们将讨论使用 ref 访问 DOM 的 React `useRef` 钩子,以及 `ref` 和 `useRef` 之间的区别。原创 2022-10-30 16:14:40 · 2366 阅读 · 0 评论 -
浅谈 React 和 TypeScript 开发中的泛型实践
泛型是TypeScript中的一个重要部分:它们看起来很奇怪,它们的目的不明显,而且它们可能很难分析。本文旨在帮助你理解和揭开TypeScript泛型的神秘面纱,特别是它们在React中的应用。原创 2022-10-29 22:35:07 · 2040 阅读 · 0 评论 -
在 useEffect 中使用异步函数指南
useEffe通常是React中进行数据获取的地方。数据获取意味着使用异步函数,在useEffect中使用它们不像你想象的那么简单。看完本文,你将会真正掌握在useEffect中使用异步函数的正确姿态原创 2022-10-28 23:20:20 · 4234 阅读 · 0 评论 -
使用 CSS 创建自定义鼠标游标
作为用户和网站之间的中间人,游标既可以限制用户体验网站的方式,也可以大大增强用户体验网站的方式。在本教程中,我们将了解什么是自定义游标,并学习如何使用CSS和JavaScript创建自定义游标。原创 2022-10-24 15:20:02 · 2300 阅读 · 0 评论 -
深入了解 React 中的虚拟 DOM
虚拟DOM是React的一个基本概念。你可能听说过它,然而你可能不理解它是如何工作的以及React为什么使用它。本文将介绍什么是虚拟DOM,它在React中的好处,以及帮助解释这个概念的实际示例代码。原创 2022-10-23 14:34:52 · 871 阅读 · 1 评论 -
深入浅出 JavaScript Reflect API
本文的目的是帮助你更好地理解 JavaScript 中 `Reflect` 的概念以及如何使用提供的各种方法。`Reflect` 使你能够轻松地修改现有对象的功能,同时仍然提供其默认行为。原创 2022-10-21 14:28:19 · 398 阅读 · 0 评论 -
CSS calc() 使用指南
你听说过或使用过 CSS 的 `calc()` 函数吗?也许你听说过它,但从未尝试过,或者尝试过使用它,但在使用过程中遇到了一些问题。这篇指南可以帮助你。原创 2022-10-19 13:08:54 · 7626 阅读 · 1 评论 -
深入浅出 React 18 中的严格模式
在本文中,你将了解严格模式以及引入它的初衷。你将了解它的各种特性,以及 v18 版本如何改进其 API 并提供与 hook 更好的兼容性。原创 2022-10-17 15:32:41 · 1771 阅读 · 0 评论 -
深入浅出 JavaScript 弱引用
内存和性能管理是软件开发的重要方面,也是每个软件开发人员都应该注意的方面。虽然弱引用很有用,但在 JavaScript 中并不经常使用。在 ES6 版本中,JavaScript 引入了 `WeakSet` 和 `WeakMap`。原创 2022-10-16 14:57:37 · 1202 阅读 · 0 评论 -
使用 useState 需要注意的 5 个问题
useState hook 可能很难理解,特别是对于新手React开发人员或从基于类的组件迁移到函数组件的开发人员。在本文中,我们将探讨使用useState需要注意的5个问题,以及如何避免它们。原创 2022-10-15 13:51:30 · 2079 阅读 · 1 评论 -
TypeScript 实用工具类型之 Partial 类型
在本文中,我们将使用 `Partial` 来讨论 TypeScript 中的对象类型转换。这是 TypeScript 实用工具类型系列的第三部分。在这篇文章中,我们将考虑一个 TypeScript `Partial` 的例子,通过修改我们的 `Subscriber` 类型来假设一个更现实的场景。原创 2022-10-14 11:19:56 · 4489 阅读 · 0 评论 -
TypeScript 实用工具类型之 Omit 类型
在本文中,我们将讨论 TypeScript 中使用 `Omit` 的对象类型转换。这是 TypeScript 实用工具类型系列的第二部分。原创 2022-10-13 12:09:40 · 3833 阅读 · 2 评论 -
你必须了解的 React 18 新特性
这是一个全新的概念,而不是一个功能,使 React 应用程序运行在 React 18 及更高版本上,优化它们在客户端设备上的性能。即使在了解了 React 17 和 React 18 之间的区别之后,你可能仍然不确定是切换到 React 18 还是坚持使用 React 17。这篇文章将讨论 React 18 是什么,React 17 的问题,React 18 的新特性,以及为什么你应该使用最新版本。只有在事件回调函数结束时所有的状态都被更改之后,然后触发一个单独的 re-render,合并所有更新。原创 2022-10-10 22:36:54 · 2219 阅读 · 0 评论 -
一文让你彻底理解 React Fragment
在本文中,你将了解 React Fragment。首先了解了 React Fragment 是什么,以及什么时候在 React 应用程序中使用它。然后进一步演示了如何在实际应用中使用它。原创 2022-10-09 19:32:24 · 2886 阅读 · 1 评论 -
JavaScript IndexedDB 完整指南
本文将通过一个小教程向你介绍 ,并将 与其他可用选项进行比较。 用于在浏览器中存储数据,对于需要离线工作的 web 应用程序(如大多数进步的 web 应用程序)尤其重要。首先,让我们介绍一下为什么需要将数据存储在 web 浏览器中。数据在 web 应用程序中无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法,就不可能允许用户交互跨多个 web 应用程序的使用保持状态。你通常会使用 MySQL、Postgres、MongoDB、Neo4j、ArangoDB 等数据库来处理原创 2022-09-30 14:38:51 · 1533 阅读 · 0 评论 -
JavaScript LocalStorage 完整指南
对于大多数 web 浏览器,提供了在浏览器中存储键值对的机制。它通常分为和,两者之间的主要区别是浏览器存储数据的时间。使用,。但是,中的数据会一直保存到清除为止。特性在许多用例中都是有帮助的。本文将详细介绍及其工作原理,以便你可以在应用程序中使用它。原创 2022-09-29 15:27:45 · 4396 阅读 · 0 评论 -
React 错误边界指南
虽然在错误到达生产环境之前捕获错误是理想的,但是其中一些错误(例如网络错误)可能会通过测试而影响用户。如果你的 React 组件没有正确地捕捉到第三方库或 React Hooks 抛出的错误,这样的错误要么导致 React 生命周期崩溃,要么到达主执行线程的顶层,导致“白屏”场景:在React 16中,没有捕捉到的错误[…]将导致整个 React 组件树被卸载您的应用程序通过提供适当的可视化反馈和潜在操作(例如:重试机制)来优雅地处理此类错误是至关重要的。原创 2022-09-28 13:42:58 · 1852 阅读 · 0 评论 -
JavaScript try-catch 处理错误和异常指南
异常是表示在程序执行时发生了问题的对象。当访问无效数组索引时,当试图访问空引用的某些成员时,当试图调用不存在的函数时,都可能发生这些问题。例如,考虑一个应用程序依赖第三方 API 的场景。你的代码可能会处理来自这个 API 的响应,期望它们包含某些属性。如果这个 API 由于任何原因返回一个意外的响应,它可能会触发一个运行时错误。在这种情况下,你可以将受影响的逻辑包装在try-catch语句中,并向用户提供错误消息,甚至调用一些回退逻辑,而不是允许错误导致应用程序崩溃。原创 2022-09-24 15:42:14 · 6017 阅读 · 1 评论 -
深入了解 JavaScript 语法错误以及如何防止它们
在本文中,你将更多地了解 JavaScript 中的语法错误。你将看到一些常见语法错误的示例,以及关于如何修复这些错误并将它们排除在代码之外的技术和工具。原创 2022-09-22 13:44:26 · 1510 阅读 · 0 评论 -
手把手实现 CSS 加载动画(一)
接下来便是旋转这三个圆,最方便的做法便是将容器进行旋转,但有一个地方需要注意,我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画,我们不可能让他在角落展示吧,我们当然需要将它水平垂直居中,水平垂直居中的方式有很多,这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间(为了方便观察,我们给容器加了一个背景颜色)。好了,到现在我们已经完成了初始状态,接下来我们要为它们分别定义动画。接下来我们来绘制三个圆,首先一开始三个圆是在容器中间。,这就是动画开始时一个圆分裂成三个圆的停顿时刻;...原创 2022-08-07 13:06:50 · 4669 阅读 · 1 评论 -
一文带你了解 ESLint
在平时开发中,我们总是希望尽可能写出最佳代码,但有时总会出错,然后需要花数小时定位 bug,最后发现只是拼写错误,这很令人沮丧。好在一些工具可以帮助我们在输入过程中检查代码的正确性。这些工具无法表明代码能否实现预期效果,但可以帮助我们避免语法错误。如果之前使用过 C#这种静态语言,那么你应该很熟悉 IDE 给出的这种警告信息。Douglas Crockford 开发的 JSLint(最初发布于 2002 年)使得 JavaScript 代码检查变得流行起来。...原创 2022-08-03 21:38:04 · 1378 阅读 · 0 评论 -
JavaScript sort() 方法你真的了解吗?
sort()方法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。我们知道unicode编码中,数字原创 2022-07-29 13:34:06 · 167 阅读 · 0 评论 -
从 AST 到 自定义 Babel 插件
本文会将介绍AST抽象语法树的概念和基本原理、AST抽象语法树的遍历和生成、如何使用babel插件进行代码转换以及如何自定义babel插件。实现我们先介绍一下抽象语法树(AbstractSyntaxTree,AST)什么是抽象语法树(AbstractSyntaxTree,AST)?抽象语法树(AbstractSyntaxTree,AST)是源代码语法结构的⼀种抽象表示,它以树状的形式表现编程语⾔的语法结构,树上的每个节点都表示源代码中的⼀种结构。Eslint以及babel都是基于抽象语法树。...原创 2022-07-28 15:39:37 · 647 阅读 · 0 评论 -
面试官问:如何判断一个元素是否在可视区域?
可以理解为将元素看出一个矩形,该对象包含了该矩形的位置、大小信息,可以获得页面中元素的左,上,右和下分别相对浏览器视窗的位置。很多时候,目标元素不仅会随着窗口滚动,还会在容器里面滚动(比如在iframe窗口里滚动)。有时,我们希望某些静态资源(比如图片),只有用户向下滚动,它们进入视口时才加载,这样可以节省带宽,提高网页性能。这样设置以后,不管是窗口滚动或者容器内滚动,只要目标元素可见性变化,都会触发观察器。返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的。...原创 2022-07-27 10:36:14 · 2256 阅读 · 0 评论 -
异步过渡方案—Generator
在使用 前,首先知道 是什么。如果读者有 Python 开发经验,就会发现,无论是概念还是形式上,ES2015 中的 几乎就是 Python 中 的翻版。 本质上是一个函数,它最大的特点就是可以被中断,然后恢复执行。通常来说,当开发者调用一个函数之后,这个函数的执行就脱离了开发者的控制,只有函数执行完毕之后,控制权才能重新回到调用者手中,因此程序员在编写方法代码时,唯一能够影响方法执行的只有预先定义的 关键字。 也是如此,我们也无法控制 的执行,新建一个 后,其状态自动转换为 ,同时开始执行原创 2022-06-30 15:29:47 · 338 阅读 · 0 评论 -
盘点 JavaScript 中类的继承
在 ES5 中,类的继承可以有多种方式,然而过多的选择有时反而会成为障碍,ES6 统了类继承的写法,避免开发者在不同写法的细节之中过多纠缠,但在介绍新方法之前,还是有必要先回顾下ES5中类的继承方式。首先假设我们有一个父类 ,并且在类的内部和原型链上各定义了一个方法:1.1 修改原型链这是最普遍的继承做法,通过将子类的 指向父类的实例来实现:在这种继承方式中, 对象既是子类的实例,也是父类的实例。然而也有缺点,在子类的构造函数中无法通过传递参数对父类继承的属性值进行修改,只能通过修改 的方式进行修原创 2022-06-27 22:26:36 · 325 阅读 · 0 评论