lazalu68
@lazalu68
Salmon

Как рационально организовать обработку keyboards events?

Собственно, цель вопроса - узнать, как вы организовываете обработку клавиш с помощью JS.

Например, у меня есть поделка, в которой разноцветные блоки выделяются как по наведению мышки, так и с помощью стрелочек, стрелочек на нампаде, клавиши таба и клавиш WASD. В этой поделке обработка клавиш сделана так:

Создается массив actions, в который я собираюсь класть функции для обработки нажатий определенных клавиш. Ссылка на функцию кладется в элементы с порядковым номером, равным keyCode нужных клавиш:

var actions = []

// 39 - стрелка вправо, 68 - клавиша D, 102 - стрелка вправо на нампаде
actions[39] = actions[68] = actions[102] = function() {}


Потом создается функция, которая по переданному ей e.keyCode ищет функцию, и если функция найдена, выполняет ее:

var t

keyAction = function(e) {
  return (t = actions[e.keyCode]) && t(e)
}

$( window ).on('keydown', keyAction)


Лишная переменная используется для того, чтобы избежать повторного обращения к массиву actions, если все же функция найдена.

Мне интересно, какие вы видите минусы в таком подходе, адекватен ли он, и как вы сами организуете обработку клавиш с помощью JS.

Заранее спасибо!
  • Вопрос задан
  • 256 просмотров
Решения вопроса 1
RubaXa
@RubaXa
Ну, выглядит страшно, все эти магические цифры (коды клавиш), а этот кусок совсем мрак:
actions[9] =  function(e) { // tab
  e.preventDefault();
  actions[39]();
}

Сам бы наверно сделал, что-то подобное:
keyboard.register(['a', 'b', 'tab'], (evt) => {
  console.log(evt);
});

Вот полный пример: jsbin.com/yeborunuje/edit?js,output

UPD. Хотя вру на самом деле, на данный момент использую keymaster (точнее его форк, но это не важно), там уже решены многие проблемы, например отлов не просто нажатия отдельных клавиш, но и комбинаций.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
https://jsfiddle.net/kkwfq2ds. По сути тоже самое, только чище. Но в этом и суть вашего кода: его невозможно читать и в нём много мелких технических недочётов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы