if-else 语句太多。它们可以全球化吗？

Question

我正在尝试简化此脚本。我有 50 个这样的 if e.keyCode 语句，所以双重嵌套 if/else 语句看起来很荒谬，但我所做的所有其他尝试都没有奏效。

第一个 if/else 语句 if(e.keyCode == 66 && e.shiftKey) 是必要的，但我不确定第二个 if (typedAdjusted >= paperWidth % charWidth) 如果在相对于固定宽度的行上键入了太多字符，则会引发警告。

if (typedAdjusted >= paperWidth % charWidth) 给我的功能可以是全球性的吗？需要根据特定的 keyCodes 对其进行检查。例如，字母“B”应该输入到 typedAdjusted 中，而 BACKSPACE 和 TAB 和 COMMAND 则不应该。

var typed = $("span.char").length;
var typedAdjusted = typed+1;
var paperWidth = 900;
var charWidth = 44;

if (e.keyCode  == 66)  {
    if (e.keyCode  == 66  && e.shiftKey)  {
        $('#charLine-1').append('<span class="char">B</span>');
        if (typedAdjusted  >= paperWidth % charWidth) {
            $('body').append('<span id="warning">WARNING!</span>');
        }
        else {
            return false;
        }
    } 
    else  {
        $('#charLine-1').append('<span class="char">b</span>');
        if (typedAdjusted  >= paperWidth % charWidth) {
            $('body').append('<span id="warning">WARNING!</span>');
        }
        else {
            return false;
        }        
    }
}

Answer 1

你说有 50 个是什么意思？你……不是每个字母一个吗？

为什么要两次检查 keycode 值？除了字符之外，您看到代码完全相同吗？

保留一个查找表，或直接进行字符翻译，并将其缩短为单一方法：

var c = lookup(e.keyCode, e.shiftKey);
$('#charLine-1').append('<span class="char">' + c + '</span>');
if (typedAdjusted  >= paperWidth % charWidth) {
    $('body').append('<span id="warning">WARNING!</span>');
} else {
    return false;
}

这将创建一大堆跨度。

---

var normal = {
  66: 'b', 67: 'c', // etc.
};

var shifted = {
  66: 'B', 67: 'C', // etc.
};

/** 
 * Looks up keycode using appropriate map.
 *
 * Returns `undefined` if not found; shouldn't insert.
 */
function lookup(code, shift) {
  return shift ? shifted[code] : normal[code];
}

Answer 2

如果您喜欢检查每个使用开关：根据需要调用 checkKey 函数传递事件。

function checklen() {
    var typed = $("span.char").length;
    var typedAdjusted = typed + 1;
    var paperWidth = 900;
    var charWidth = 44;
    return (typedAdjusted >= paperWidth % charWidth);
}

function checkKey(e) {
    var mychar = '';
    var checkit = false;
    switch (e.keyCode) {
    case 66:
        mychar = e.shiftKey ? 'B' : 'b';
        checkit = checklen();
        break;
    case 67:
        mychar = e.shiftKey ? 'C' : 'c';
        checkit = checklen();
        break;
    case 68:
        mychar = e.shiftKey ? 'D' : 'd';
        checkit = checklen();
        break;

    default:
        checkit = false;
        break;
    }
    if (!checkit) {
        $('#charLine-1').append('<span class="char">' + mychar + '</span>');
    }
    else {
        $('body').append('<span id="warning">WARNING!</span>');
    }
}

让它在整个文档上工作：

$(document).ready(function(){
  $(document).keydown(function(e) { 
     checkKey(e);
  });
});

然后只需单击页面并输入字符 - 请注意上面代码中的“b”、“c”、“d”。

Answer 3

如果您观察到按键事件，您可以使用String.fromCharCode(event.keyCode) 来获取输入的字符，而不必弄乱查找表。

function (event) {
    var key = event.keyCode;
    if (key > 31 && key < 127) return String.fromCharCode(key);
}