大型开关语句的替代方案

Question

我有点问题。 我有一个带有大量按钮的应用程序，我想在按下键盘时触发这些按钮。 目前我正在为它使用 switch statemnt，但随着我想要获得越来越多的按钮（大约 25 个），switch statment 变得越来越大。 如何替换我的 switch 语句并保持我的功能？

代码：

<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>

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;
        }
});

注意：我不想使用 jQuery

Answer 1

您可以遍历这些按钮的包装器 div 的子项，并创建一个查找字典，其中键是按钮的name ，值是id ：

const el = document.getElementById("buttons").children;
const dict = Array.from(el).reduce((a, {id, name}) => ({...a, [name]: id}),{});

在EventListener内部，只需查找字典中已有的键：

document.addEventListener('keydown', function(e) {
  if (dict[e.keyCode]) {
    animateButton(document.getElementById(dict[e.keyCode]));
  }
});

这是一个例子：

 const el = document.getElementById("buttons").children; const dict = Array.from(el).reduce((a, {id, name}) => ({...a, [name]: id}),{}); console.log(dict);

 <div id="buttons"> <button id="left_button" name=37 class="button"></button> <button id="right_button" name=39 class="button"></button> <button id="down_button" name=40 class="button"></button> </div>

注意：正如您所说，您只有 25 个按钮，因此对于现代机器来说循环 25 个项目并不是什么大问题。

希望能帮助到你！