𝗜 𝗥𝗲𝗯𝘂𝗶𝗹𝘁 𝗡𝗼𝘁𝗶𝗼𝗻'𝘀 𝗦𝗹𝗮𝘀𝗵 𝗠𝗲𝗻𝘂 𝗶𝗻 𝟳𝟬 𝗟𝗶𝗻𝗲𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
Notion 用起来就像魔法一样。你输入一个斜杠，菜单就会出现；你选择一个选项，文本就会随之变换。
我用 70 行原生 JavaScript 重构了这个功能。所谓的“魔法”，其实是简单的逻辑。
我的 DesignFromZero 系列的第 9 天专注于著名的 UI。我从零开始重构这些工具，以深入理解它们。
其逻辑主要由三个部分组成：
- 数据模型：文档是一个块（block）列表。每个块包含一条数据，这就是它的类型。
- 触发机制：每当你输入时，代码都会检查文本。如果文本以斜杠开头，菜单就会打开。
- 过滤器：菜单使用关键词来查找命令。例如，“Heading 1”命令可能包含 h1 或 title 等关键词。这让搜索体验显得非常智能。
代码在导航方面使用了一个简单的小技巧。通过使用取模运算符（modulo operator），你可以使用方向键在列表中移动。当选择到达底部时，它会自动循环回到顶部。
当你按下 Enter 键时，代码会执行两个任务：
- 更新数据中的块类型。随后由 CSS 处理视觉上的变化。
- 清除斜杠和命令文本。
复杂的功能往往有着简单的基础。斜杠菜单本质上就是数据加上前缀检查和类型切换。
在这里尝试在线演示：https://dev48v.infy.uk/design/day9-notion-slash.html
在这里阅读完整解析：https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i