🎹 写了个键盘十字键导航 js 库，原理简单、引入开发简单、用户体验更简单

[wsWmsw]

十字键导航，复杂一点叫空间导航（ spatial navigation ），电视 UI 和游戏菜单里很多。W3C 有空间导航规范，但还停在草案阶段，只有少量开源库，基于我有一段时间的思考，关注了一段时间的焦点控制，所以开发了一个比较直觉、使用形式简单的空间导航库：naviix，https://github.com/wswmsword/naviix。

navi 有“船”的意思，x 象征键盘十字键，即十字键导航。

naviix 原理很简单，输入坐标尺寸，输出元素的十字方向最近元素。一个方向 45 度以内算作同一方向，再比较每个元素距离即可。

像下面这样引入使用：

import navix from "naviix";
const r1 = [1, 1, 1, 1]; // 矩形 1 的坐标尺寸
const r2 = [4, 1, 1, 1]; // 矩形 2
const res = navix([r1, r2]); // ⭐️ 一行核心
console.log(res.get(r1).right.id); // 输出 r2 ，表示获取 r1 右边的元素

十字键导航像遥控器，用起来会比 Tab 的顺序导航更符合直觉，如果页面里有瀑布流，菜单有大块元素，空间导航更合适。

我专门写了一个🎵音乐范例页面，大家可以用方向键尝试体验一下，桌面端移动端都可，最好桌面端。

已登入科技爱好者周刊第 351 期 (o˘◡˘o)