Gesaan dan Konteks Berkenaan
Anda memerlukan butang tetapan yang membuka dialog dan menutupnya tanpa menduplikasi penyelarasan keadaan komponen. Terangkan bagaimana command dan commandfor menghasilkan kawalan deklaratif, termasuk arahan tersuai, kebolehcapaian papan kekunci, dan sandaran untuk pelayar yang lebih lama.
Invoker Commands API membolehkan butang mensasarkan ID elemen dan memanggil tindakan terbina dalam atau menghantar peristiwa command tersuai. Ia menyatakan siapa yang memanggil dan elemen mana yang bertindak dalam HTML, tetapi ia tidak menggantikan mesin keadaan perniagaan, semakan kebenaran, atau sandaran pelayar yang tidak disokong.
Perkara yang Dinilai oleh Penemu Bual
Kupas keperluan sasaran dalam pepohon (tree) yang sama untuk commandfor, arahan terbina dalam berbanding tersuai, pembatalan peristiwa dan tingkah laku lalai, pengurusan papan kekunci dan fokus, serta peningkatan progresif dan bukannya menganggap atribut baharu sebagai satu-satunya jaminan masa jalanan.
Soalan Penjelasan
Sahkan sama ada sasaran ialah dialog modal, popover bukan modal, atau elemen biasa; sama ada butang dan sasaran berkongsi pepohon yang sama; sama ada pengesahan penyerahan diperlukan; dan pelayar mana yang penting. Jelaskan juga fokus awal, tingkah laku Escape, pemulangan fokus, dan sama ada arahan tersuai memerlukan kebenaran perniagaan.
Rangka Jawapan 30 Saat
“Saya akan menghalakan commandfor ke sasaran dan menggunakan arahan terbina dalam untuk papar, sembunyi, atau togol. Tindakan perniagaan menggunakan peristiwa arahan tersuai di mana pengawal mengesahkan keadaan dan boleh menghalang tingkah laku lalai. Butang natif boleh dicapai papan kekunci, tetapi saya masih akan mengesahkan kemasukan fokus, Escape, pemulangan fokus, dan nama yang boleh diakses. Pelayar yang lebih lama mengekalkan sandaran JavaScript atau komponen yang memanggil mesin keadaan yang sama, supaya laluan natif dan sandaran kekal setara.”
Perincian Langkah demi Langkah
Langkah 1: Isytiharkan hubungan butang-ke-sasaran
Nilai commandfor ialah ID elemen sasaran, dan kedua-dua elemen mestilah berada dalam pepohon yang sama. Nilai command butang memilih tindakan. Oleh itu, HTML statik boleh menyatakan kawalan tanpa pertanyaan manual dan pertindihan penyelarasan keadaan.
Langkah 2: Utamakan arahan terbina dalam
Dialog dan popover mentakrifkan arahan pelayar untuk memaparkan, menyembunyikan dan menogol. Tingkah laku natif boleh bekerjasama dengan peraturan lapisan atas (top-layer), light-dismiss, dan fokus. Jangan laksanakan semula semantik sedia ada dengan rentetan tersuai.
<button commandfor="settings" command="show-modal">
Open settings
</button>
<dialog id="settings">
<button commandfor="settings" command="close">Close</button>
</dialog>Langkah 3: Kendalikan peristiwa arahan tersuai
Arahan tersuai yang bermula dengan -- menghantar peristiwa command yang mengandungi sasaran dan nilai arahan. Pengendali harus mengesahkan punca dan keadaan semasa, memanggil preventDefault() apabila diperlukan, dan menjalankan tindakan perniagaan. Arahan tersuai tidak mengubah keterlihatan secara automatik.
Langkah 4: Kekalkan kebenaran dan pengesahan dalam kod perniagaan
Pemanggilan deklaratif menyatakan niat; ia tidak boleh memintas kebenaran, pengesahan borang, atau ketekalan tak segerak (asynchronous persistence). Pengawal sasaran harus menyemak kebenaran, versi data, dan keadaan semasa sebelum bertindak, dan mengembalikan ralat yang boleh dipulihkan dan bukannya menganggap HTML sebagai sempadan keselamatan.
Langkah 5: Reka bentuk tingkah laku fokus dan papan kekunci
Bagi dialog dan popover natif, sahkan fokus awal, penutupan dengan Escape, pemulangan fokus, dan nama yang boleh diakses. Elemen biasa tidak memperoleh semantik ini secara automatik. Sasaran tersuai memerlukan model papan kekunci dan dasar fokus yang eksplisit.
Langkah 6: Kendalikan pembatalan dan keadaan perlumbaan (race conditions)
Beberapa butang boleh mengeluarkan arahan serentak. Semak keadaan semasa sasaran untuk mengelakkan pembukaan berganda, penyerahan, atau pembukaan semula tak segerak yang basi selepas ditutup. Asingkan keadaan perniagaan tak segerak daripada keadaan yang kelihatan supaya kegagalan tidak meninggalkan keadaan ARIA atau fokus yang salah.
Langkah 7: Sediakan sandaran untuk pelayar lama
Pelayar yang tidak menyokong commandfor mengabaikan atribut tersebut, jadi kekalkan pendengar butang biasa atau pengikatan komponen. Gunakan semula pengendali arahan dan ujian kebolehcapaian yang sama daripada mengekalkan dua tingkah laku yang berbeza.
Langkah 8: Uji laluan natif dan sandaran
Uji tetikus, papan kekunci, pembaca skrin, Escape, pemulangan fokus, arahan pendua, lalai yang dibatalkan, kebenaran ditolak, dan kegagalan tak segerak. Gunakan matriks pelayar untuk arahan terbina dalam, peristiwa tersuai, dan jenis sasaran; label MDN Baseline bukanlah jaminan untuk setiap masa jalanan.
Sampel Jawapan Berkualiti Tinggi
Saya akan menghalakan butang statik dengan commandfor ke dialog dalam pepohon yang sama dan menggunakan arahan terbina dalam show-modal dan close untuk tingkah laku asas. Logik perniagaan akan menggunakan peristiwa arahan tersuai yang pengendalinya menyemak kebenaran, versi borang, dan keadaan semasa serta boleh menghalang tingkah laku lalai; arahan tersuai itu sendiri tidak menogol keterlihatan. Dialog natif membekalkan semantik modal, tetapi saya masih akan menguji fokus, Escape, pemulangan fokus, dan nama yang boleh diakses. Pelayar yang lebih lama mengabaikan atribut baharu ini, jadi pendengar sandaran memanggil pengendali arahan yang sama. Akhir sekali, uji tingkah laku papan kekunci dan pembaca skrin, klik serentak, kegagalan tak segerak, dan matriks pelayar merentasi kedua-dua laluan.
Kesilapan Biasa
Menganggap commandfor mencari merentasi Shadow DOM atau dokumen
Spesifikasi memerlukan ID sasaran berada dalam pepohon yang sama. Kawalan merentasi pepohon atau merentasi dokumen memerlukan protokol komponen atau pemesejan yang jelas, bukan ID yang berbeza.
Menganggap setiap arahan tersuai mempunyai tingkah laku lalai
Arahan tersuai pada asasnya hanya menghantar peristiwa. Pengendali mesti melaksanakan perubahan keadaan dan menentukan bila tingkah laku lalai dibatalkan.
Menguji klik tetikus sahaja
Kebolehcapaian papan kekunci, susunan fokus, Escape, dan maklum balas pembaca skrin adalah sebahagian daripada kontrak interaksi. Keadaan terbuka secara visual bukanlah bukti kebolehcapaian yang lengkap.
Soalan Susulan dan Maklum Balas
Adakah penggantian sasaran dinamik memerlukan pengikatan semula commandfor?
Jika penggantian mengekalkan ID yang sama dan kekal dalam pepohon yang sama, hubungan deklaratif boleh diteruskan. Pengawal masih perlu menetapkan semula fokus dan keadaan perniagaan. ID pendua atau sasaran yang hilang harus menyekat arahan dan mendedahkan keadaan yang boleh didiagnosis.
Bagaimana anda mengelakkan penyerahan pendua daripada arahan tak segerak tersuai?
Gunakan keadaan permintaan atau kunci keidempotennan (idempotency key) untuk mengunci tindakan yang sama, tandakan butang sebagai sibuk (busy), dan sediakan laluan batal atau cuba semula. Selepas selesai, sahkan bahawa sasaran masih wujud supaya hasil lama tidak dapat mengubah sesi baharu.
Bilakah komponen JavaScript harus dikekalkan dan bukannya hanya menggunakan arahan HTML?
Gunakan komponen apabila interaksi memerlukan penyelarasan merentasi pepohon, animasi yang kompleks, mesin keadaan tak segerak, atau sokongan pelayar legasi yang meluas. command masih boleh menjadi titik masuk peningkatan progresif, tetapi sempadan perniagaan mesti kekal boleh diuji.