背景前端开发中，有时我的项目会遇到一些快捷键需要，比方绑定快捷键，展现快捷键，编辑快捷键等需要，特地是工具类的我的项目。如果只是简略的绑定几个快捷键之类的需要，咱们个别会通过监听键盘事件（如keydown 事件）来实现，如果是略微简单点的需要，咱们个别都会通过引入第三方快捷键库来实现，比方罕用的几个快捷键库mousetrap, hotkey-js等。
接下来，我将会通过对快捷键库mousetrap第一次提交的源码进行简略剖析，而后实现一个简略的快捷键库。
前置常识首先，咱们须要理解一些快捷键相干的基础知识。比方，如何监听键盘事件？如何监听用户按下的按键？键盘上的按键有哪些？是如何分类的？只有晓得这些，能力更好的了解mousetrap这种快捷键库实现的思路，能力更好地实现咱们本人的快捷键库。
如何监听键盘事件实现快捷键须要监听用户按下键盘按键的行为，那就须要应用到键盘事件API。
罕用的键盘事件有keydown, keyup,keypress事件。一般来说，咱们会通过监听用户按下按键的行为，来判断是否要触发对应的快捷键行为。通常来说，在用户按下按键时，就会判断是否有匹配的绑定过的快捷键，即通过监听keydown事件来实现快捷键。
如何监听键盘上按下的键咱们能够通过键盘事件来监听用户按键行为。那如何晓得用户具体按下了哪个/哪些按键呢？
比方，用户绑定的快捷键是s，那如何晓得以后按下的按键是s？咱们能够通过键盘事件对象keyboardEvent上的code, keyCode, key这些属性来判断用户以后按下的按键。
键盘按键分类有些按键会影响其余按键按下后产生的字符。比方，用户同时按下了shift和/按键，此时产生的字符是?，然而实际上如果只按shift按键不会产生任何字符，只按/按键产生的字符本应该是/，最终产生的字符?就是因为同时按下了shift按键导致的。这里的shift按键就是影响其余按键按下后产生字符的按键，这种按键被称为润饰键。相似的润饰键还有ctrl, alt(option), command(meta)。
除了这几个润饰键以外，其余的按键称为非润饰键。
快捷键分类罕用的快捷键有单个键，键组合。有的还会用到键序列。
单个键故名思义，单个键是只须要按下一个键就会触发的快捷键。比方罕用的音视频切换播放/暂停快捷键Space，游戏中管制挪动方向快捷键w,a,s,d等等。
键组合键组合通常是一个或多个润饰键和一个非润饰键组合而成的快捷键。比方罕用的复制粘贴快捷键ctrl+c,ctrl+v，保留文件快捷键ctrl+s，新建(浏览器或其余app)窗口快捷键ctrl+shift+n(command+shift+n)。
键序列顺次按下的按键称为键序列。比方键序列h e l l o，须要顺次按下h,e,l,l,o按键才会触发。
mousetrap源码剖析以下将以mousetrap第一次提交的源码为根底进行简略剖析，源码链接如下：https://bit.ly/3TdcK8u
简略来说，代码只做了两件事，即绑定快捷键和监听键盘事件。
代码设计和初始化首先，给window对象增加了一个全局属性Mousetrap，应用的是IIFE(立刻执行函数表达式)对代码进行封装。
该函数对外裸露了几个公共办法：
bind(keys, callback, action): 绑定快捷键trigger(): 手动触发绑定的快捷键对应的回调函数。最初当window加载后立刻执行init()函数，即执行初始化逻辑：增加键盘事件监听等。
// 以下为简化后的代码window['Mousetrap'] = (function () { return { /** * 绑定快捷键 * @param keys 快捷键，反对一次绑定多个快捷键。 * @param callback 快捷键触发后的回调函数 * @param action 行为 */ bind: function (keys, callback, action) { action = action || ''; _bindMultiple(keys.split(','), callback, action); _direct_map[keys + ':' + action] = callback; }, /** * 手动触发快捷键对应的回调函数 * @param keys 绑定时的快捷键 * @param action 行为 */ trigger: function (keys, action) { _direct_map[keys + ':' + (action || '')](); }, /** * 给DOM对象增加事件，针对浏览器兼容性的写法 * @param object * @param type * @param callback */ addEvent: function (object, type, callback) { _addEvent(object, type, callback); }, init: function () { _addEvent(document, 'keydown', _handleKeyDown); _addEvent(document, 'keyup', _handleKeyUp); _addEvent(window, 'focus', _resetModifiers); }, };})();Mousetrap.addEvent(window, 'load', Mousetrap.init);绑定快捷键一般来说，快捷键库都会提供一个绑定快捷键的函数，比方bind(key, callback)。在mousetrap中，咱们能够通过调用Mousetrap.bind()函数来实现快捷键绑定。
...