Show HN: I made a better DOM morphing algorithm
6 months ago
- #JavaScript
- #Web Development
- #DOM
- DOM变形技术通过比较并调整原始DOM以匹配新HTML，在动态更新HTML时帮助维持状态
- 传统DOM更新的常见问题包括焦点丢失、滚动位置变化、事件监听器失效和CSS动画中断
- 现有的DOM变形库包括Morphdom(Phoenix Live View使用)、Alpine Morph(Livewire使用)和Idiomorph(HTMX/Turbo使用)
- Morphlex 1.0引入了新的DOM变形方法，重点解决节点标识问题
- 节点标识通过id属性、子节点id及其他属性组合来确定唯一性
- Morphlex通过匹配算法改进了插入、删除和排序等常见场景的处理
- 该算法依次通过完全相等→id匹配→id集合→标签名→特定属性→仅标签名的方式匹配节点
- Morphlex利用moveBefore/insertAfter方法和最长递增子序列算法来优化重排序时的状态保持
- 对表单输入的特殊处理可保留用户修改值，并提供preserveChanges配置选项
- 性能优化使其在真实场景中工作量更少，整文档变形快速高效
- Morphlex采用MIT许可证发布，鼓励用户反馈bug修复建议