Мне всегда нравилось, как Visual Studio Code позволяет изменять/добавлять привязку клавиш в JSON-объекте, что, на мой взгляд, является довольно приятным интерфейсом.
Взяв его за образец, я захотел создать похожее и масштабируемое решение для приложения Angular.
Чтобы добиться довольно масштабируемого решения, не забывая об утечке памяти и сборке мусора зарегистрированных ярлыков в большом приложении. Таким образом, была выбрана архитектура, основанная на компонентах.
Библиотека поддерживает как Windows, так и Mac, имеет хороший встроенный экран справки, показывающий все зарегистрированные ярлыки, а также сервис для создания пользовательского экрана справки при необходимости.
Вы можете найти библиотеку здесь:
А поиграть с рабочим примером можно здесь
Как это работает
- Для оптимизации производительности в теле документа регистрируется только один слушатель событий.
- Каждый ярлык проверяется при нажатии клавиши (эта часть все еще может быть оптимизирована и будет оптимизирована в будущем, но на данный момент фильтрация происходит довольно быстро, так что даже при 100 зарегистрированных ярлыках замедление не заметно).
- Вы можете использовать директиву, чтобы нацелить ярлык на работу только тогда, когда определенный элемент находится в фокусе.
- Или использовать компонент, который добавит глобальный ярлык в ваше приложение, и будет автоматически очищен, когда компонент будет уничтожен.
Обратная связь
Это первая библиотека, которую я публикую в NPM, любая обратная связь, связанная с кодом, документацией или чем-либо еще, будет очень признательна.