大型開關語句的替代方案

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 個項目並不是什么大問題。

希望能幫助到你！