前端技术文章
-
答案是Map和Set在处理非字符串键、对象引用唯一性及大数据量去重时具有显著优势。它们支持任意类型键（Map）或元素（Set），基于引用比较实现高效去重（Set）和复杂关联存储（Map），内部采用哈希结构使查找、插入、删除操作平均时间复杂度为O(1)，远优于数组遍历的O(n)。尤其在大规模数据去重或需以对象为键的场景中，性能优势明显；而传统Object仅支持字符串/Symbol键且存在原型链干扰，Array去重效率低下。实际开发中，应根据唯一性需求、键类型、顺序要求、序列化需要及内存管理来选择：Set适用497 收藏 -
popover属性不能直接加在按钮上触发弹窗，必须加在弹出容器（如<div>）并设为"manual"，再通过showPopover()显式调用才生效；仅Chromium114+支持，Safari和Firefox不支持，推荐用兼容性更好的<dialog>替代。497 收藏 -
数组空位是索引“根本不存在”的语法现象，for/of返回undefined，forEach/map等跳过，Array.from和扩展运算符转为undefined，for-in/Object.keys完全不可见。497 收藏 -
CSSModules生效需精准配置：Webpack中modules:true须限定于.module.css文件，Vite需确保未禁用css.modules，Next.js的app目录须在ClientComponent中导入，styles为undefined通常因loader未执行modules流程。497 收藏 -
height:100%失效是因为父元素高度为auto，需html、body同时设height:100%；100vh虽便捷但受视口变化影响，嵌套或固定定位时易出错；推荐flex:1或配合min-height:0使用。497 收藏 -
必须配background-size是因为渐变本质是静态背景图，只有当background-size大于容器时，background-position才有移动空间；若为auto或100%100%，则严丝合缝无位移余量。497 收藏 -
relative定位使元素相对原位置偏移且保留原有空间，通过top、right、bottom、left调整位置，常用于微调布局或作为absolute定位的参照父级。497 收藏 -
本文解析为何仅靠闭包共享状态（如counter）不构成单例模式，并演示如何通过延迟初始化与实例缓存实现符合定义的真正单例。497 收藏 -
HTML开发真会泼洒咖啡到键盘上，概率达37%；防泼溅键盘需导流孔+纳米涂层，可3秒排干500ml液体，而普通键盘进液后Ctrl/Enter易失灵。497 收藏 -
CSSModules通过构建时哈希重命名类名实现局部作用域，仅对.module.css文件生效，支持:global显式声明全局样式，零运行时开销且SSR友好。497 收藏 -
登录页面需构建语义化HTML表单，添加HTML5验证属性，通过CSS美化样式，集成JavaScript实现密码可见切换与防重复提交，并配置aria标签等无障碍支持。497 收藏 -
:checked+label只能改label背景而不能覆盖整行，因label默认inline且CSS无父选择器；可通过absolute定位使label视觉铺满容器，但须确保input可点击、可聚焦、可被读屏识别。497 收藏 -
HTML无内置重做功能，需JavaScript维护undo/redo栈；document.execCommand已废弃且兼容性差；应记录差异化操作、同步状态、恢复光标等细节。497 收藏 -
align-items用于整体垂直对齐，margin-top:auto或margin-bottom:auto可使单个子元素脱离整体对齐，实现如底部定位等特殊布局需求。497 收藏 -
JSON不特殊处理空格，字符串内空格为U+0020，解析后可直接使用；HTML空格实体如 不属于JSON规范，混入属数据污染，应源头剥离或用CSS/语义方案解决。497 收藏