前言在我编写的在线字典网站中，我碰到了如下一个需求，如下图所示:让我为你叙述这个需求需要做什么。需求分析在 Markdown 中，我们希望能够渲染一个特定的字符（如汉字），并且它会被一个圆圈包围。为了满足这一需求，我们需要做的工作是：使用正则表达式匹配 Markdown 中的特定符号（如：o汉字o）。将匹配到的字符替换...

前言在我编写的在线字典网站中，我碰到了如下一个需求，如下图所示:让我为你叙述这个需求需要做什么。需求分析在 Markdown 中，我们希望能够渲染一个特定的字符（如汉字），并且它会被一个圆圈包围。为了满足这一需求，我们需要做的工作是：使用正则表达式匹配 Markdown 中的特定符号（如：o汉字o）。将匹配到的字符替换...

LRU（Least Recently Used，最近最少使用）缓存算法是一种常见的缓存替换算法。它基于这样一个原则：当缓存空间满时，最久未被使用的数据将会被淘汰。LRU算法的核心思想是：如果一个数据在最近被访问过，那么它应该被优先保留；相反，若某个数据长时间未被访问，它将会被淘汰以腾出空间。

在前端开发中，图片加载不仅仅是一个简单的 img 标签操作，尤其是在复杂的应用中，图片的加载往往涉及到异步操作、缓存策略、错误处理以及资源优化等多个方面，下面，我们将扩展讨论JavaScript中实现图片加载的几种常见方法，并探讨它们的应用场景和优缺点。

在现代编程中，处理超大数字常常会遇到限制，因为大多数编程语言的数字类型在存储较大的整数时可能会溢出。为了解决这一问题，通常采用字符串表示法来处理大数字。在这篇文章中，我们将深入探讨如何通过字符串实现大数字的求和，展示一个简单而有效的 JavaScript 函数。

在公司的项目业务当中，需要基于json-schema实现一个可以可视化编辑器，当前有不错的实现方案，如:json-schema-visual-editor。但事实上，这个交互并不满足于我们需求设计的那样，于是我重新开发了一款json-schema-visual-editor。

以我用typescript实现的轻量高度可配置的消息提示框插件为示例，来详细讲述添加单元测试。市面上有很多测试框架，这里我还是选择比较老牌但也很流行的测试框架jest为示例。

本文，我们将根据前文来实现一个ai聊天对话项目，感受真实的业务。项目技术栈vite---一个前端工程构建工具。antd --- 一个react ui组件库。@ant-design/icons ---- 一个react图标库。mockjs --- 模拟消息对话数据。dayjs --- 一个日期处理库react --- 一个javascript框架。typescript --- javascript的超集。ew-message ...

流式回复的效果就像是打字效果一样，当然与打字效果也有差异，那就是打字效果是一个字一个字的接替出现，而流式效果就是在打字效果的基础上一句话或者一个段落那样接替出现。

在接下来的这个项目中，我们即将使用纯 JavaScript 和 CSS 来创建一个具有动态动画效果的导航栏。这篇文章将详细解析该代码的实现，包括 HTML 结构、CSS 样式、JavaScript 逻辑等方面，帮助你理解每一个步骤和实现思路。文章内容将逐步拆解，涵盖从页面结构、样式设计到功能实现的各个细节。

随着前端开发技术的不断发展，SCSS（Sass）作为一种流行的CSS预处理器，已经在众多前端项目中得到了广泛应用。其优雅的语法、强大的功能以及灵活的模块化机制，使得开发者能够更加高效地构建和管理样式表。然而，随着SCSS的不断迭代更新，我们也迎来了一个重要的变革：@import语法即将被废弃。虽然@import曾经是SCSS的核...

匆匆忙忙中新的一年到来，忽然有所感受，回首过去如果能够有所告别或者总结的事情那当然是最好的。人这一生总要做点有意义的事情（对他人或对自己有益的事情），也不白白浪费自己来这世界走一遭。

前言为了入门react，我特意花了10分钟写了一个todo-list,它长这样:我将之拆分成如下模块:图标输入框与添加按钮列表展示待办事项事项索引事项详情编辑与删除这其中还包含了一些隐藏的操作，例如输入待办事项，按下enter键也可以实现编辑或者确定的效果，点击待办事项还可以弹出一个消息提示框，展示待办事项详情，点击删...

摘要：ahooks 是一个可靠的 React Hooks 库。本文将详细介绍 useSafeState 这个 Hook，帮助您理解其工作原理和应用场景。官方地址：ahooks useSafeState

前言ps: 本文使用ant组件库和react技术栈，因此假定你导入了这些依赖包。如果让你实现一个显示当前日期的定时器组件，你会怎么做？如下图所示:初步实现探索碰到这样的需求，你是不是会使用定时器来实现，如下所示: {代码...} 可以看到，我们使用到了useEffect，在里面使用setInterval方法来不停的设置值，从而达到实现定...

