前端技术文章
-
本文用 URLSearchParams 说明重复查询参数的构造、读取、覆盖和序列化方法，重点区分 append、get、getAll、set 的语义，并解释对象构造与 URL 编码的常见误区。499 收藏 -
用 aspect-ratio 固定媒体卡片的宽高关系，再配合 object-fit 处理不同来源图片，让网格列宽变化、图片加载和长标题都不会破坏卡片比例。498 收藏 -
JavaScript 可以把 SVG path 的 d 属性交给 new Path2D 构造 Canvas 路径对象，再复用于 fill、stroke 和命中判断。本文说明输入边界、绘制复用、坐标变换与路径副本的职责分工。496 收藏 -
用 scroll-marker-group、::scroll-marker 和 :target-current 为横向滚动列表生成可聚焦导航标记，说明 before/after 的顺序差异、可访问名称和兼容降级边界。496 收藏 -
Vue 3 中直接解构 reactive 对象的 primitive 属性会断开响应式连接。本文用排障手册的方式解释原因，并给出 toRefs、toRef 与保留 state.field 三种处理选择。496 收藏 -
SVG 的 feGaussianBlur 会向图形边界外扩散；如果 filter 区域太小，扩散结果会在区域边界被裁剪。本文说明默认区域、filterUnits 和排查方法。495 收藏 -
用 unknown 接住 API JSON，通过自定义类型谓词完成运行时校验，让 TypeScript 安全收窄响应对象并复用到数组过滤。493 收藏 -
使用 Fetch 的 Response.body 逐块读取文本时，应先判断状态和 body，再通过 getReader 获取字节块，用带 stream 选项的 TextDecoder 保留跨块字符，并处理取消、异常与 reader 锁释放。492 收藏 -
使用 AbortSignal.any 合并用户、页面与超时取消来源，解释已取消输入、reason 传播、请求级控制器和计时器清理，并说明联合取消不能替代服务端回滚。490 收藏 -
浏览器端要把持续产生的文本压缩成 gzip，可以先用 TextEncoderStream 转成 UTF-8 字节，再用 CompressionStream("gzip") 压缩。本文给出从字符串流到 Uint8Array 的完整管道，并解释读取结束、异常传播和上传时的 Content-Encoding 边界。489 收藏 -
用 Web Components 的命名 slot 说明 HTMLSlotElement.assignedElements() 的直接读取、flatten 展开、fallback 内容和 slotchange 重读方式。488 收藏 -
讲清 Document.adoptNode 如何把外部文档节点转移到当前文档、为什么 parentNode 会暂时为空，以及它和 importNode 在移动与复制上的区别。486 收藏 -
navigator.locks 可以让同一来源的多个标签页共享一个命名锁。本文用资源刷新示例说明怎样把缓存检查、网络请求和写入放进同一个异步临界区，并比较 ifAvailable、signal、query 与 steal 的适用边界。486 收藏 -
Service Worker 更新并不等于页面立即切换。本文用 skipWaiting、clientsClaim 和 controllerchange 说明如何控制新 Worker 的激活与页面接管时机，避免新旧缓存混用。486 收藏 -
Import Maps 可以把浏览器模块中的相对路径统一成稳定别名。本文从 imports、路径前缀、scopes 和加载顺序入手，给出可迁移的 HTML 示例与回归清单。486 收藏