如何替代大量按钮键盘触发场景中的大型switch语句？

问题 #

我开发的应用中有大量按钮（计划扩展至约25个），需要通过键盘按键触发这些按钮的功能。目前我使用switch语句实现该逻辑，但随着按钮数量增加，switch语句变得越来越臃肿。请问在不使用jQuery的前提下，如何替换switch语句并保留原有功能？

原HTML代码 #

<button id="left_button" action-name="left" class="button"></button>
<button id="enter_button" action-name="enter" class="button"></button>
<button id="right_button" action-name="right" class="button"></button>
<button id="return_button" action-name="return" class="button"></button>
<button id="down_button" action-name="down" class="button"></button>

原JavaScript代码 #

function animateButton(div_id) {
    div_id.classList.add("boxshadow");
    var data_action = div_id.getAttribute("action-name")
    //this sends data further down the pipeline
    RequestPress(data_action)
    setTimeout(function() {
        div_id.classList.remove("boxshadow");
    }, 400);
}
var up_button = document.getElementById('up_button')
var right_button = document.getElementById('right_button')
var left_button = document.getElementById('left_button')
var down_button = document.getElementById('down_button')
var enter_button = document.getElementById('enter_button')
var esc_button = document.getElementById('return_button')
document.addEventListener('keydown', function(e) {
        switch (e.keyCode) {
            case 38:
                animateButton(up_button)
                break;
            case 39:
                animateButton(right_button)
                break;
            case 40:
                animateButton(down_button)
                break;
            case 37:
                animateButton(left_button)
                break;
            case 13:
                animateButton(enter_button)
                break;
            case 27:
                animateButton(esc_button)
                break;
        }
});

解决方案 #

使用键值对映射对象替代switch语句是最简洁且易维护的方案，核心思路是将键盘按键的keyCode与对应的按钮元素直接关联，后续扩展时仅需更新映射对象即可。

优化后的JavaScript代码 #

function animateButton(button) {
    button.classList.add("boxshadow");
    const dataAction = button.getAttribute("action-name");
    RequestPress(dataAction);
    // 用箭头函数简化定时器代码
    setTimeout(() => button.classList.remove("boxshadow"), 400);
}

// 集中管理按键与按钮的对应关系
const keyButtonMap = {
    38: document.getElementById('up_button'),
    39: document.getElementById('right_button'),
    37: document.getElementById('left_button'),
    40: document.getElementById('down_button'),
    13: document.getElementById('enter_button'),
    27: document.getElementById('return_button')
};

document.addEventListener('keydown', (e) => {
    // 根据keyCode从映射中获取按钮，存在则执行动画逻辑
    const targetButton = keyButtonMap[e.keyCode];
    if (targetButton) {
        animateButton(targetButton);
    }
});

方案优势 #

• 易维护：新增按键与按钮的关联时，仅需在keyButtonMap中添加新的键值对，无需修改事件处理逻辑
• 结构清晰：避免了switch语句冗长的分支嵌套，代码可读性更强
• 扩展性强：即使扩展到25个按钮，映射对象的结构依然简洁，不会出现代码臃肿问题

内容的提问来源于stack exchange，提问作者itIsWhatItIs