Dalam artikel sebelumnya, saya menunjukkan kepada anda cara refactor API Observer Resize menjadi sesuatu yang lebih mudah untuk digunakan:

 // dari ini
Const Observer = ResizeObserver Baru (Observerfn)

fungsi observerfn (entri) {
  untuk (biarkan kemasukan penyertaan) {
    // Lakukan sesuatu dengan setiap entri
  }
}

const element = document.QuerySelector ('#some-element')
Observer.observe (elemen);

 // untuk ini 
const node = document.QuerySelector ('#some-element')
const obs = resizeObserver (node, {
  Callback ({entry}) {
    // Lakukan sesuatu dengan setiap entri
  }
})

Hari ini, kita akan melakukan perkara yang sama untuk MutationObserver dan IntersectionObserver.

Pemerhati mutasi refactoring

MutationObserver mempunyai API hampir sama dengan resizeobserver. Oleh itu, kita boleh boleh menyalin-paste keseluruhan sebahagian kod yang kami tulis untuk ResizeObserver kepada MutationObserver.

 Fungsi Eksport MutationObserver (node, options = {}) {
  Const Observer = New MutationObserver (Observerfn)
  const {callback, ... opts} = pilihan
  Observer.observe (nod, memilih)

  fungsi observerfn (entri) {
    untuk (penyertaan penyertaan) {
      // corak panggil balik
      jika (options.callback) options.callback ({entry, entries, Observer})
      // corak pendengar acara
      lain {
        node.dispatchevent (
          CustomEvent baru ('bermutasi', {
            Detail: {entry, entries, Observer},
          })
        )
      }
    }
  }
}

Anda kini boleh menggunakan MutationObserver dengan corak panggilan balik atau corak pendengar acara.

 const node = document.QuerySelector ('. Some-element')

// corak panggil balik 
const obs = mutationObserver (nod, {
  Callback ({entry, entries}) {
    // Lakukan apa yang anda mahukan dengan setiap entri
  }
})

// corak pendengar acara
node.addeventListener ('mutate', event => {
  const {entry} = event.detail
  // Lakukan apa yang anda mahukan dengan setiap entri
})

Lebih mudah!

Putuskan sambungan pemerhati

Tidak seperti ResizeObserver yang mempunyai dua kaedah untuk berhenti mengamati unsur -unsur, MutationObserver hanya mempunyai satu, kaedah putus.

 Fungsi Eksport MutationObserver (node, options = {}) {
  // ... 
  kembali {
    putuskan sambungan () {
      Observer.disconnect ()
    }
  }
}

Tetapi, mutationobserverhas atakerecordsmethod yang membolehkan youget yang tidak diproses sebelum anda memutuskan sambungan. Oleh kerana kita harus mengambil Takerecords sebelum kita memutuskan sambungan, mari kita gunakannya di dalam putuskan sambungan.

Untuk membuat API lengkap, kita boleh mengembalikan kaedah ini juga.

 Fungsi Eksport MutationObserver (node, options = {}) {
  // ... 
  kembali {
    // ...
    putuskan sambungan () {
      Const Records = Observer.TakeRecords ()
      Observer.disconnect ()
      jika (records.length> 0) Observerfn (Rekod)
    }
  }
}

Sekarang kita boleh memutuskan pengamat mutasi kita dengan mudah dengan putus sambungan.

 const node = document.QuerySelector ('. Some-element')
const obs = mutationObserver (/ * ... */)

obs.disconnect ()

MutationObserver memerhatikan pilihan

Sekiranya anda tertanya -tanya, kaedah pemerhatian MutationObserver boleh mengambil 7 pilihan. Setiap satu daripada mereka menentukan apa yang harus diperhatikan, dan mereka semua lalai kepada palsu.

