Pengenalan kepada API JavaScript Asli: MutationObserver, IntersectionObserver dan History API

Aplikasi web moden menuntut responsif, kecekapan dan interaktiviti dinamik. API JavaScript asli, seperti MutationObserver, IntersectionObserver dan History API, memperkasakan pembangun untuk menangani cabaran ini secara langsung, tanpa memerlukan perpustakaan luaran. Mari terokai API ini secara terperinci, fahami kes penggunaannya dan pelajari cara memanfaatkan kuasanya dengan berkesan.

Pemerhati Mutasi

Ikhtisar:

Antara muka MutationObserver memantau perubahan dalam pepohon DOM, menggantikan Peristiwa Mutasi yang kini tidak digunakan lagi. Ia boleh mengesan apabila nod ditambah, dialih keluar atau diubah suai, menjadikannya alat penting untuk aplikasi dinamik.

Ciri Utama:

• Pantau perubahan kepada pokok DOM.
• Mengesan pengubahsuaian pada atribut, nod anak dan kandungan teks.
• Beroperasi secara tidak segerak, memastikan kesan prestasi yang minimum.

S. Bagaimana MutationObserver berfungsi?

Tindasan MutationObserver dibuat dengan fungsi panggil balik yang dicetuskan apabila perubahan tertentu berlaku dalam DOM.

Pilihan dalam MutationObserver

• subpohon: Memerhati nod sasaran dan semua keturunannya.

• childList: Menonton penambahan atau pengalihan keluar nod anak.

• atribut: Menjejaki perubahan pada atribut nod sasaran.

• penapis atribut: Hadkan pemantauan kepada atribut yang ditentukan.

• attributeOldValue: Menangkap nilai sebelumnya bagi sesuatu atribut sebelum ia berubah.

• characterData: Memerhati perubahan pada kandungan teks nod.

• characterDataOldValue: Menangkap nilai kandungan teks sebelumnya sebelum pengubahsuaian.

Sintaks HTML

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Kes Penggunaan:

• Mengemas kini elemen UI secara dinamik.
• Melaksanakan gelagat tersuai untuk perubahan DOM.
• Memantau pengubahsuaian perpustakaan pihak ketiga.

Pemerhati Persimpangan

Ikhtisar:

IntersectionObserver ialah antara muka yang memerhati perubahan keterlihatan unsur sasaran secara tidak segerak berbanding bekas akar atau port pandangan. Ia biasanya digunakan untuk memuatkan malas, menatal tanpa had dan analitik.

Ciri Utama:

• Menjejaki keterlihatan elemen dengan cekap.
• Mengurangkan pergantungan pada pendengar acara tatal.
• Menawarkan kawalan terperinci ke atas nilai ambang.

S. Bagaimana pemerhati persimpangan berfungsi?

API Intersection Observer mencetuskan panggilan balik yang dipanggil apabila salah satu daripada keadaan ini berlaku:

1. Elemen sasaran bersilang sama ada port pandangan peranti atau elemen akar yang ditentukan.

2. Kali pertama pemerhati mula menonton elemen sasaran.

Pilihan dalam pemerhati persimpangan

• root: Elemen yang digunakan sebagai viewport untuk menyemak keterlihatan. Lalai kepada port pandangan penyemak imbas jika tidak dinyatakan.

• rootMargin: Jidar di sekeliling akar, dinyatakan sebagai rentetan (cth., "10px 20px"). Mengembangkan atau mengecilkan kawasan yang boleh diperhatikan.

• ambang: Nilai (atau tatasusunan nilai) antara 0 dan 1, menunjukkan peratusan keterlihatan yang diperlukan untuk mencetuskan panggilan balik.

S. Bagaimanakah persimpangan dikira?

API Intersection Observer menggunakan segi empat tepat untuk mengira kawasan persimpangan:

• Unsur berbentuk tidak sekata dianggap sesuai di dalam segi empat tepat terkecil yang melingkarinya sepenuhnya.

• Untuk elemen separa boleh dilihat, segi empat tepat terkecil yang mengandungi semua bahagian yang boleh dilihat digunakan. Ini memastikan ketekalan dalam pengukuran tanpa mengira bentuk unsur atau keterlihatan.

Sintaks Asas

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Kes Penggunaan:

• Malas memuatkan imej atau video.
• Melaksanakan tatal tak terhingga.
• Menjejak penglibatan pengguna dengan elemen tertentu.

Ciri Terperinci:

• Berbilang ambang: Perhatikan keterlihatan separa menggunakan tatasusunan ambang.
• Jing akar: Panjangkan sempadan port pandangan untuk pengesanan awal.

API Sejarah

Ikhtisar:

API Sejarah membolehkan aplikasi web memanipulasi sejarah sesi penyemak imbas. Ia membenarkan menambah, menggantikan atau mengubah suai entri tanpa memuatkan semula halaman, asas bagi Aplikasi Halaman Tunggal (SPA).

Ciri Utama:

• Urus tindanan sejarah dengan pushState dan replaceState.
• Dengar acara navigasi menggunakan popstate.
• Kemas kini bar alamat penyemak imbas tanpa muat semula halaman penuh.

Sintaks Asas:

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in the viewport.')
      // Optionally stop observing
      observer.unobserve(entry.target)
    }
  })
})

// Target elements to observe
const targetElement = document.querySelector('.lazy-load')

// Start observing
observer.observe(targetElement)

Kes Penggunaan:

• Membina SPA dengan penghalaan dinamik.
• Mengurus keadaan aplikasi dengan navigasi penyemak imbas.
• Mencipta pengalaman navigasi tersuai.
• Nota Penting:
• Pastikan sandaran yang betul untuk penyemak imbas lama.
• Gabungkan dengan parameter URL untuk SEO yang lebih baik.

Menggabungkan API Ini

API ini boleh bekerjasama untuk mencipta aplikasi web yang canggih. Contohnya:

• Gunakan MutationObserver untuk memantau perubahan DOM dinamik.
• Laksanakan IntersectionObserver kepada kandungan malas memuat ditambah oleh perubahan DOM.
• Manfaatkan API Sejarah untuk menyediakan navigasi lancar dalam aplikasi.

Contoh Kes Penggunaan:

Aplikasi blog memuatkan siaran secara dinamik apabila pengguna menatal ke bawah (skrol tak terhingga). Ia juga mengemas kini URL untuk menggambarkan siaran semasa tanpa memuatkan semula halaman, memastikan pengalaman pengguna yang lebih baik dan SEO yang dipertingkatkan.

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

Kesimpulan

API MutationObserver, IntersectionObserver dan History menawarkan penyelesaian asli yang berkuasa untuk aplikasi web dinamik dan interaktif. Dengan memahami keupayaan mereka dan menyepadukannya dengan berkesan, pembangun boleh membina aplikasi yang berprestasi dan kaya dengan ciri tanpa terlalu bergantung pada perpustakaan luaran.

Atas ialah kandungan terperinci Pengenalan kepada API JavaScript Asli: MutationObserver, IntersectionObserver dan History API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!