Hey.com 技术概览（二：键盘快捷键）

我们先来看看Hey的一个实用小功能：键盘快捷键"?"。每个Hey页面都预设了一些快捷键，让您无需使用鼠标即可完成常用操作。点击或按下每个页面右下角的小键盘图标，即可弹出快捷键列表，查看这些快捷键。

Hey 中基本上有两种类型的快捷方式：一种会将您的浏览器带到另一个页面（就像您点击了一个普通<a href="...">链接一样），另一种会触发一些自定义 JavaScript 操作，使当前页面具有交互性。

好的，它们是如何工作的？让我们深入了解一下源代码！

页面切换快捷方式

当我们打开 Imbox 页面的页面检查器时（我们知道这不是拼写错误），我们会发现<a>HTML 主体顶部附近有几个似乎与键盘快捷键相关的标签。

我们来分析其中一个链接。正如你所看到的，它只是一个普通的HTML链接，没什么特别的：

<a data-controller="hotkey" data-hotkey="2" href="/feedbox" hidden="hidden">
  The Feed
</a>

• 它有自己的URL（href），指向 Feedbox 页面。
• 它还包含一个名为“信息流”的内容，但由于hidden属性的原因，它不会显示在页面上。这是一个全局属性，其作用正是如此——将元素添加到 DOM 中但不显示它们。因此，该标签静静地存在于页面中，不为人知。
• 现在，这个data-controller属性很重要，任何使用过最新版本 Rails 的人可能都很熟悉它：它是指向相应的Stimulus 控制器的指针，其值表明该控制器与热键有关。
• 最后，该data-hotkey属性必须是此键盘快捷键的特定按键定义，这意味着按下该"2"键将加载 Feedbox 页面。

顺便说一句，我觉得即使我们完全不了解这些链接内部是如何运作的，这些小小的标签，这些单行 HTML 代码，仍然能很好地表达它们的用途，这一点非常值得注意。它们定义了快捷方式，而且每个按键指向哪个页面也一目了然！这就是我喜欢 Rails 的原因——简洁性和对可读性的重视。在 Rails 模板中，你可以这样编写链接（或者，更好的是，你可以创建一个hotkey_link辅助方法）：

link_to "The feed", "/feebox", data: { controller: "hotkey", hotkey: "2" }, 
                               hidden: true

为了更深入地了解快捷键链接的工作原理，我们需要先介绍一下Stimulus。它是一个小巧且高度定制化的 JavaScript 框架，可以让你摆脱模板中零散的 JS 代码，将所有 JS 代码移至独立的“控制器”文件中，并通过 HTML 属性以简洁易读的方式将它们链接到页面。如果你之前没有接触过 Stimulus，不妨花几分钟时间阅读一下Stimulus 手册，你就能掌握所有必要的知识。

linkdata-controller属性会将我们引导至“热键”Stimulus 控制器。让我们来看看它！我们将切换到开发者工具中的“调试器”选项卡，并展开 Webpack ⟶ app/javascript⟶controllers路径，找到并打开它hotkey_controller.js：

我们不敢说完全理解，但有一点显而易见：代码从库install中导入了两个函数，并且……注释中甚至还有指向该库的链接……所以让我们来看看：uninstall@github/hotkey

瞧！ GitHub 库显然已经完成了所有底层核心工作，实现了页面上的热键设置。它只需要页面上有一个带有data-hotkey属性的元素，当用户按下指定的键时，它就会虚拟地点击该元素。由于我们的元素是一个<a>标签，点击它就会直接跳转到属性指定的页面href。

要实现这一切，你需要调用install库中的方法，并将要点击的元素作为参数传递给它。这正是connectStimulus 控制器方法中所做的。每当相应的 HTML 元素（在本例中为标签）添加到 DOM 时，即网页加载完成后，该connect方法就会被调用。<a>

我认为页面快捷键的生命周期到此结束了：

• 安装快捷方式：

  • 页面加载时，Stimulus 框架会data-controller在“热键链接”中找到该属性。
  • Stimulus 创建了一个新的实例hotkey_controller，并调用了它的initialize和connect方法。
  • 该connect方法调用installGithub 热键库中的方法，该方法实际上会为按键添加正确的底层 JS 事件处理程序。

• 按下按键时：

  • 底层（keydown）事件由浏览器触发。
  • GitHub 库事件处理程序会捕获到此事件。
  • 该处理程序实际上“点击”了原始元素，即“热键”链接。
  • 浏览器访问链接中的网址。

 通用操作快捷方式

如果我们想在按下快捷键时调用自定义的JS函数而不是访问页面，该怎么办？首先，我们可能不应该使用<div><a>元素来定义快捷键，这样浏览器就不会在“点击”它时尝试访问另一个页面。

接下来，我们可以使用Stimulus 约定来告诉浏览器在我们的元素中发生点击事件时要调用什么操作。

我们可以在 Hey 的源代码中找到一个例子：

这次它是一个button元素，与“热键链接”只有一个明显的区别：它定义了data-action属性：

<button ... data-action="bulk-actions#select">...</button>

这是某个表达的简写形式，其等价含义如下：

<button ... data-action="click->bulk-actions#select">...</button>

在 Stimulus 约定中，该data-action属性告诉 Stimulus 框架监听 `<button>` 元素之前指定的 JS 事件->，并在事件触发时调用 `<button>` 元素之后指定的 Stimulus 控制器操作->。如果未指定事件名称，则默认使用click按钮元素的事件。

因此，在我们的例子中，点击这个隐藏按钮（即按下键盘上的相应键）就会调用select该操作。很巧妙，不是吗？bulk_actions_controller.js"x"

概括

借助 GitHub 热键库的便捷使用，网页代码可以保持非常简洁。而 Stimulus 框架则赋予代码极大的灵活性，同时又不会使 HTML 页面代码本身变得臃肿。HTML 页面保持简洁，而 JS 代码则被打包到其他地方并进行了良好的缓存。Stimulus 的约定使得整个过程清晰易读且可预测，这始终是一件好事！

感谢阅读，敬请期待更多精彩科技资讯！下次我将深入探讨一项很棒的新功能——从服务器自动更新自定义页面区域！