JavaScript手写快捷键库，看到就是赚到

背景

前端开发中，有时项目会遇到一些快捷键需求，比如绑定快捷键，展示快捷键，编辑快捷键等需求，特别是工具类的项目。如果只是简单的绑定几个快捷键之类的需求，我们一般会通过监听键盘事件（如keydown 事件）来实现，如果是稍微复杂点的需求，我们一般都会通过引入第三方快捷键库来实现，比如常用的几个快捷键库mousetrap, hotkey-js等。

接下来，我将会通过对快捷键库mousetrap第一次提交的源码进行简单分析，然后实现一个简单的快捷键库。

在开始前，推荐一款程序员都应该知道的好物——JNPF低代码开发

应用地址：https://www.jnpfsoft.com?csdn

开发语言：Java/.net 

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；采用微服务、前后端分离架构，集成了代码生成器，支持前后端业务代码生成，满足快速开发；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3，平台即可私有化部署，也支持 K8S 部署。

在 JNPF 中，至少包含表单建模、流程设计、报表可视化、代码生成器、系统管理、前端 UI 等组件，这种情况下我们避免了重复造轮子，已内置大量的成熟组件，选择合适的组件进行集成或二次开发复杂功能，即可自主开发一个属于自己的应用系统。

另外，后续会持续分享前端开发的其他相关的知识总结等，那么，我们开始吧~

前置知识

首先，我们需要了解一些快捷键相关的基础知识。比如，如何监听键盘事件？如何监听用户按下的按键？键盘上的按键有哪些？是如何分类的？只有知道这些，才能更好的理解mousetrap这种快捷键库实现的思路，才能更好地实现我们自己的快捷键库。

如何监听键盘事件

实现快捷键需要监听用户按下键盘按键的行为，那就需要使用到键盘事件API。

常用的键盘事件有keydown, keyup,keypress事件。一般来说，我们会通过监听用户按下按键的行为，来判断是否要触发对应的快捷键行为。通常来说，在用户按下按键时，就会判断是否有匹配的绑定过的快捷键，即通过监听keydown事件来实现快捷键。

如何监听键盘上按下的键

我们可以通过键盘事件来监听用户按键行为。那如何知道用户具体按下了哪个/哪些按键呢？

比如，用户绑定的快捷键是s，那如何知道当前按下的按键是s？我们可以通过键盘事件对象keyboardEvent上的code, keyCode, key这些属性来判断用户当前按下的按键。

键盘按键分类

有些按键会影响其他按键按下后产生的字符。比如，用户同时按下了shift和/按键，此时产生的字符是?࿰