• Subtree: Memantau keseluruhan subtree nod
• Senarai kanak -kanak: Monitor untuk elemen tambahan atau penyingkiran kanak -kanak. Jika Subtree adalah benar, ini memantau semua elemen keturunan.
• Atribut: Monitor untuk perubahan atribut
• AttributeFilter: pelbagai atribut khusus untuk memantau
• AttributeoldValue: sama ada untuk merakam nilai atribut sebelumnya jika ia ditukar
• WatakData: Monitor untuk perubahan data watak
• WatakDataoldValue: Sama ada untuk merakam nilai data watak sebelumnya

Pemerhati persimpangan refactoring

API untuk IntersectionObserver adalah serupa dengan pemerhati lain. Sekali lagi, anda mesti:

1. Buat pemerhati baru: Dengan kata kunci baru. Pemerhati ini mengambil fungsi pemerhati untuk dilaksanakan.
2. Lakukan sesuatu dengan perubahan yang diperhatikan: Ini dilakukan melalui fungsi pemerhati yang diluluskan ke dalam pemerhati.
3. Perhatikan elemen tertentu: dengan menggunakan kaedah Perhatikan.
4. (Secara opsyen) Unbsobserve elemen: dengan menggunakan kaedah yang tidak dapat dilihat atau putus (bergantung pada pemerhati yang anda gunakan).

Tetapi IntersectionObserver memerlukan anda lulus pilihan dalam langkah 1 (bukan langkah 3). Jadi inilah kod untuk menggunakan API IntersectionObserver.

 // Langkah 1: Buat pemerhati baru dan lulus pilihan yang berkaitan
const options = {/*...*/}
Const Observer = New IntersectionObserver (Observerfn, Options)

// Langkah 2: Lakukan sesuatu dengan perubahan yang diperhatikan
fungsi observerfn (entri) {
  untuk (penyertaan penyertaan) {
    // Lakukan sesuatu dengan kemasukan
  }
}

// Langkah 3: Perhatikan elemen
const element = document.QuerySelector ('#some-element')
Observer.observe (elemen)

// Langkah 4 (Pilihan): Putuskan sambungan pemerhati apabila kami selesai menggunakannya
Observer.Disconnect (elemen)

Oleh kerana kod itu sama, kita juga boleh menyalin-paste kod yang kami tulis untuk MutationObserver ke IntersectionObserver. Apabila berbuat demikian, kita perlu ingat untuk lulus pilihan ke IntersectionObserver dan bukan kaedah perhatikan.

 Fungsi Eksport MutationObserver (node, options = {}) {
  const {callback, ... opts} = pilihan
  Const Observer = New MutationObserver (Observerfn, Opts)
  Observer.observe (nod)

  fungsi observerfn (entri) {
    untuk (penyertaan penyertaan) {
      // corak panggil balik
      jika (options.callback) options.callback ({entry, entries, Observer})
      // corak pendengar acara
      lain {
        node.dispatchevent (
          baru CustomEvent ('Intersect', {
            Detail: {entry, entries, Observer},
          })
        )
      }
    }
  }
}

Sekarang kita boleh menggunakan IntersectionObserver dengan API yang mudah digunakan:

 const node = document.QuerySelector ('. Some-element')

// corak panggil balik 
const obs = IntersectionObserver (nod, {
  Callback ({entry, entries}) {
    // Lakukan apa yang anda mahukan dengan setiap entri
  }
})

// corak pendengar acara
node.addeventListener ('intersect', event => {
  const {entry} = event.detail
  // Lakukan apa yang anda mahukan dengan setiap entri
})

Memutuskan sambungan pemerhati persimpangan

Kaedah IntersectionObserver adalah kesatuan kedua -dua resizeobserver dan mutationobserver. Ia mempunyai empat kaedah:

• Perhatikan: Perhatikan elemen
• Tidak Bermasalah: Berhenti memerhati satu elemen
• Putuskan sambungan: berhenti memerhatikan semua elemen
• Takerecords: Mendapat rekod yang tidak diproses

