快来看看这个提效脚本-一键自动优化项目中 Lodash 导入方式

6 月 5 日
阅读 4 分钟
312
在现代 JavaScript 项目中,Lodash 是一个非常流行的工具库,它提供了很多高效的工具函数,帮助开发者简化代码和提高开发效率。然而,由于 Lodash 函数库庞大,一次性导入整个库可能会导致较大的文件体积,影响前端应用的加载速度,正因为如此,lodash也提供了lodash-es的版本,旨在优化lodash工具函数的使用,真正做到...
封面图

Signal是个什么东东?必须得了解一下

6 月 5 日
阅读 6 分钟
318
随着 Web 开发的复杂度不断增加,尤其是在构建动态和响应式应用时,管理和共享状态变得越来越重要。传统的状态管理工具,如 Redux 或 Vuex,虽然可以很好地处理状态,但它们往往需要较为复杂的配置,且在某些情况下可能不如直接、简洁的机制高效。在这种背景下,Web 开发中越来越多的开发者开始关注 Signal 状态管理。
封面图

分享一些实用的PHP函数(对比js/ts实现)(1)

6 月 5 日
阅读 8 分钟
430
使用数组的filter方法对数组执行给定的函数,然后使用count方法获取执行后的结果,再和count方法获取未执行filter方法的结果进行比较。
封面图

为了学会js位运算,我熬夜怒肝了一个位运算大师平台

6 月 5 日
阅读 4 分钟
385
有一天,无意中复习到js的位运算知识点,通过js文档站点,我就在想一个问题,干巴巴的文字教程肯定是不够吸引人阅读学习的,也没人会花时间去研究这个知识点,所以我就在想有没有这样一个平台,将位运算制作成互动式的游戏或者教程,让人相当于玩游戏一样去学习js位运算的知识点,于是就有了这个平台的诞生。
封面图

自动化按需导入组件库的工具rust版本完成开源了

5 月 8 日
阅读 5 分钟
1.6k
当我为每个Vue项目使用ui组件库的时候,都会使用按需导入的方式来使用ui组件库。但是每次按需导入,不可避免的就需要做以下三步。我们以element plus ui组件库为例。
封面图

这个提升效率宝藏级工具一定要收藏使用

5 月 8 日
阅读 2 分钟
1.4k
自动化按需导入工具是一个命令行工具,用于自动配置 Vue 项目中组件库的按需导入。它可以帮助你快速设置 Element Plus、Ant Design Vue 等组件库的按需导入,无需手动修改配置文件。
封面图

手写一个动态海洋和天空效果的vue hooks

5 月 8 日
阅读 8 分钟
2.1k
常规的后台管理系统登陆页面可能就只是一个简单的背景页面,这不太好看,接下来让我们来使用three.js来实现一个动态的海洋和天空效果当作背景,这样的效果总会让人眼前一亮,如下图所示。
封面图

好消息,好消息,前端可以使用免费的ai模型构建一个ai聊天会话了

5 月 8 日
阅读 2 分钟
815
前言前往openrouter ai申请一个免费的 key,然后使用ew-chat我写的这个ai聊天,就可以完成一个聊天会话网页。在线地址。在线地址由于没有api\_key,所以询问问题会报错。效果如下图所示:聊天会话的数据都使用永久会话存储在本地,以下是这个聊天会话的详细功能介绍。说明:这个项目是使用trae编辑器帮忙编写,然后本人再...
封面图

你可能不知道的vitepress扩展-2

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

你可能不知道的vitepress扩展-1

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

LRU算法,你别跑,我就要吃透你

4 月 16 日
阅读 7 分钟
4.9k
LRU(Least Recently Used,最近最少使用)缓存算法是一种常见的缓存替换算法。它基于这样一个原则:当缓存空间满时,最久未被使用的数据将会被淘汰。LRU算法的核心思想是:如果一个数据在最近被访问过,那么它应该被优先保留;相反,若某个数据长时间未被访问,它将会被淘汰以腾出空间。
封面图

你可能不知道的图片加载相关知识

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

js实现大数字求和

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

花了半天时间,我开发了一个json-schema-editor-visual

3 月 4 日
阅读 7 分钟
1.1k
在公司的项目业务当中,需要基于json-schema实现一个可以可视化编辑器,当前有不错的实现方案,如:json-schema-visual-editor。但事实上,这个交互并不满足于我们需求设计的那样,于是我重新开发了一款json-schema-visual-editor。
封面图

一起来学习如何写单元测试

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

一起来动手实现一个ai聊天对话

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

前端实现ai会话聊天的核心原理三步篇

2 月 5 日
阅读 13 分钟
2.8k
流式回复的效果就像是打字效果一样,当然与打字效果也有差异,那就是打字效果是一个字一个字的接替出现,而流式效果就是在打字效果的基础上一句话或者一个段落那样接替出现。

一个有趣的效果--动态生成动画导航

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

SCSS即将废弃`@import`,以前的`@import`该何去何从?

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

我的2024-人生须为有益事

2 月 5 日
阅读 4 分钟
897
匆匆忙忙中新的一年到来,忽然有所感受,回首过去如果能够有所告别或者总结的事情那当然是最好的。人这一生总要做点有意义的事情(对他人或对自己有益的事情),也不白白浪费自己来这世界走一遭。
封面图

10分钟入门react-写一个todo-list

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

useSafeState-保障 React 状态的安全性

1 月 17 日
阅读 4 分钟
735
摘要:ahooks 是一个可靠的 React Hooks 库。本文将详细介绍 useSafeState 这个 Hook,帮助您理解其工作原理和应用场景。官方地址:ahooks useSafeState
封面图

你可能不知道的antd倒计时组件用法

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

Excuse me? 产品让我实现一个值班表

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

真是惭愧,直到今天,我才搞懂桶排序算法

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

100个React最佳实践小技巧

2024-10-11
阅读 67 分钟
15.6k
在 React 中,每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中,而是使用 <Fragment> 来保持 DOM 整洁。
封面图

一些react使用小技巧(下)

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

深入浅出React中的refs

2024-09-26
阅读 9 分钟
6.4k
文章概要:为什么我们需要在 React 中访问 DOM?refs 如何帮助我们实现访问 DOM?什么是 useRef、forwardRef 和 useImperativeHandle 钩子?如何正确使用它们?
封面图

一些react使用小技巧(中)

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

一些react使用小技巧(上)

2024-08-28
阅读 25 分钟
2.9k
在 React 中,每个组件必须返回单个元素。不要将多个元素包装在 <div> 或 <span> 中,而是使用 <Fragment> 来保持 DOM 整洁。
封面图