【问题标题】:Another method of writing code另一种写代码的方法
【发布时间】:2017-02-08 20:00:21
【问题描述】:

我用 JavaScript 编写代码。按下时我需要处理多个键。这样的代码的结果。

var key = event.keyCode;
if (key === 39 {
      //some code
    }

if (key === 40) {
      //some code
    }

if (key === 38) {
      //some code
    }

if (key === 13) {
     //some code
}

我不喜欢这种方法,如果有另一种漂亮的方法?面向对象编程的风格?谢谢

【问题讨论】:

标签: javascript coding-style


【解决方案1】:

JavaScript 本身不是面向对象的语言。

你可以做一个映射对象。

const obj = {
    "39" : () => { //do this },
    "40" : () => { //do this },
    "38" : () => { //do this },
    "13" : () => { //do this }
}

然后,当你的事件代码进来时......使用const whatever = obj[event.keyCode]();

我也相信某种形式的解构可以让这变得更加精彩,但我必须重新审视它。

【讨论】:

  • 太棒了!谢谢!!
  • 可能需要在使用前检查返回值,除非您绝对确定只会按下这 4 个键。
  • 不如切换?
  • @Carcigenicate 非常正确,你可以在运行函数之前用obj.hasOwnProperty(event.keyCode) 进行检查,否则会报错。很好的收获。
  • 旧浏览器呢?上面提到了未映射的代码。在调用方法之前检查属性是否存在。
【解决方案2】:

Aswitch:switch语句用于根据不同的条件执行不同的动作。

 switch(event.keyCode) {
        case 39:
            code block
            break;
        case 40:
            code block
            break;
        default:
            code block
    }

【讨论】:

【解决方案3】:

可能需要做很多工作,但这是使用键名并支持组合键:

var keyboardEvents = {};
var keys           = {};

document.addEventListener('keydown',function(e){

    keys[ e.key.toLowerCase() ] = true;

    for(var s in keyboardEvents){
        var p = s.split('+').map(function(k){return k.toLowerCase()}); 
        var f = true;
        for(var i=0;i<p.length;i++) if(!keys[ p[i] ]) f = false;
        if(f) keyboardEvents[s](e);
    }
});

document.addEventListener('keyup',function(e){
    delete keys[ e.key.toLowerCase() ];
});

用法是这样的:

keyboardEvents['control+c'] = function(e){ ... };
keyboardEvents['alt+c+b+k'] = function(e){ ... };

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-17
    • 2015-12-04
    • 1970-01-01
    • 1970-01-01
    • 2015-08-17
    • 1970-01-01
    相关资源
    最近更新 更多