前端技术文章
-
从 envPrefix、envDir、--mode、MODE 与 NODE_ENV 的区别入手，定位 Vite 环境变量不生效、读到旧值或误用生产配置的原因，并给出安全验证清单。196 收藏 -
本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 innerHTML 的正确用法、事件委托实践、DOM 插入时机控制及常见陷阱规避。 本文详解如何通过原生 Ja vaScript 安全、高效地动态创建并插入 HTML 元素，涵盖 `innerHTML`191 收藏 -
用户连续点击提交按钮，常见结果是重复请求、重复订单或失败后无法恢复。本文从 HTML formdata 事件切入，拆开提交锁、请求取消、失败恢复和键盘回车的边界，给出可核对的前端实现。190 收藏 -
从输入事件顺序、中文输入法组合态和浏览器 undo 栈三个角度，排查表单撤销失效，并给出可验收的实现边界。186 收藏 -
用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。185 收藏 -
ResizeObserver 循环通常来自回调读到元素尺寸后又写回影响布局的样式。本文用最小示例说明如何定位反馈环，并通过 requestAnimationFrame、期望值守卫和拆分观察目标让布局稳定收敛。185 收藏 -
Navigation API 已在 2026 年进入 Baseline。本文用最小路由示例讲清 navigate 统一拦截、同源边界、加载失败与 History API 渐进回退。183 收藏 -
用一个受限页面的登录重定向场景，讲清 Navigation API 的 precommitHandler、handler、committed 与 finished 的执行边界，以及旧浏览器降级策略。183 收藏 -
接口本质上是一组抽象方法的声明，可以把它理解为若干方法特征的集合。这些方法本身并不提供具体实现，而是交给具体的类去完成。这样一来，第三方只需要面向这组抽象方法进行调用，至于最终由哪个具体类来执行对应逻辑，则由实现方负责。 TypeScript 接口定义如下： interface interface_181 收藏 -
解释 structuredClone 的 transfer 列表为什么会让原 ArrayBuffer 进入 detached 状态，并给出 byteLength、TypedArray 视图和生命周期管理的排查方法。178 收藏 -
Vite 的 import.meta.glob 不是运行时目录扫描。本文用路径模式、负模式和 import/query 等选项收窄构建时收集范围，并说明字面量、懒加载和 base 的边界。175 收藏 -
CSS 响应式规则不必二选一：依赖浏览器视口或设备偏好时用 media query，依赖组件祖先容器宽度时用 container query。本文用最小 CSS 片段和决策表说明两者的选择边界。173 收藏 -
URLPattern 可以把可选语言前缀和资源 ID 放进同一个 pathname 规则：用 {/:lang}? 让语言段连同斜杠一起可选，再用 :id(\d+) 限制并捕获数字 ID。本文给出 test()、exec() 写法、边界检查和浏览器兼容建议。173 收藏 -
文章 · 前端 | 3星期前 | 前端 · 浏览器 · javascript · css · 交互体验 · CSS过渡 dialog popover CSS @starting-style 首次显示动画
元素第一次进入页面或从 display:none 变为可见时，普通 transition 没有起始帧，popover 和 dialog 尤其容易出现硬切。CSS @starting-style 可以补上首次显示状态，但仍要处理 overlay、关闭动画、浏览器降级和 prefers-reduced-motion。171 收藏 -
Vue 修改响应式数据后，DOM 不会立刻同步完成。本文用 nextTick 和模板 ref 说明如何在更新后读取高度，并区分图片、字体等后续布局变化。171 收藏