前端技术文章
-
文章 · 前端 | 1天前 | 前端 · javascript · 异步编程 · JavaScript Promise.all Array.fromAsync 异步可迭代对象 AsyncIterable for await of
Array.fromAsync 可顺序读取异步可迭代对象并返回数组 Promise；本文用分页生成器讲清映射、错误、内存边界及与 Promise.all 的选择。236 收藏 -
文章 · 前端 | 1个月前 | javascript · 前端工程 · AbortSignal 事件订阅 JavaScript Observable 响应式清理 addEventListener signal
不依赖尚未普遍可用的 Observable API，使用 AbortController 和 AbortSignal 统一管理事件监听、异步请求与订阅清理，讲清生命周期、重复取消和兼容回退。236 收藏 -
用原生 Popover API 做一个可访问的无 JavaScript 弹出层，覆盖 popover、popovertarget、light dismiss、焦点行为与不支持浏览器的降级方案。235 收藏 -
从输入组件重构案例说明为什么不应默认把 DOM Event 传到业务层，并给出语义回调、原生事件保留边界、TypeScript 示例和测试判断清单。234 收藏 -
文章 · 前端 | 3星期前 | javascript · Web Components Custom Elements attributeChangedCallback observedAttributes
attributeChangedCallback 不触发时，先检查 observedAttributes 是否监听了正确的 attribute，再确认代码改的是 DOM attribute 而不是只改 JavaScript property。本文用最小示例说明属性反射、初始值和回调重渲染的边界。233 收藏 -
模板字面量类型基于字符串字面量类型构建，支持通过插值生成新的字符串类型。 这让 TypeScript 能够对字符串进行更精确的类型检查，适用于事件名、路径、类名等场景。 模板字面量类型工作原理 输入类型 type Event = "click" | "focus" type Method = "ge233 收藏 -
本文介绍一种基于递归的 TypeScript 方法，为具有双向嵌套关系（QuestionModel 与 ResponseModel 互相引用）的 JSON 数据自动添加符合路径语义的 id 字段，确保每个节点 ID 唯一、可读且反映其在树中的完整位置。 这段内容要讲的，其实是一种基于递归的 Type232 收藏 -
前端用 fetch 下载文件时，读取 Content-Disposition 中的 filename* 或 filename，再结合 Blob URL 和 a.download 保留后端文件名；跨域场景还要暴露响应头。231 收藏 -
用一个原生 HTML dialog 表单说明 showModal、close、returnValue 与 cancel 事件的关系，给出提交、取消和重复打开时的可靠状态处理方式。229 收藏 -
文章 · 前端 | 1天前 | html · 前端 · javascript · slot Web Components 服务端渲染 Declarative Shadow DOM shadowrootmode Shadow Root
服务端把 template shadowrootmode=open 作为宿主的直接子节点输出，浏览器解析 HTML 时即可建立 Shadow Root；客户端升级组件时复用已有根，只补事件和状态，而不是再次创建内部结构。227 收藏 -
Popover API 无需手写 document 点击监听：给浮层设置 popover=auto，并用 popovertarget 按钮控制，浏览器会在点击外部或按 Esc 时执行 Light Dismiss。本文同时说明 manual 模式、菜单项关闭和事件同步边界。225 收藏 -
文章 · 前端 | 1个月前 | 前端 · css · display @starting-style popover CSS transition-behavior overlay top-layer
Popover 打开时能淡入，关闭时却瞬间消失，通常不是 opacity 写错，而是 display 和 overlay 提前切换。本文用最小示例说明 @starting-style、transition-behavior: allow-discrete、display 与 overlay 如何共同保住离场动画，并给出兼容降级边界。225 收藏 -
用 AbortSignal.timeout 为 fetch 设置可解释的超时边界，区分 TimeoutError、AbortError 与网络错误，并处理响应体读取阶段的取消和兼容降级。223 收藏 -
用同文档 View Transition API 为 SPA 页面切换建立稳定的元素对应关系，覆盖 startViewTransition、view-transition-name、伪元素动画、异步更新与回退边界。222 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