为何要手写?既定的时间内没有找到合适的现有选择,放弃无谓的搜寻,自己写一个。
基本原理
- 菜单数据接口获取,一级菜单UI事件监听,对应的下层二级菜单放到一级菜单item的dataset属性里,事件触发时取出并显示。
- 事件监听(由于菜单之前不存在,于父层监听菜单item的冒泡事件)。
- 一级菜单:监听mouseover而不是mouseenter,二级菜单监听click并实现跳转页面
功能设计图
基本效果
遇到的问题:菜单快速移动时卡顿
问题可能出自于:
- 频繁的事件触发 如下图所示:
- 频繁的同址DOM更迭(DOM操作) 同样,频繁的移入会导致频繁的二级菜单DOM更新操作。
- 二级菜单的更新是节点替换与重新渲染,每次都会引发重绘和回流
- 高亮实现与切换:遍历移除所有item的高量状态(class),再高亮当前。
一级菜单快速移动时存在轻微的卡顿
分析与解释
解决方案
- 一级菜单每个item间加一些外边距
- 对二级菜单更新DOM操作设置延时.
- 将所有二级菜单提前加载完毕,position设置为absolute,visibility为hidden,再通过切换visibility为visible或hidden控制显示与隐藏,只引发回流而重绘。
- 记录上次的高亮节点,每次取消高亮节点,点亮当前,节省遍历的开销.
本文完,由于水平有限,可能出现纰漏,望读者朋友不吝赐教!