Perintah dan Konteks yang Berlaku
Anda memerlukan tombol pengaturan yang membuka dialog dan menutupnya tanpa menduplikasi sinkronisasi state komponen. Jelaskan bagaimana command dan commandfor menciptakan kontrol deklaratif, termasuk perintah kustom, aksesibilitas keyboard, dan fallback untuk browser yang lebih lama.
Invoker Commands API memungkinkan tombol menargetkan ID elemen dan memanggil tindakan bawaan atau mengirimkan event command kustom. Ini mengekspresikan siapa yang memanggil dan elemen mana yang bertindak dalam HTML, tetapi tidak menggantikan state machine bisnis, pemeriksaan izin, atau fallback browser yang tidak didukung.
Apa yang Dievaluasi oleh Pewawancara
Cakup persyaratan target dalam pohon (tree) yang sama untuk commandfor, perintah bawaan versus kustom, pembatalan event dan perilaku default, manajemen keyboard dan fokus, serta peningkatan progresif alih-alih memperlakukan atribut baru sebagai satu-satunya jaminan runtime.
Pertanyaan Klarifikasi
Konfirmasikan apakah targetnya adalah dialog modal, popover non-modal, atau elemen biasa; apakah tombol dan target berada dalam pohon yang sama; apakah validasi pengiriman formulir diperlukan; dan browser mana yang perlu didukung. Perjelas juga fokus awal, perilaku tombol Escape, pengembalian fokus, dan apakah perintah kustom memerlukan otorisasi bisnis.
Kerangka Jawaban 30 Detik
“Saya akan mengarahkan commandfor ke target dan menggunakan perintah bawaan untuk menampilkan, menyembunyikan, atau beralih (toggle). Tindakan bisnis menggunakan event command kustom di mana controller memvalidasi state dan dapat mencegah perilaku default. Tombol bawaan dapat dijangkau keyboard, tetapi saya tetap akan memverifikasi entri fokus, Escape, pengembalian fokus, dan accessible name. Browser lama mempertahankan fallback JavaScript atau komponen yang memanggil state machine yang sama, sehingga jalur native dan fallback tetap setara.”
Pembahasan Mendalam Langkah demi Langkah
Langkah 1: Deklarasikan hubungan tombol ke target
Nilai commandfor adalah ID elemen target, dan kedua elemen harus berada di pohon yang sama. Nilai command pada tombol memilih tindakan. Oleh karena itu, HTML statis dapat mengekspresikan kontrol tanpa kueri manual dan duplikasi sinkronisasi state.
Langkah 2: Utamakan perintah bawaan
Dialog dan popover mendefinisikan perintah browser untuk menampilkan, menyembunyikan, dan beralih. Perilaku native dapat bekerja sama dengan aturan top-layer, light-dismiss, dan fokus. Jangan mengimplementasikan ulang semantik yang ada dengan string kustom.
<button commandfor="settings" command="show-modal">
Open settings
</button>
<dialog id="settings">
<button commandfor="settings" command="close">Close</button>
</dialog>Langkah 3: Tangani event command kustom
Perintah kustom yang diawali dengan -- akan mengirimkan event command yang berisi target dan nilai perintah. Handler harus memvalidasi asal dan state saat ini, memanggil preventDefault() jika diperlukan, dan menjalankan tindakan bisnis. Perintah kustom tidak mengubah visibilitas secara otomatis.
Langkah 4: Simpan otorisasi dan validasi dalam kode bisnis
Pemanggilan deklaratif mengekspresikan niat; hal ini tidak dapat melewati otorisasi, validasi formulir, atau persistensi asinkron. Controller target harus memeriksa izin, versi data, dan state saat ini sebelum bertindak, serta mengembalikan error yang dapat dipulihkan alih-alih memperlakukan HTML sebagai batas keamanan.
Langkah 5: Rancang perilaku fokus dan keyboard
Untuk dialog dan popover native, verifikasi fokus awal, penutupan dengan Escape, pengembalian fokus, dan accessible name. Elemen biasa tidak mendapatkan semantik ini secara otomatis. Target kustom membutuhkan model keyboard dan kebijakan fokus yang eksplisit.
Langkah 6: Tangani pembatalan dan race condition
Beberapa tombol dapat mengeluarkan perintah secara bersamaan. Periksa state target saat ini untuk mencegah pembukaan ganda, pengiriman ganda, atau pembukaan kembali asinkron yang basi setelah ditutup. Pisahkan state bisnis asinkron dari state yang terlihat sehingga kegagalan tidak meninggalkan state ARIA atau fokus yang salah.
Langkah 7: Sediakan fallback untuk browser lama
Browser yang tidak mendukung commandfor mengabaikan atribut tersebut, jadi pertahankan listener tombol normal atau binding komponen. Gunakan kembali command handler dan pengujian aksesibilitas yang sama alih-alih mempertahankan dua perilaku yang berbeda arah.
Langkah 8: Uji jalur native dan fallback
Uji mouse, keyboard, screen reader, Escape, pengembalian fokus, perintah duplikat, default yang dibatalkan, izin yang ditolak, dan kegagalan asinkron. Gunakan matriks browser untuk perintah bawaan, event kustom, dan tipe target; label MDN Baseline bukanlah jaminan untuk setiap runtime.
Contoh Jawaban Berkualitas Tinggi
Saya akan mengarahkan tombol statis dengan commandfor ke dialog di pohon yang sama dan menggunakan perintah bawaan show-modal dan close untuk perilaku dasar. Logika bisnis akan menggunakan event command kustom yang handlernya memeriksa otorisasi, versi formulir, dan state saat ini serta dapat mencegah perilaku default; perintah kustom itu sendiri tidak mengubah visibilitas. Dialog native menyediakan semantik modal, tetapi saya tetap akan menguji fokus, Escape, pengembalian fokus, dan accessible name. Browser lama mengabaikan atribut baru tersebut, jadi listener fallback akan memanggil command handler yang sama. Terakhir, uji perilaku keyboard dan screen reader, klik bersamaan, kegagalan asinkron, dan matriks browser di kedua jalur.
Kesalahan Umum
Menganggap commandfor mencari melintasi Shadow DOM atau dokumen
Spesifikasi mengharuskan ID target berada di pohon yang sama. Kontrol lintas-pohon atau lintas-dokumen memerlukan protokol komponen atau pengiriman pesan yang eksplisit, bukan ID yang berbeda.
Menganggap setiap perintah kustom memiliki perilaku default
Perintah kustom terutama hanya mengirimkan sebuah event. Handler harus mengimplementasikan perubahan state dan menentukan kapan perilaku default dibatalkan.
Hanya menguji klik mouse
Keterjangkauan keyboard, urutan fokus, Escape, dan umpan balik screen reader adalah bagian dari kontrak interaksi. State terbuka secara visual bukanlah bukti aksesibilitas yang lengkap.
Pertanyaan Lanjutan dan Tanggapan
Apakah penggantian target dinamis memerlukan pengikatan ulang (rebinding) commandfor?
Jika pengganti mempertahankan ID yang sama dan tetap berada di pohon yang sama, hubungan deklaratif dapat berlanjut. Controller tetap harus mereset fokus dan state bisnis. ID duplikat atau target yang hilang harus memblokir perintah dan menampilkan state yang dapat didiagnosis.
Bagaimana cara mencegah pengiriman duplikat dari perintah asinkron kustom?
Gunakan request state atau idempotency key untuk mengunci tindakan yang sama, tandai tombol sebagai sibuk (busy), dan sediakan jalur pembatalan atau percobaan ulang. Setelah selesai, konfirmasikan bahwa target masih ada sehingga hasil lama tidak dapat mengubah sesi baru.
Kapan komponen JavaScript harus dipertahankan daripada hanya menggunakan perintah HTML?
Gunakan komponen ketika interaksi membutuhkan koordinasi lintas-pohon, animasi yang kompleks, state machine asinkron, atau dukungan browser warisan yang luas. command masih dapat menjadi titik masuk peningkatan progresif, tetapi batasan bisnis harus tetap dapat diuji.