前端技术文章
-
Web Locks 的 query() 不会抢锁或释放锁，只返回当前 origin 的状态快照。本文用 held、pending、name、mode 和 clientId 拆解查询结果，并给出安全上下文、异常处理和排障记录方法。284 收藏 -
Intl.Segmenter 可以根据 locale 和 granularity 按 grapheme、word 或 sentence 切分文本。本文用统一函数处理中文、日文和带空格语言，并说明 isWordLike、UTF-16 index、能力探测与保守回退。432 收藏 -
用 keyof 把对象键收束为字面量联合，再用 K extends keyof T 与 T[K] 绑定动态属性读取的输入和返回值；同时说明可选属性、运行时字符串和索引签名的边界。432 收藏 -
以嵌套对象和两个共用缓冲区的视图为例，说明 structuredClone 普通克隆与 transfer 的区别、转移列表去重及旧引用失效，并给出 DataCloneError 的排查方向。464 收藏 -
用 CSS light-dark() 配合 color-scheme 为页面建立浅色和深色主题，包含变量写法、兼容降级、手动切换和表单控件边界。379 收藏 -
CSS 容器查询容易因为容器类型和祖先层级选错而出现样式误匹配。本文用可复用卡片说明 container-type: inline-size、size、container-name 与最近合格祖先的关系，帮助你把查询范围稳定地隔离在组件宿主内。295 收藏 -
用 PerformanceObserver 订阅 longtask 条目，分清 buffered 回放、duration 与 attribution 的读取方式，并补上支持检测、批量上报和断开观察器的处理边界。182 收藏 -
通过 PerformanceResourceTiming 的原始字段定位单个资源响应区间，给出有限采集与停止观察的示例，区分跨域受限、缓存零值和未知样本，避免把浏览器区间当作纯服务端耗时。150 收藏 -
addEventListener 的 once 选项适合只处理一次的点击、提交和初始化事件。本文对比普通监听、自动移除、removeEventListener 与 AbortSignal 的生命周期和使用边界。204 收藏 -
本文用一个可伸缩组件场景说明 ResizeObserver 的 contentBoxSize、borderBoxSize 和 contentRect 如何选择，并给出数组形态、旧实现回退与组件销毁处理方式。114 收藏 -
BroadcastChannel 可用于跨标签页短消息同步。本文以主题偏好为例，说明通信范围、消息协议、有限去重、关闭清理与降级路径，并指出历史补发和并发一致性需由业务另行处理。306 收藏 -
URLPattern 可以用 pathname 命名组匹配前端路径，并从 exec 结果中读取 userId 等参数。本文说明 test 与 exec 的分工、斜杠和查询串边界，以及不支持 URLPattern 时的 URL 降级思路。184 收藏 -
通过 noUncheckedIndexedAccess 让 TypeScript 显式处理数组越界、动态字典键和配置缺失，并用收窄、默认值与边界函数建立可靠的索引读取方式。404 收藏 -
用Intl.Segmenter选择字素、词与句子粒度，设置语言优先列表，保留原文片段和UTF-16偏移，并说明词标记、结果差异及能力缺失时的处理。410 收藏 -
用 structuredClone 深拷贝含嵌套对象、数组和循环引用的数据，并排查 DataCloneError、原型元数据与 transfer 转移语义等边界。312 收藏