Question

这更像是一个纯粹的JS问题，但我也在使用Angular2进行标记，以防Angular开发人员使用任何ng2技术来完成此任务

我正在编写一个angular2应用程序，正在编写一个keydown事件处理程序来捕获 contentEditable span中使用的大量密钥代码。

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

（非Angular人：这只是注册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 array = [
        {id: null,name:'test',address: '6857346jfhbdjshb'},
        {id: 678346,name:'test',address: '63784hgj'},
        {id: null,name:'test',address: 'tevhgvd'},
        {id: 65847,name:'test',address: 'djhvwe677ghdgv'},
        {address: ""}
    ];

for (var obj in array){
       if (array[obj].address === "63784hgj" || array[obj].address === "djhvwe677ghdgv" || array[obj].address === "")
        {
            array.splice(obj, 1);
        }
    }

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

最重要的部分始终是表现力。 Terseness仅适用于有关如何用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 / object：

//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;
}

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

4 个答案:

简单的JS演示：