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

Question

[Kovalsky]

Собственно, цель вопроса - узнать, как вы организовываете обработку клавиш с помощью 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.

Заранее спасибо!

Answer 1

[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 (точнее его форк, но это не важно), там уже решены многие проблемы, например отлов не просто нажатия отдельных клавиш, но и комбинаций.

Comments

[Kovalsky]

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

var t

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

То есть наверное можно как-то обойтись без того, чтобы обращаться к массиву дважды и без сохранения функции в переменную, но я не знаю как(

И кстати почему тот кусок "совсем мрак"?) Вроде такой же, как все

[RubaXa]

«ничего лишнего» — экономия на спичках и потенциальный баг, а как только понадобится добавить shift+down, что делать, переписывать? Конечно потом можно ещё и ещё городить, но правильно, это взять проверенный инструмент, а не стрелять себе в колено.

Answer 2

[Константин Громов]

https://jsfiddle.net/kkwfq2ds. По сути тоже самое, только чище. Но в этом и суть вашего кода: его невозможно читать и в нём много мелких технических недочётов.

Comments

[Kovalsky]

Тогда мне придется объявить еще с дюжину переменных для каждой кнопки, которую я хочу обрабатывать) Это как-то не очень.

А что насчет технических недочетов?

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

Я говорю об этом:

$(document).on("keydown", function(event) {
  return actions[event.which] && actions[event.which](event);
});

У меня вроде бы одно обращение:

var t

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

[Константин Громов]

Никита Полевой: Занесение кодов в переменные несёт описательный характер (пояснять их в комментариях менее эффективно) и позволяет держать в голове меньше информации, не говоря о наглядности для человека, которому может придётся разбираться в вашем коде.

return actions[event.which] && actions[event.which](event);

if (actions[event.which]) {
return actions[event.which](event);
}

Эти два выражения равноценны. Проверка нужна, чтобы в случае отсутствия функции соответствующей коду не применять вызов на undefined (это создаёт ошибку). В вашем коде происходит тоже самое. Если вынесете присваивание отдельно, то станет нагляднее:

t = actions[e.keyCode];
return t && t(e);

Из технических проблем: хранение функций в разреженном массиве вместо объекта. На работе скрипта это не сказывается, но очень грязно. Ещё объявление переменных без ключевого слова var. В таких случаях переменные создаются в глобальной области видимости, а не в той, в которой были объявлены. Это очень быстро приводит к проблемам.

[Kovalsky]

Ну, можно и в объекте, так и было пару версий назад, но потом я из каких-то слухов решил, что обращение к массиву будет обрабатываться быстрее, чем обращение к объекту. Я не прав?

[Kovalsky]

Вот, переделал так, чтобы все было в одном объекте, который собран конструктором. По поводу переменных тоже все исправил.

Зато код теперь выглядит отвратительно( Можно было как-то это сделать без постоянного упоминания this и base?

[Константин Громов]

Никита Полевой: Массивы предназначены для работы с упорядоченными данными, желательно одного типа. Если массив становится разреженным и/или ему добавляется любое свойство не являющееся целым числом, тогда интерпретатор работает с ним как с объектом со всеми вытекающими, включая понижение скорости обращения и размер занимаемой памяти.

Если вы пишете var base = this, то используйте эту переменную везде, где она эквивалентна this в текущей области. Иметь одну сущность под разными именами не лучшая идея. Сам this при работе с объектами неизбежен, и я не понимаю зачем было оборачивать всё в конструктор.

[Kovalsky]

В конструктор обернул, потому что не знал, как в одно действие создать объект со свойствами, ссылающимися на свойства этого же объекта (например, я пытался объявить свойства container : $() и items : container.children(), получается ошибка). В итоге получилось вот это

Ошибки наконец-то исчезли ?)

[Константин Громов]

Никита Полевой: Да. Почитайте про форматирование кода (например learn.javascript.ru/coding-style ) и про паттерны программирования. Будет ещё лучше.

[Kovalsky]

Спасибо большое)

Answer 3

[Слава]

www.openjs.com/scripts/events/keyboard_shortcuts

Comments

[Kovalsky]

Красота) Массивная какая штуковина