Gesaan dan konteks
Produk memerlukan pratonton ringan apabila pengguna menunjukkan minat pada nama pengguna, pautan dokumen, atau istilah, tetapi kandungan mesti kekal boleh digunakan apabila hover hilang, pengguna menavigasi menggunakan papan kekunci, atau peranti adalah jenis sentuhan sahaja. Gunakan interest invokers HTML dan Popover API, serta terangkan lengah, fokus, penolakan (dismissal), pelayar yang tidak disokong, dan kegagalan memuatkan data.
MDN menerangkan interestfor sebagai cara deklaratif untuk mengaitkan butang atau pautan dengan elemen sasaran; apabila sasaran ialah popover, pelayar boleh memaparkannya secara automatik semasa minat wujud. Dokumen penerangan Open UI mendokumentasikan motivasi untuk kad hover. Artikel ini menyintesis bahan awam dan tidak mendakwa sebagai soalan temu duga khusus syarikat.
Perkara yang diuji oleh penemu duga
Penemu duga ingin melihat sama ada anda menganggap "hover" sebagai satu keadaan minat yang merangkumi penuding, fokus, sentuhan, dan teknologi bantuan. Jawapan yang mantap menyebut interest/loseinterest, interest-delay-*, lapisan atas (top layer) popover, pengurusan fokus, laluan teras tanpa JavaScript, dan peningkatan progresif; jawapan yang lemah hanya mengikat mouseenter/mouseleave.
Soalan untuk dijelaskan terlebih dahulu
- Adakah pratonton maklumat tambahan atau diperlukan untuk menyelesaikan tugasan?
- Adakah kandungan sasaran berasal dari sumber yang sama (same-origin) dan boleh dicache, serta bolehkah ia dimuatkan secara lambat (lazily)?
- Bagaimanakah peranti sentuh patut membuka dan menutupnya, dan adakah ketukan harus menavigasi ke halaman butiran?
- Bagaimanakah pautan teras kekal boleh digunakan apabila pelayar tiada interest invokers?
Jawapan 30 saat
"Saya akan mengekalkan pautan biasa yang menghala ke halaman butiran dan menggunakan interestfor untuk mengaitkannya dengan pratonton popover. Lengah minat mengurangkan pengaktifan tidak sengaja; di mana disokong, tingkah laku deklaratif meliputi penuding dan fokus. Pelayar yang tidak disokong tidak kehilangan pautan, dan polifil JavaScript yang minimum boleh menambah pratonton. Data pratonton boleh dimuatkan secara tak segerak tetapi tidak boleh menyekat navigasi. Penolakan menghormati semantik fokus dan Escape, dan reduced motion menyingkirkan animasi."
Penyelesaian langkah demi langkah
Secara struktur, pautan atau butang ialah interest invoker, manakala sasaran mempunyai id dan popover yang stabil. Nilai interestfor invoker merujuk id tersebut. Jika sasaran ialah popover, platform meletakkannya dalam lapisan atas dan menggunakan tingkah laku kitaran hayat popover; sasaran juga boleh menjadi elemen biasa yang dipaparkan oleh aplikasi selepas mendengar peristiwa minat.
Lengah menghalang sapuan penuding yang pantas merentasi pautan daripada memulakan banyak permintaan. Gunakan interest-delay-start dan interest-delay-end, atau pendikit aplikasi yang setara, paparkan rangka (skeleton) terlebih dahulu, dan ambil data melalui kunci cache. Apabila minat meninggalkan invoker, memasuki popover sasaran, atau berpindah ke pautan lain, batalkan kerja yang belum selesai dan biarkan niat terkini diutamakan.
Papan kekunci dan sentuhan tidak boleh bergantung pada hover. Memfokuskan pautan harus mendedahkan pratonton yang sama, Escape harus menutupnya, dan susunan Tab masih boleh mencapai halaman butiran. Pada peranti sentuh, produk boleh menunjukkan pratonton pada ketukan pertama dan menavigasi pada ketukan kedua, atau menavigasi secara terus sambil menawarkan kawalan pratonton berasingan; pilih satu peraturan yang jelas untuk mengelakkan konflik gerak isyarat.
Kebolehcapaian memerlukan nama sasaran yang boleh dibaca, hubungan yang betul, dan maklum balas keadaan. Apabila pratonton adalah tambahan, jangan paksa fokus ke dalam popover; jika ia mengandungi kawalan interaktif, tentukan laluan kemasukan dan pemulangan fokus yang jelas. Pengguna pembaca skrin mesti boleh mencapai halaman butiran secara terus, walaupun pemuatan pratonton gagal.
Pengesanan keupayaan dan sandaran melindungi laluan teras. Tanpa interestfor atau Popover API, pautan menavigasi secara normal, manakala pratonton boleh diturunkan mutunya kepada klik-untuk-buka atau ditinggalkan. Polifil hanya perlu menambah tingkah laku paparan, bukannya melaksanakan semula setiap lapisan atas, fokus, dan sempadan keselamatan; ukur kadar sokongan, kadar pembukaan pratonton, kegagalan muatan, dan penukaran navigasi.
Contoh jawapan yang mantap
Saya akan menjadikan pautan sebagai navigasi teras dan interest invoker sebagai lapisan pratonton pilihan. interestfor merujuk kepada id yang stabil dan sasaran menggunakan popover; platform mengendalikan minat penuding/fokus manakala lengah dan caching mengawal permintaan. Fokus papan kekunci berfungsi, Escape menolak pratonton, dan sentuhan mengikut peraturan ketukan yang jelas. Pelayar yang tidak disokong mengekalkan pautan biasa, dan kegagalan pratonton hanya menjejaskan lapisan tambahan, bukan akses ke halaman butiran.
Kesilapan biasa
- Gejala → Hanya mendengar mouseenter; sebab ia gagal → Papan kekunci, sentuhan, dan teknologi bantuan tidak boleh mencetuskannya; pembetulan → Tumpukan minat dan fokus, sambil mengekalkan navigasi.
- Gejala → Alihkan fokus ke dalam pratonton sebaik sahaja ia muncul; sebab ia gagal → Ia mengganggu seseorang yang sedang membaca pautan; pembetulan → Alihkan fokus hanya apabila kawalan interaktif dan peraturan yang jelas memerlukannya.
- Gejala → Ambil data pada setiap hover; sebab ia gagal → Sapuan pantas menghasilkan lambakan permintaan; pembetulan → Gunakan lengah, pembatalan, caching, dan pengendalian niat-terkini-diutamakan.
- Gejala → Sekat pautan apabila tidak disokong; sebab ia gagal → API eksperimen menjadi kebergantungan untuk kandungan teras; pembetulan → Kekalkan pautan biasa sebagai sandaran tanpa syarat.
Soalan susulan dan jawapan
Mengapakah sasaran pratonton tidak selalu memerlukan popover?
interestfor boleh mengaitkan invoker dengan sasaran biasa, selepas itu kod aplikasi mendengar peristiwa minat dan mengawal paparan. Popover memberikan platform semantik lapisan atas dan penolakan. Pilih berdasarkan sama ada tingkah laku kitaran hayat asli dan kawalan deklaratif ringan berguna.
Bagaimanakah anda menghalang pratonton daripada menutup pautan lain?
Berikan sasaran peraturan kedudukan dan perlanggaran yang stabil, gunakan lengah penamat apabila keluar, dan anggap kemasukan ke dalam popover sebagai minat yang berterusan. Semasa pertukaran pantas, batalkan permintaan lama, tutup sasaran lama, dan laksanakan hasil invoker terkini sahaja.
Apakah yang perlu berlaku apabila pemuatan pratonton gagal?
Tunjukkan keadaan boleh cuba semula yang ringkas di dalam pratonton dan sediakan pautan butiran terus; jauhkan ralat daripada kandungan utama halaman. Rekodkan sebab kegagalan dan kependaman, serta langkau animasi pratonton atau navigasi terus apabila bajet masa dilebihi.