本文介绍如何在 JavaScript 中封装一个用于监听键盘快捷键的类。通过维护键码映射表，该类支持单键与组合键（如 Ctrl+Q）的监听。示例展示了如何实例化对象并绑定回调函数，当按键条件满足时触发指定逻辑，适用于需要自定义快捷键交互的前端场景。
在 JavaScript 开发中，有时需要封装一个专门用于监听键盘快捷键的对象。该对象的核心功能在于识别特定的按键或按键组合，并在满足条件时执行相应的回调逻辑。通过这种方式，可以简化前端交互中快捷键处理的代码结构，提高代码的可复用性和维护性。
export default class Shortcuts {
keyCodeMap = new Map([
["0", 48],
["1", 49],
["2", 50],
["3", 51],
["4", 52],
["5", 53],
["6", 54],
["7", 55],
["8", 56],
["9", 57],
["A", 65],
["B", 66],
["C", 67],
["D", 68],
["E", 69],
["F", 70],
["G", 71],
["H", 72],
["I", 73],
["J", 74],
["K", 75],
["L", 76],
["M", 77],
["N", 78],
["O", 79],
["P", 80],
["Q", 81],
["R", 82],
["S", 83],
["T", 84],
["U", 85],
["V", 86],
["W", 87],
["X", 88],
["Y", 89],
["UP", 38],
["RIGHT", 39],
["DOWN", 40],
["LEFT", 37],
["CTRL", 17],
["SHIFT", 16],
["ALT", 18],
["SPACE", 32], // 空格键
]);
constructor(keyNames = [], callback, isPreventDefault = false) {
this.destroy();
this.isPreventDefault = isPreventDefault;
this.keyNames = keyNames;
this.callback = callback;
this.initEventListener()
}
initEventListener() {
document.addEventListener("keyup", this.handleKeyup.bind(this))
}
destroy() {
document.removeEventListener("keyup", this.handleKeyup.bind(this))
}
handleKeyup(e) {
this.isPreventDefault && e.preventDefault(); // 是否阻止默认行为
let conditions = []
if (Array.isArray(this.keyNames)) { // 数组是组合键
this.keyNames.forEach(code => {
let strCode = code.toString().toUpperCase();
switch (strCode) {
case "CTRL":
conditions.push(e.ctrlKey)
break;
case "SHIFT":
conditions.push(e.shiftKey)
break;
case "ALT":
conditions.push(e.altKey)
break;
default:
conditions.push(this.keyCodeMap.get(strCode) == e.keyCode)
break;
}
})
}else {
let strCode = this.keyNames.toString().toUpperCase();
if(strCode == e.keyCode){
conditions.push(true);
}
}
if (conditions.every(item => item)) {
this.callback && this.callback()
}
}
}在实际使用中，可以通过实例化该类来注册不同的快捷键监听规则。例如，可以定义一个组合键监听，如同时按下 Ctrl 和 Q 键时触发特定操作；也可以定义单键监听，如单独按下 Q 键时执行另一段逻辑。具体实现中，类内部会维护一个键码映射表，将字符转换为对应的 ASCII 码值，并在键盘事件触发时检查当前按键是否匹配预设条件。若所有预设条件均满足，则执行绑定的回调函数。
new Shortcuts(["ctrl", "q"], ()=>{ //组合键
console.log(111);
});
new Shortcuts("q", ()=>{ // 单键
console.log(111);
});以上即为 JavaScript 简单封装监听快捷键对象的示例及使用方法。该方案提供了一种轻量级的快捷键处理机制，适用于各类需要自定义键盘交互的 Web 应用。如需了解更多相关技术细节或查看完整代码实现，建议参考本站其他关于前端交互封装的文章。