Bagaimana Menggunakan API MutasiObserver untuk Perubahan Nod DOM

Inilah senario: Rita, seorang penulis majalah sedang menyunting artikelnya dalam talian. Dia menyelamatkan perubahannya, dan melihat mesej itu “perubahan disimpan!” Pada ketika itu, dia dapati nota kesilapan yang dia terlepas. Dia membaikinya dan akan klik “simpan”, apabila dia mendapat panggilan telefon yang marah dari bosnya.

Selepas panggilan tamat, dia kembali ke skrin, melihatnya “perubahan disimpan!” menutup komputer dan ributnya di luar pejabat.

Selain dari ketidakpastian saya untuk menceritakan kisah, kita dapati dari senario ringkas apakah masalah yang dibangkitkan mesej berterusan. Oleh itu, pada masa akan datang, kami memutuskan untuk mengelakkannya apabila mungkin dan menggunakan salah satu yang mendorong pengguna untuk mengakui dengan mengkliknya - atau hilang dengan sendirinya. Menggunakan yang kedua untuk mesej cepat adalah idea yang baik.

Kita sudah tahu bagaimana untuk membuat elemen hilang dari halaman, supaya tidak menjadi masalah. Apa yang perlu kita ketahui ialah apabila ia muncul? Jadi kita boleh membuatnya hilang selepas masa yang munasabah.

API MutasiObserver

Secara keseluruhan, apabila elemen DOM (seperti mesej div) atau mana-mana perubahan nod lain, kita sepatutnya tahu. Untuk pemaju lama perlu bergantung pada hacks dan rangka kerja kerana kurangnya API asli. Tetapi itu telah berubah.

Sekarang kita ada MutasiObserver (sebelum ini Peristiwa Mutasi). MutasiObserver adalah objek asal JavaScript dengan satu set sifat dan kaedah. Ia membolehkan kita perhatikan perubahan pada mana-mana nod seperti DOM Unsur, Dokumen, Teks, dll. Dengan mutasi, kita bermaksud penambahan atau penyingkiran nod dan perubahan kepada atribut & data nod.

Mari lihat contoh untuk memahami lebih baik. Kami akan mula membuat satu set di mana mesej muncul pada klik butang, seperti yang dilihat oleh Rita. Kemudian kami akan mencipta dan menghubungkan pemerhati mutasi ke kotak mesej itu dan kod logik untuk menyembunyikan mesej secara automatik. Savvy?

Catatan: Anda mungkin pernah bertanya pada saya di kepala “Mengapa tidak hanya menyembunyikan mesej dari dalam acara klik butang itu sendiri dalam JavaScript?” Dalam contoh saya, saya tidak bekerja dengan pelayan, jadi pelanggan bertanggungjawab untuk menunjukkan mesej dan boleh menyembunyikannya dengan mudah. Tetapi seperti dalam alat pengeditan Rita jika pelayan adalah yang memutuskan untuk mengubah kandungan DOM, pelanggan hanya boleh berjaga dan menunggu.

Pertama, kami membuat persediaan untuk menunjukkan mesej pada klik butang.

 Tunjukkan Mesej

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Perubahan Disimpan!"; / * Klik butang klik * / dokumen .querySelector ('button') .addEventListener ('klik', showMsg); fungsi showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Sebaik sahaja kita mendapat persediaan awal berjalan, mari lakukan perkara berikut;

• Buat a MutasiObserver objek dengan fungsi panggil balik pengguna yang ditentukan (fungsi ditakrifkan kemudian dalam jawatan). Fungsi ini akan dilaksanakan pada setiap mutasi yang diperhatikan oleh MutasiObserver.
• Buat objek konfigurasi untuk menentukan jenis mutasi yang akan dipatuhi oleh MutasiObserver.
• Bind the MutasiObserver kepada sasaran, iaitu 'msg' div dalam contoh kami.

(fungsi startObservation () var / * 1) Buat objek MutasiObserver * / pengamat = MutasiObserver baru (fungsi (mutasi) mutationObserverCallback (mutasi); benar; / * 3) Glue'em semua * / observer.observe (msg, config); ) (); 

Berikut ialah senarai hartanah untuk config objek mengenal pasti pelbagai jenis mutasi. Oleh kerana dalam contoh kami, kami hanya berurusan dengan nod teks anak yang dibuat untuk teks mesej, kami telah menggunakannya childList harta.

Jenis-jenis mutasi diperhatikan

Sekarang, untuk fungsi panggil balik yang akan dilaksanakan pada setiap mutasi yang diperhatikan.

mutasi fungsiObserverCallback (mutasi) / * Ambil mutasi pertama * / var mutationRecord = mutasi [0]; / * Jika nod kanak-kanak ditambah, sembunyikan mesej selepas 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  fungsi hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Oleh kerana kami hanya menambah mesej kepada div, kita akan ambil mutasi pertama yang diperhatikan di atasnya dan semak jika nod teks dimasukkan. Sekiranya kita mendapat lebih daripada satu perubahan, kita boleh melangkaui mutasi array.

Setiap mutasi di dalam mutasi array diwakili oleh objek MutasiRecord dengan sifat berikut.

Hartanah MutasiRecord

Dan ... itu sahaja. kita hanya perlu memasukkan kod itu bersama untuk langkah terakhir.

Sokongan Penyemak Imbas

Rujukan

• “Pemerhati Mutasi W3C DOM4.” W3C. Web. 19 Jun 2015
• “MutasiObserver.” Rangkaian Pembangun Mozilla. Web. 19 Jun 2015.