前端技术文章
-
Intl.Segmenter 可以根据 locale 和 granularity 按 grapheme、word 或 sentence 切分文本。本文用统一函数处理中文、日文和带空格语言，并说明 isWordLike、UTF-16 index、能力探测与保守回退。432 收藏 -
文章 · 前端 | 1个月前 | websocket · javascript · 异步编程 · JavaScript websocket AbortSignal 异步迭代器 Promise.withResolvers EventTarget
Promise.withResolvers 适合由外部事件决定完成时机的异步桥接：一次性 DOM 事件、带取消和超时的等待，以及将持续事件源改造成异步迭代器。本文给出监听器清理、解析器权限、消息队列、错误通道与兼容回退的生产写法。431 收藏 -
white-space-collapse 把空白折叠从 white-space 中拆出来，适合处理用户输入、代码片段和多行说明。本文用最小示例解释 collapse、preserve、preserve-breaks、preserve-spaces、break-spaces 的差异，并给出旧浏览器降级与验收方法。430 收藏 -
实现模态层时，inert 负责让背景区域真正停止交互，dialog 与 aria-modal 负责表达语义，关闭时再把焦点还给触发按钮，避免键盘用户迷路。430 收藏 -
用Lit组件示例区分attribute命名、类型转换和property反射，说明camelCase默认映射、布尔attribute语义及对象属性入口，帮助组件作者为HTML和JavaScript调用方设计清晰接口。429 收藏 -
这篇教程不会只停留在零散知识点上，而是借助一个完整的项目案例，把 TypeScript 的各种特性系统地串联起来、用起来。 从项目搭建一路讲到真实开发场景，把 TypeScript 在实际项目里到底怎么用，完整地呈现出来。 项目实战：任务管理系统 前端 (React + TS) Vite + Rea428 收藏 -
用一个可运行的 Web Streams 示例拆开 TransformStream 背压：看清 ReadableStream、writableStrategy 和 WritableStream 之间的队列边界，并处理 flush 与 abort。428 收藏 -
用 position-try-fallbacks 为 CSS 锚点浮层安排有优先级的回退候选，理解逗号与空格的区别，并处理双轴翻转和兼容降级。427 收藏 -
文章 · 前端 | 6天前 | 前端 · javascript · 浏览器API · JavaScript ResizeObserver ResizeObserverEntry contentBoxSize inlineSize blockSize
用 JavaScript ResizeObserver 读取 contentBoxSize 时，先从回调 entry 取数组第一项，再根据 writing-mode 读取 inlineSize 和 blockSize；同时给旧实现保留单对象与 contentRect 回退，避免尺寸读错或下标报错。427 收藏 -
多列卡片的标题和正文长度不同会让按钮上下错位。本文用 CSS subgrid 继承父网格行轨道，对齐嵌套卡片的标题、内容和操作区域，并给出 gap、响应式和兼容降级方案。426 收藏 -
IntersectionObserver 开启 trackVisibility 后，浏览器不只判断元素是否进入 root，还要判断遮挡、透明度、滤镜和变换等可见性条件。本文解释 delay 为什么必需、100 毫秒下限如何处理，以及它与普通防抖的区别。426 收藏 -
Lit 的 updateComplete 适合等待当前组件完成一次响应式更新，但默认不等待子组件。本文从事件派发、DOM 测量和测试三个场景说明使用方式，并比较 getUpdateComplete、requestAnimationFrame 与 ResizeObserver 的边界。425 收藏 -
CSS Masonry 仍处于早期开发阶段，实际项目应先用稳定的 CSS Grid 或多列方案兜底，再逐步验证列数、图片尺寸、阅读顺序和浏览器支持。本文用一组可回退的卡片布局说明列高差、图片加载和无障碍顺序的处理边界。424 收藏 -
fetch 的 catch 不能单独证明是 CORS 还是断网。本文用 Response.ok、AbortError、Console、Network 和服务端日志建立一套可执行的判断路径。424 收藏 -
前端用 URL.createObjectURL 预览 File 或 Blob 时，revokeObjectURL 不能机械地立刻调用。本文按图片加载、替换预览、组件卸载和下载链接四种边界，说明什么时候释放对象 URL 才不会让资源提前失效。422 收藏