Javascript中多个热键的代码答案

【问题标题】：Code for multiple hotkeys in JavascriptJavascript中多个热键的代码
【发布时间】：2015-12-11 21:24:28
【问题描述】：

我有一个带有 3 个键盘快捷键的应用程序。只有当焦点在网格上的一行内时它们才会被触发，所以我添加了一个监听器来处理这个问题：

if (grid) {
    var host = grid.hostElement;
    //handle the keydown event
    host.addEventListener('keydown', function (e) {
        if (e.altKey && e.key == "q") {  
           doSomething(grid);
        }

        if (e.altKey && e.key == "n") {
           doSomethingElse(grid);
        }
        if (e.altKey && e.key == "u") {
            doAThirdThing(grid);
        }
    });

}

这工作正常，但从性能的角度来看，这是处理此问题的最有效方法吗？我应该使用一个开关还是多个监听器？

【问题讨论】：

我建议你在 codereview 上发布这个：codereview.stackexchange.com
你想过什么样的性能提升？您可以通过提前从 if 块重新调整来节省一两纳秒 ...
您可以使用Object 来存储key => handler 映射。

标签： javascript addeventlistener hotkeys

【解决方案1】：

几个问题，为了跨浏览器的兼容性，获取您的密钥代码：

    var key = e.which || e.keyCode;

支持所有浏览器。其次，e.key 没有很好的浏览器支持（https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key）。尽管它说 Chrome 45.0 支持 e.key，但我认为它在 45.0.2454.85 m 中未定义。这是一个替代方案：

    host.addEventListener('keydown', function (e) {
        var key = e.which || e.keyCode;
        if(e.altKey){
            switch(key){
                case 81:
                    // "q"
                    doSomething(grid);
                    break;
                case 78:
                    // "n"
                    doSomething(grid);
                    break;
                case 85:
                    // "u"
                    doSomething(grid);
                    break;
            }
        }
    });

【讨论】：

【解决方案2】：

您可以使用 switch case 语句，因为您始终检查 e.altKey 是否为相同的值。像这样：

 if (grid) {
    var host = grid.hostElement;
    //handle the keydown event
    host.addEventListener('keydown', function (e) {
        if (e.altKey){
            switch(e.key){
                case "q":
                    doSomething(grid);
                break;

                case "n": 
                   doSomethingElse(grid);
                break

                case "u":
                    doAThirdThing(grid);
                break;
            }
        }
    });
}

将 e 值想象成罐子里的一块饼干，每执行一个 if 语句，你就把手伸进罐子里检查饼干是什么，然后把它放回罐子里。然后这发生在每个条件 IF 语句上，效率不高。

如果您使用 switch 语句，这与将饼干从罐子中取出并握在手中一样 - 您可以更快地检查饼干及其任何属性。

在此处阅读有关 switch 语句的更多信息： http://www.w3schools.com/js/js_switch.asp

【讨论】：

我就是这么想的，就是不知道怎么设置开关。
没问题，希望我以一种从性能观点可以理解的方式解释了这一点。