Excuse me? 产品让我实现一个值班表产品经理让我实现一个值班表，然而我找遍了开源项目，都没有找到符合设计的交互需求，没有办法，我只好自己实现了一个值班表。如下图所示:ps: 值班表的实现采用 react.js 技术栈，所以也将以 react.js 为主来讲解。实现模块分析根据交互图，我将整个值班表拆分出了如下模块:标题用户搜...

前言在我重新复习我创建的代码段集合网站，我复习到了桶排序算法的实现，它的代码如下所示: {代码...} 咋一看代码实现思路，我并不是很清楚为什么这样写。我产生了如下几个疑惑点:为什么要取最小值和最大值?Math.floor((max - min) / size) + 1,这是一个公式，代表什么意义？并且这个公式如何得来的？Math.floor((val - ...

在 React 中，每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中，而是使用 <Fragment> 来保持 DOM 整洁。

八. 测试 react 代码54. 使用 React 测试库有效地测试你的 React 组件想要测试你的 React 应用吗？请务必使用 @testing-library/react。你可以在此处找到一个最基本的示例。55. React 测试库：使用测试演练场轻松创建测试用例难以决定在测试中使用哪些测试用例？考虑使用测试演练场从组件的 HTML 快速生成测试用例。以下...

文章概要:为什么我们需要在 React 中访问 DOM?refs 如何帮助我们实现访问 DOM?什么是 useRef、forwardRef 和 useImperativeHandle 钩子?如何正确使用它们?

以下是个人收集总结的一些使用 react 的小技巧第二篇。五. 高效的状态管理27. 永远不要为可以从其他 state 或 props 派生的值创建新的 statestate 越多 = 麻烦越多。每个 state 都可能触发重新渲染，并使重置 state 变得麻烦。因此，如果可以从 state 或 props 中派生出值，则跳过添加新的 state。不好的做法：filteredU...

在 React 中，每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中，而是使用 <Fragment> 来保持 DOM 整洁。

这是一个每天更新一题的文章，欢迎评论区网友提供题目和答案，不断更新中，记录下来，方便学习，参考答案如有问题，敬请批评指正，废话不多说，开始进入正文。

众所周知，JSON.parse方法用于将一个json字符串转换成由字符串描述的 JavaScript 值或对象，该方法支持传入2个参数，第一个参数就是需要被转换的json字符串，第二个参数则是一个转换器函数(reviver,也叫还原函数)，这个函数会针对每个键/值对都调用一次,这个转换器函数又接受2个参数,第一个参数为转换的每一个属性名，第...

事情是这样的，后端返回类似这样的数据格式`cshjdkvghsv<xxx xx='xxx' />sdhjkshfv'<xxx xx='xxx'></xxx>'sdhgjdsk,然后需要前端将字符串中的xxx`解析出来并渲染到页面中，还要保证渲染顺序，其中xxx可能是一个自定义的react组件名，也有可能是一个html元素标签名，而xx则可能是属性名,'xxx'则是属性...

编写可维护性高的 JavaScript 代码非常重要，因为大多数开发者在实际开发中都不会从零开始自己写代码，这种场景是很少的，通常都是会去维护别人写的代码，让自己的代码变得容易维护，也可以保证其他开发者能够更好的完成开发工作，也能让自己以后得维护变得更轻松。

本文参与了SegmentFault 思否 2023 年度有奖征文活动，欢迎正在阅读的你也加入。2023 年终总结又是这样匆匆忙忙的度过了一年，今年付出了很多，也收获了不少，接下来，我想盘点一下我今年所做的付出与收获。收集曾经的作品我收集了我曾经写的诗词，小说等作品，虽然写的不怎么样，但也是值得看看，留作纪念，网站地址我...

观察题目，其实就是将两个联合类型的值组合成接口，其中第一个联合类型的值作为属性，第二个联合类型的值则作为属性值，并且两者的属性顺序是一一对应的。下面跟着我一起来分析，通过这道题，我们能理解到 ts 的不少知识点，不信继续往下看。

有关隐藏元素的方式 display: none 与 visibility:hidden 的区别，这可以说是 css 面试题当中最常见的一道题了。相信大多数开发者被问到的第一答案就是:display: none 不占据空间，visibility: hidden 占据空间。但实际上两者之间的区别并不只是不占据空间这么简单，且听我娓娓道来。

js没有相关接口可以准确获取安卓手机软键盘的高度，这样也就无法处理当软键盘弹出时，能够将输入框顶上去，并且与软键盘完美的贴合，比如输入框在最底部的场景，此时页面滚动高度不够，因此无法准确的滚动到底，使得软键盘将输入框顶上去并与之完美的贴合。