javascript - 有没有办法改进大型 if/else 或 switch/case block ？

Question

我正在重构一些 javascript 以使用 jQuery，其中一个事件看起来像这样

document.onkeyup = function keyUp(e) {

if (e.keyCode == 70) { // 'f'
    //Do something
}
else if (e.keyCode == 78) { // 'n'
    //Do something else
} ...

不幸的是，案例中所做的事情并不像 this question 中的那样相似或简单。 .有没有更好的方法来编写这个而不是大量的硬编码 if/else 或 switch/case 语句？

Answer 1

我不知道它是否真的更好，但您可以将所有可能的值列为您包含的其他一些专用文件中对象的键。例如:

var keyHandlers = {
    "70": function () { /* Do something */ },
    "78": function () { /* Do something else */ }
};

然后，在您的 keyup 事件处理程序中，您可以简单地引用此对象的适当属性:

document.onkeyup = function keyUp(e) {
    keyHandlers[e.keyCode]();
};

与 switch 语句相比，此方法的一个显着缺点是，如果您希望多个键执行相同的功能，它看起来会更加困惑。使用 switch，您可以让这些案例失败。在这里，您必须在初始 keyHandlers 声明之后执行一些其他任务。

---

其他几点...您应该使用 addEventListener 而不是 on... 属性，是否有理由将函数命名为您当前正在分配给 onkeyup 吗？命名它的唯一原因是如果您需要从其内部引用它。