Тривалий час сценарій взаємодії з кнопкою був дуже простий — ми вішаємо event listener на натискання і "обробляємо" його — виконуємо якусь логіку, викликаємо якийсь функціонал чи змінюємо стан елементів. По суті, кнопка завжди виступала як ініціатор дії, але при цьому знала забагато про цю дію.
Зараз же зʼявилась можливість змінити цей підхід на декларативний в певних випадках. Мова йде про Invoker Commands API.
Якщо коротко, то це дозволяє зробити кнопку декларативним тригером, який не знає про те, яку саме логіку він запускає. Його обізнаність обмежується лише командою, яку треба передати, і пунктом призначення, який цю команду отримає. Виглядає це так:
<button command="..." commandfor="..."></button>
Де
command це імʼя команди, яку ми передаємо, а commandfor має відповідати id елемента, якому цю команду призначено. Ви вже могли бачити деякі приклади, наприклад, відкриття dialog через команду show-modal.Це, насправді, одна з суттєвих переваг цього API — для вбудованих команд тепер не потрібен JS взагалі, як в тому ж прикладі з
dialog.Важливо зрозуміти, що обробка цих команд відбувається не на кнопці по натисканню, а саме на *target* — самим бравзером для вбудованих команд, або користувацьким кодом для кастомних команд. Це дещо інша парадигма, ніж звична нам обробка кліку. Тепер сам елемент відповідає за логіку всередині себе, а кнопка лише передає команду.
До речі, так, саме *передає* напряму, а не *транслює*. Одна кнопка може передати команду лише одному цільовому елементу. Тому, до речі, подія
command не спливає, і викликається виключно на самому елементі.І Invoker Commands API підтримує користувацькі команди, які визначаються через знайомий уже нам префікс
--. Ось приклад:
<button command="--toggle" commandfor="target">
TRIGGER
</button>
<p id="target">TARGET</p>
document
.getElementById('target')
.addEventListener('command', event => {
if (event.command === '--toggle') {
event.target.classList.toggle('foo')
}
})
Демо на JSFiddle
Як бачимо, саме елемент параграфу відповідає за зміну свого стану, а кнопка лише передає команду в момент натискання. До речі, обʼєкт події тут —
CommandEvent, а не PointerEvent. Окрім command можна дізнатися, хто саме відправив команду через властивість source.Ми можемо мати скільки завгодно тригерів, але лише один цільовий елемент. Тобто нашим
target може командувати безліч кнопок, але одна кнопка не може командувати більш ніж одним елементом. Звичайно, було б зручно саме транслювати команди в певних випадках, але поки як є. Можливо, згодом зʼявиться і така можливість.Поки ж Invoker Commands API уже зробив надзвичайно важливу річ — надав можливість декларативного підходу для опису взаємодії з UI. Тепер control flow виглядає логічніше: ініціатор — ціль — намір, де обробка наміру відбувається саме ціллю.
Що дуже важливо — не варто сприймати це як "заміну" кліку. Також не варто відкидати це в сторону, бо "дуже мало вбудованих команд, нашо воно мені треба". Головна цінність Invoker Commands API саме у зміні парадигми того, як взаємодіють елементи інтерфейсу між собою у відповідь на дії користувача. Тобто ми передаємо обробку від кнопки до самого елемента.
І для цього цей API надає зручніші, простіші й логічніші інструменти.
До речі, ви вже пробували Invoker Commands API чи плануєте спробувати? Поділіться досвідом в коментарях.
P.S. Не буде вподобайок — не буде дописів. Я серйозно.
Що почитати:
MDN: Invoker Commands API
Що почитати душнілам:
WHATWG: "command" attribute
WHATWG: "commandfor" attribute
@babichdev
***
Збір на РЕБ для 115 ОМБр: 36_871 / 300_000грн