前端技术文章
-
D3 的 scaleBand 与 scalePoint 都能把离散分类映射到连续坐标，但前者给图元分配带宽，后者只给出中心位置。本文用柱形图、折线图和散点图比较两者的适用场景，并说明 padding、bandwidth、step 与分类轴刻度的边界。271 收藏 -
D3 data join 默认按位置匹配，列表重排后容易让 DOM 节点状态跟错对象。本文用稳定且唯一的 id 作为 key，说明 update、enter、exit 的对应关系，以及排序、重复 key 和 DOM 顺序的边界。185 收藏 -
解释SolidJS createMemo的纯计算约束，结合报价预览组件区分派生值、createEffect外部同步与用户事件，并说明相等判断、状态回写和清理边界。308 收藏 -
SolidJS 的 createStore 可以用 setStore 路径语法定位嵌套对象和数组元素，本文用一个表单状态示例说明局部更新、条件批量更新以及 produce 的适用边界。130 收藏 -
对比Alpine.js的$watch与x-effect，通过组件示例解释显式监听、自动依赖、首次执行、新旧值，以及深层对象回写风险和副作用隔离。297 收藏 -
用 XState v5 的表单提交场景说明 guard 如何决定 transition、action 如何更新 context 或安排副作用，并给出异步 actor 与版本边界的处理方式。281 收藏 -
XState 父状态机向子 actor 发事件时，关键是区分 actor logic、invoke id 和 actor ref。本文用 XState v5 示例说明 sendTo 的固定 ID 写法、spawn 动态引用和事件未处理时的三层排查方法。191 收藏 -
Alpine.js 修改响应式数据后如何等 DOM 更新？本文用回调式和 Promise 式 $nextTick 说明读取文本、测量尺寸、聚焦元素的正确时机，并划清请求完成与浏览器布局的边界。367 收藏 -
htmx 局部替换会让目标区域重新合并 HTML。本文说明怎样用稳定 ID 和 hx-preserve 保留指定元素，分析输入框、文件、iframe 与视频的边界，并给出替代布局和复查清单。241 收藏 -
htmx 的 hx-sync 可以协调字段校验、表单提交和实时搜索请求。本文用表单竞争场景说明 abort、drop、replace、queue 的差异，并给出提交优先、校验优先和只保留最后一次查询的写法。390 收藏 -
用Lit组件示例区分attribute命名、类型转换和property反射，说明camelCase默认映射、布尔attribute语义及对象属性入口，帮助组件作者为HTML和JavaScript调用方设计清晰接口。429 收藏 -
用 Promise.withResolvers 将一次事件转换为可 await 的结果，结合 AbortSignal 处理预先取消，并在成功、取消与注册异常时移除监听器，避免只用 once 或 race 留下订阅。327 收藏 -
文章 · 前端 | 2星期前 | 前端 · javascript · SyntaxError Web Components customElements.whenDefined Custom Elements 自定义元素名称
customElements.whenDefined 传入无效标签名时会直接抛出 SyntaxError，而不是返回等待中的 Promise。本文区分名称契约与注册时序，给出前置处理、统一注册名和批量等待的实用写法。223 收藏 -
讲清 customElements.whenDefined 如何批量等待自定义元素注册完成，使用 Set 去重标签名、Promise.all 汇总等待，并处理空集合、路由切换和内部渲染边界。222 收藏 -
从首屏内容、渐进增强、脚本时序和兼容降级四个约束出发，比较 Declarative Shadow DOM 与客户端 attachShadow 的职责边界，并给出可复用的 Web Component 初始化写法。440 收藏