Oleh itu, kita boleh menggabungkan kaedah yang telah kita tulis dalam ResizeObserver dan MutationObserver untuk yang satu ini:

 Fungsi Eksport IntersectionObserver (node, options = {}) {
  // ...
  kembali {
    Unobserve (Node) {
      Observer.Unobserve (nod)
    },

    putuskan sambungan () {
      // Ambil rekod sebelum memutuskan sambungan.
      Const Records = Observer.TakeRecords ()
      Observer.disconnect ()
      jika (records.length> 0) Observerfn (Rekod)
    },
    
    takerecords () {
      Kembali Observer.TakeRecords ()
    },
  }
}

Sekarang kita boleh berhenti mengamati dengan kaedah yang tidak dapat dilihat atau putus.

 const node = document.QuerySelector ('. Some-element')
const obs = intersectionObserver (nod, /*...*/)

// Putuskan sambungan pemerhati
obs.disconnect ()

Pilihan IntersectionObserver

Sekiranya anda tertanya -tanya, IntersectionObserver mengambil tiga pilihan:

• akar: elemen yang digunakan untuk memeriksa sama ada elemen yang diperhatikan dapat dilihat
• rootmargin: membolehkan anda menentukan jumlah offset dari tepi akar
• Ambang: Menentukan bila hendak log masuk entri pemerhati

Berikut adalah artikel untuk membantu anda memahami pilihan IntersectionObserver.

Menggunakan ini dalam amalan melalui Labz Splendid

Labz Splendid mempunyai perpustakaan UTILS yang mengandungi resizeoBserver, mutationoBserver dan intersectionobserver.

Anda boleh menggunakannya jika anda tidak mahu menyalin-paste coretan di atas ke dalam setiap projek.

 import { 
  ResizeObserver, 
  IntersectionObserver, 
  MutationObserver 
} dari 'Splendidlabz/utils/dom'

Const Mode = Document.QuerySelector ('some-element')

const resizeObs = resizeObserver (node, / * ... * /)
const intersectobs = IntersectionObserver (nod, / * ... * /)
const MutateObs = MutationObserver (nod, / * ... * /)

Selain daripada kod yang telah kami tulis bersama di atas (dan dalam artikel sebelumnya), setiap kaedah pemerhati di Labz yang indah mampu membiarkan anda memerhatikan dan berhenti mengamati pelbagai elemen sekaligus (kecuali MutationObserver kerana ia tidak mempunyai kaedah yang tidak dapat dilihat)

 const item = document.QuerySelectorAll ('. Elements')
const obs = resizeObserver (item, {
  Callback ({entry, entries}) {
    / * Lakukan apa yang anda mahukan di sini */
  }
})

// tidak dapat diamati dua item sekaligus
const subset = [item [0], item [1]]
obs.unobserve (subset)

Oleh itu, ia mungkin lebih mudah untuk menggunakan fungsi yang telah saya buat untuk anda. ??

Plug Shameless: Labz Splendid mengandungi satu ton utiliti berguna - untuk CSS, JavaScript, Astro, dan Svelte - yang saya buat sejak beberapa tahun kebelakangan ini.

Saya telah memarkir mereka semua ke Labz yang indah, jadi saya tidak lagi perlu menjelajah internet untuk fungsi yang berguna untuk kebanyakan projek web saya. Jika anda melihat, anda mungkin menikmati apa yang saya patuhi!

(Saya masih membuat dokumen pada masa penulisan supaya kelihatan agak kosong. Semak kembali setiap sekarang dan kemudian!)

Belajar barang refactor

Jika anda suka cara saya menerangkan bagaimana untuk refactor API Observer, anda mungkin mendapati bagaimana saya mengajar JavaScript menarik.

Dalam kursus JavaScript saya, anda akan belajar membina 20 komponen kehidupan sebenar. Kami akan memulakan mudah, menambah ciri, dan refactor di sepanjang jalan.

Refactoring adalah kemahiran penting untuk belajar - dan di sini, saya pastikan anda mendapat simen ke dalam otak anda.

Itu sahaja! Semoga anda bersenang -senang membaca bahagian ini!

Atas ialah kandungan terperinci API yang lebih baik untuk pemerhati persimpangan dan mutasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!