前端技术文章
-
用原生 Popover API 做一个可点击外部关闭的帮助菜单，说明 popover=auto、beforetoggle 与 toggle 的职责差异，并用键盘焦点和 Esc 关闭行为完成验收。256 收藏 -
用 CSSStyleSheet 构造共享样式，通过 adoptedStyleSheets 挂载到多个 ShadowRoot，并验证 replaceSync 更新、文档归属与兼容边界。365 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · 自定义元素 Web Components Custom Elements customElements.define connectedCallback
自定义元素已经出现在 HTML 中时，脚本晚到仍可通过 customElements.define 完成升级；真正容易出问题的是重复注册、connectedCallback 多次触发和元素尚未连接时的初始化。本文用 price-badge 示例拆开升级时机、生命周期和可回退的注册写法。104 收藏 -
长段落最后只剩几个字时，CSS text-wrap-style: pretty 可以让浏览器优先减少孤行，但它比普通换行更耗计算。本文从标题、正文和 contenteditable 三种场景拆开 pretty 与 balance 的边界，并给出兼容写法与检查方法。309 收藏 -
当卡片标题、正文和按钮高度不一致时，CSS subgrid 可以让嵌套卡片共享父级网格轨道。本文用一组商品卡片拆开 grid-template-rows: subgrid 的生效条件、代码改法、@supports 回退与常见边界。474 收藏 -
用 HTML inert 配合 dialog 和 HTMLElement.inert 锁住模态框背后的页面，解释焦点、点击与无障碍树的真实变化，并给出可验收的回退写法。398 收藏 -
用一个可复现的无限列表场景，拆解 IntersectionObserver 的 rootMargin、threshold、unobserve 与 disconnect，避免滚动监听重复触发和组件卸载后的残留回调。196 收藏 -
WebGPU 的计算结果不会自动出现在 JavaScript 里：本文用 output 与 stagingBuffer 两个 GPUBuffer，串起 copyBufferToBuffer、mapAsync、getMappedRange、unmap，并补上 GPUDevice.lost 的恢复边界。381 收藏 -
搜索框连续输入时，旧请求可能晚于新请求返回并覆盖结果。本文用 AbortController 取消上一请求，配合请求序号和状态复原，收口竞态并给出可运行的验证示例。207 收藏 -
文章 · 前端 | 1个月前 | 前端 · 路由 · javascript · 兼容性 · 嵌套路由 JavaScript URLPattern URLPattern groups URLPattern test 浏览器 API
用 JavaScript URLPattern 匹配 /:space/:project/:page 这样的嵌套路由，先用 test 判断是否命中，再从 pathname.groups 取参数，并通过特性检测为旧浏览器保留回退路径。445 收藏 -
用 structuredClone 复制前端表单草稿时，普通对象、File 和不可序列化字段的行为并不相同。本文从真实的编辑草稿场景出发，拆开克隆、转移与 DataCloneError 的边界，并给出可复测的检查方法。213 收藏 -
长列表加载更多时，IntersectionObserver 可能因哨兵节点持续可见而重复触发。本文用 sentinel、entry.isIntersecting、loading 和 loadMore 收口一次请求，处理快速滚动与末页边界。106 收藏 -
CSS shape() 可以把响应式卡片的裁切路径写成相对尺寸，让 clip-path 在容器变化时保持比例；本文用真实 CSS 片段拆开坐标起点、line/curve 命令、百分比伸缩和 @supports 回退验收。160 收藏 -
文章 · 前端 | 1个月前 | html · 前端 · javascript · 浏览器API · dialog close cancel HTMLDialogElement requestClose
用原生 dialog 做确认弹窗时，requestClose() 能把 Esc、关闭按钮和脚本关闭统一到 cancel 与 close 两个事件，并保留 returnValue 的结果语义。163 收藏 -
中文搜索框不能靠空格切词。本文用 JavaScript Intl.Segmenter 的 word 粒度保留 segment、index 与 isWordLike，再把字符位置映射到高亮范围，处理中文、英文和表情符号的边界。111 收藏