在事件处理程序中捕获大量钥匙编码的可读性实践

Question

这更像是一个纯JS问题，但是我也在Angular2上标记，以防Angular Developer具有任何NG2技术来完成此

我正在编写一个Angular2应用程序，并且正在编写keydown事件处理程序，以捕获A contineDeedibalitable span。

<span [contentEditable]="true" (keydown)=keydown($event)>
  {{myDate}}
</span>

（非角度的人：那只是注册keydown事件处理程序的速记）

事件处理程序代码很难阅读：

keydown = ($event:KeyboardEvent) =>{
  let key = $event.keyCode;
  if ((key < 48 || key > 57) && key != 191 && key != 189 && key != 220 && key != 8 && key != 46 && key != 9){ // 0-9, plus -_/| as delimiters, plus backspace/delete/tab
    $event.preventDefault();
  }
}

这完全有效，但是可读性降低了，它看起来像是我作为学生"逃脱"的代码。

将其分为多行，并评论每个键代码看起来更好：

keydown = ($event:KeyboardEvent) =>{
  let key = $event.keyCode;
  if ((key < 48 || key > 57) && // 0-9
    key != 191 && // /
    key != 189 && // -
    key != 220 && // 
    key != 8 && // backspace
    key != 46 && // delete
    key != 9){ // tab
    $event.preventDefault();
  }
}

但是在C＃中，您可以做这样的事情来减少布尔操作员的数量：

if ({'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '/', '\', Keys.Tab, Keys.Delete, Keys.Backspace}.Contains($event.keyCode){
  $event.preventDefault();
}

编写干净的代码有什么最佳实践来检查许多钥匙编码吗？我只是害羞地写在JavaScript中写长时间的表情吗？

Answer 1

您可以按照以下方式预先定义一系列键盘：

    var keyCodes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '/', '\'];
    if (keyCodes.find(predicate) === $event.keyCode) {
        // do something
    }
function predicate(e) {
    return e === $event.keyCode;
}

Answer 2

这个

怎么样

if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 191, 189, 220, 8, 46, 9].indexOf(key) === -1) 
{
  $event.preventDefault();
}

---

简单JS演示：

var keydown = function(event){
  var key = event.keyCode;
    
  if ([48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 191, 189, 220, 8, 46, 9].indexOf(key) === -1){
    document.querySelector('div').innerHTML = 'Prevent: ' + key;
  } else {
    document.querySelector('div').innerHTML = 'DoNothing: ' + key;
  }
}

<div>
</div>
<input type="text" onkeydown="keydown(event)">

Answer 3

最重要的部分始终是表现力。简洁仅在有关如何在C中写东西的竞赛中有意义。-）

isDigitKey(keyCode:number):boolean {
  return key >=49 && <= 57;
}
isDelimiterKey(keyCode:number):boolan {
  switch(keyCode) {
    case 189: // dash
    case 191: // slash
    case 220: // backslash
      return true;
    default:
      return false;
  }
}
isEditKey(keyCode:number):boolan {
  switch(keyCode) {
    case 8: // backspace
    case 9: // tab
    case 46: // delete
      return true;
    default:
      return false;
  }
}
isValidKey(keyCode:number):boolean {
  return this.isDigitKey(key) || this.isOperatorKey(key) || this.isEditKey(key)
}
keydown = ($event:KeyboardEvent) =>{
  let key = $event.keyCode;
  if (!(this.isDigitKey(key) || this.isOperatorKey(key) || this.isEditKey(key)) {
    $event.preventDefault();
  }
  // alternative
  if (!this.isValidKey(key)) {
    $event.preventDefault();
  }
}

Answer 4

在JS中，您必须创建助手函数，没有像在C＃中完成的MAP/对象的方法：

//somewhere in the outer code:
this.keymap = convert([1, 2, 3, 4]);
//handler
if (this.keymap[event.key]) {
    //bla-bla
}
function convert(keys) {
    var map = {};
    for(var i = 0; i < key.length; i++) { 
        map[keys[i]] = true;
    }
    return map;
}