- 博客(17)
- 收藏
- 关注
原创 js事件循环机制
JavaScript事件循环机制通过执行栈、事件表和任务队列协调异步任务。同步任务直接执行,异步任务注册后进入任务队列。任务队列分为宏任务和微任务,微任务优先执行。渲染发生在宏任务和微任务执行完毕后,受浏览器状态影响可能跳过渲染(掉帧)。关键API如requestAnimationFrame在渲染前调整DOM,IntersectionObserver监测元素可见性,requestIdleCallback利用空闲时间执行低优先级任务。整个机制确保单线程JS能高效处理用户交互和渲染任务。
2025-09-09 12:04:33
332
原创 CompositionInput
这是一个增强型的输入框组件(CompositionInput),主要用于处理带输入法组合输入(如中文、日文等需要拼音 / 假名输入的场景)的搜索功能,同时具备防抖(debounce) 特性。它解决了普通输入框在处理复杂输入法时可能出现的输入值闪烁或搜索触发时机不准确的问题。
2025-08-25 13:19:34
227
原创 封装input组件
摘要:该React输入框组件支持两种尺寸(regular/large),具备状态管理功能(禁用/错误/输入状态),可添加左侧搜索图标和右侧清除按钮,支持自定义单位显示。组件使用class-variance-authority管理变体样式,通过绝对定位实现图标垂直居中,并采用Tailwind CSS进行样式处理,需注意样式优先级问题。输入框在不同状态下(正常/禁用/错误)有对应的视觉反馈,且支持自定义类名和样式覆盖。
2025-08-25 13:06:09
128
原创 自定义滚动加载列表
摘要 本文介绍了一个React滚动加载组件ScrollLoadList的实现。该组件通过监听滚动事件,在用户滚动到接近底部时自动加载更多数据。核心功能包括:1) 使用onScroll事件监听滚动;2) 通过比较scrollTop + clientHeight + threshold与scrollHeight判断是否到达底部;3) 使用isLoading和isFinished状态控制加载过程和完成状态。组件支持自定义加载中和完成状态的UI,并提供了初始自动加载功能。示例展示了如何通过模拟异步请求实现分页加载,
2025-08-18 12:04:36
180
原创 自定义可折叠水平列表组件
FoldList组件摘要 FoldList是一个响应式折叠列表React组件,能够根据容器宽度自动计算并折叠超出的列表项。主要功能包括: 动态布局计算:通过监听容器宽度变化,计算可见项数量 折叠功能:超出宽度的项会被收集到下拉菜单中 响应式设计:自动适应窗口大小变化 样式定制:支持自定义可见项和隐藏项的样式类 关键实现: 使用useRef获取DOM元素尺寸 通过getComputedStyle获取元素完整样式信息 监听resize事件并使用requestAnimationFrame优化性能 采用Headle
2025-08-18 11:38:46
220
原创 tailwindcss 实现自定义主题切换
摘要:本文介绍使用Tailwind CSS实现多主题切换的方案。核心原理是通过html标签的data-theme属性切换不同主题文件,各主题文件中定义相同变量名但不同色值。具体步骤包括:1)配置Tailwind环境;2)创建多个主题CSS文件(如green.css/orange.css);3)建立主题变量映射表;4)扩展Tailwind配置;5)实现React上下文管理主题状态;6)通过useTheme hook控制主题切换。方案利用CSS变量和属性选择器,无需修改样式代码即可实现主题色无缝切换。(149字
2025-08-18 00:51:31
467
原创 node-red中直接使用node-red-dashboard源码
有时候我们需要对node-red-dashboard二次开发,所以不能直接使用npm install 安装node-red-dashboard的。思路:将node-red-dashboard中源码链接到node-red的工作目录中。1. 在node-red-dashboard中生成链接。2. 在工作区中绑定上步骤生成的链接。
2025-04-28 13:38:33
352
原创 codewave如何在js代码中使用前端变量
但是js块中直接使用this.chat_history.push(this.question)无法实现该功能,因为直接使用this无法引用前端全局变量,需要通过this.$global.frontendVariables。我的需求是需要在点击按钮后,在js代码块中实现chat_history列表中追加question文本。
2024-07-26 13:44:21
295
原创 go语言之defer陷阱-指针参数
在第一段代码段中,循环初始时声明了i变量,在之后的循环中i变量的地址固定不变,改变的只是i的内容,因此传递给defer的参数&i(i的地址)都是同一个,地址指向的结果都是一样的,所以结果打印的都是最后一个i的内容,也是同一个。在第二段代码中,每次循环都会重新定义一个变量x,所以x的地址是会改变的,x地址指向的内容是此次循环中i的值,所以传递给defer中的参数&x(x的地址)都是不一样的,地址指向的值也是不一样的,所以打印结果不一样。可以看到,两个代码段唯一的区别就是第二段代码多了一行。
2023-11-28 18:36:33
179
原创 Neo4j---报错Invoke-Neo4j : Could not find java at xxxx
因为jdk版本与neo4j版本不对应,这里我需要更换jdk。初始为jdk14,我的neo4j版本为4.4.27,需要更换为jdk11.当我下载好jdk11,并配置好jdk环境之后,neo4j竟然没有使用jdk11,仍旧使用jdk14.出现以下错误:查看jdk环境。
2023-11-08 19:46:00
2246
4
原创 C++ compilation of rule ‘//tensorflow/python:bfloat16_lib‘ failed (Exit 1)
bazel编译tensorflow遇到的坑
2023-10-14 12:17:58
407
1
原创 在wsl中配置GPU环境-从零开始
1.可以使用命令查看wsl版本2.注意版本匹配3.在Microsoft Store中安装ubuntu-18.04。
2023-10-09 20:44:36
1339
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