前端技术文章
-
-
CSS步骤计数器实现教程
-
使用CSS计数器创建步骤进度条需三步：1.在父元素用counter-reset初始化计数器；2.在每个步骤元素上用counter-increment递增计数；3.通过::before伪元素的content:counter()显示序号，并结合Flexbox布局、伪元素连接线及类名控制完成/活跃状态样式，最后通过CSS变量和响应式设计优化可维护性与兼容性，该方法语义清晰、无需JavaScript、性能高效且易于维护。
-
文章 ·
前端
| 2个月前 |
CSS
373浏览
收藏
-
-
正则提取版本号技巧分享
-
要用String.prototype.match()提取版本号，需用非捕获分组(?:...)忽略上下文，将目标版本号置于普通捕获组()中，再通过result?.[1]安全获取；多匹配时用matchAll()配合g标志并过滤。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
-
Proxy实现私有字段转发方法
-
无法用Proxy+Reflect完美转发包含私有字段（#field）的类实例，因为私有字段在语法解析阶段即报错，Proxytrap和ReflectAPI均无法触达其访问逻辑。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
-
JavaScript顶层await使用方法详解
-
顶层await允许在ES模块顶层直接使用await，无需包裹在async函数中。它使模块能暂停执行直至异步操作完成，适用于动态配置加载、条件导入和资源预初始化。需使用.mjs文件或设置"type":"module"，并在支持的环境（如Node.js14.8+、现代浏览器）中运行。模块变为异步后会阻塞导入者，应避免滥用以防影响性能。主流浏览器和Node.js已广泛支持该特性。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
-
TDD开发流程详解：JavaScript实战指南
-
TDD通过“红-绿-重构”循环提升代码质量：先写失败测试，再写最简实现，最后优化结构；配合Jest等工具搭建环境，编写纯函数与模块化代码，确保可测性；以add函数为例，从测试出发逐步实现功能，验证逻辑正确性，增强项目稳定性与维护性。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
-
SassMap统一管理内边距技巧分享
-
直接写padding:16px会埋下维护雷，因随意数值导致设计系统脱节、重构漏改；应通过Sassmap统一管理间距值并封装容错函数spacing()确保可维护性。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
-
HTMLBase64图片嵌入方法解析
-
Base64嵌入仅在消除路径依赖、生成单HTML文件时有效，非性能优化；会使HTML体积增33%，无法缓存，且大图（>10KBPNG/>5KBJPEG）导致主线程阻塞。
-
文章 ·
前端
| 2个月前 |
373浏览
收藏
-
