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的函数命名为？命名它的唯一原因是如果你需要从内部引用它。

Answer 2

使用对象将键代码映射到函数：

var keyTable = {
  70: function () { ... },
  78: function () { ... },
  ... etc ...
}

然后您的事件处理程序变为：

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

有没有办法改进大的if / else或switch / case块？

2 个答案: