Memahami Pemerhati dalam JavaScript: Panduan Komprehensif

Pemerhati JavaScript adalah penting untuk mencipta aplikasi dinamik dengan membolehkan pembangun bertindak balas terhadap perubahan dalam objek, peristiwa atau aliran data. Panduan ini meneroka pelbagai jenis pemerhati JavaScript dengan penjelasan terperinci dan contoh praktikal.

---

1. Pemerhati Acara (Pendengar Acara): The Foundation

Pendengar acara ialah pemerhati JavaScript asas, bertindak balas terhadap peristiwa seperti interaksi pengguna (klik, penekanan kekunci, pergerakan tetikus).

Contoh Kod:

// Select a button
const button = document.querySelector('button');

// Add a click listener
button.addEventListener('click', (event) => {
    console.log('Button clicked!', event);
});

// Add a mouseover listener
button.addEventListener('mouseover', () => {
    console.log('Mouse over button!');
});

Kes Penggunaan:

• Serahan borang
• Fungsi seret dan lepas
• Penjejakan navigasi
• Pintasan papan kekunci (kebolehcapaian)
• Maklum balas UI dinamik (kesan tuding)

---

2. Pemerhati Mutasi: Memantau Perubahan DOM

Pemerhati mutasi menjejaki pengubahsuaian DOM (ditambah, dialih keluar atau diubah nod), penting untuk kandungan yang dikemas kini secara dinamik.

Contoh Kod:

// Target node
const targetNode = document.querySelector('#target');

// Create a MutationObserver
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        console.log('DOM change detected:', mutation);
    });
});

// Configuration
const config = { childList: true, attributes: true, subtree: true };

// Start observing
observer.observe(targetNode, config);

// Simulate a change
setTimeout(() => {
    const newElement = document.createElement('p');
    newElement.textContent = 'New text!';
    targetNode.appendChild(newElement);
}, 2000);

Kes Penggunaan:

• Kemas kini aplikasi satu halaman (SPA)
• Tetapan pilihan pengguna (mod gelap)
• Ciri kerjasama masa nyata
• Sistem pemberitahuan langsung
• Penjejakan borang dinamik

---

3. Pemerhati Persimpangan: Pemantauan Viewport

Pemerhati persimpangan mengesan apabila elemen masuk atau keluar dari port pandangan, sesuai untuk memuatkan malas atau animasi.

Contoh Kod:

// Element to observe
const targetElement = document.querySelector('#box');

// Create an IntersectionObserver
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            console.log('Element in viewport:', entry.target);
        } else {
            console.log('Element out of viewport:', entry.target);
        }
    });
});

// Start observing
observer.observe(targetElement);

Kes Penggunaan:

• Imej malas memuat
• Tatal tak terhingga
• Pencetus animasi pada skrin
• Penjejakan tera iklan
• Keutamaan kandungan di atas lipatan

---

4. Ubah Saiz Pemerhati: Reka Bentuk UI Responsif

Ubah saiz pemerhati memantau perubahan saiz elemen, penting untuk UI responsif.

Contoh Kod:

// Element to observe
const box = document.querySelector('#resizable');

// Create a ResizeObserver
const observer = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
        const { width, height } = entry.contentRect;
        console.log(`New size: ${width}px x ${height}px`);
    });
});

// Start observing
observer.observe(box);

// Simulate a resize
setTimeout(() => {
    box.style.width = '400px';
    box.style.height = '200px';
}, 2000);

Kes Penggunaan:

• Penyesuaian reka bentuk responsif
• Saiz semula carta/kanvas
• Pertanyaan media dinamik
• Pemantauan panel boleh ubah saiz
• Pelarasan penyesuaian pengguna

---

5. Pemerhati Harta Objek (API Proksi)

API Proksi membenarkan pemerhatian perubahan sifat objek, membolehkan tindak balas dinamik kepada kemas kini.

Contoh Kod:

// Object to observe
const obj = { name: 'John', age: 30 };

// Use Proxy
const observedObj = new Proxy(obj, {
    set(target, property, value) {
        console.log(`Property '${property}' changed from '${target[property]}' to '${value}'`);
        target[property] = value;
        return true;
    },
});

// Trigger changes
observedObj.name = 'Jane';
observedObj.age = 31;

Kes Penggunaan:

• Pemerhatian dan pengesahan keadaan aplikasi
• penyahpepijat sistem pengurusan negeri
• Sekatan kemas kini data
• Model borang reaktif
• Pengesahan dinamik

---

6. Corak Boleh Diperhatikan (RxJS): Pengurusan Strim

RxJS menyediakan pelaksanaan corak pemerhati lanjutan untuk pengurusan aliran data yang cekap.

Contoh Kod:

// Select a button
const button = document.querySelector('button');

// Add a click listener
button.addEventListener('click', (event) => {
    console.log('Button clicked!', event);
});

// Add a mouseover listener
button.addEventListener('mouseover', () => {
    console.log('Mouse over button!');
});

Kes Penggunaan:

• Strim data tak segerak (HTTP, WebSockets)
• Kemas kini papan pemuka masa nyata
• Pengaturcaraan reaktif dalam rangka kerja
• Penyelarasan operasi tak segerak
• Menyahlantun/mendikit acara

---

7. Pemerhati Prestasi: Pemantauan Prestasi

Pemerhati prestasi menjejaki peristiwa prestasi (pemuatan sumber, tugas yang panjang) untuk pengoptimuman aplikasi.

Contoh Kod:

// Target node
const targetNode = document.querySelector('#target');

// Create a MutationObserver
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        console.log('DOM change detected:', mutation);
    });
});

// Configuration
const config = { childList: true, attributes: true, subtree: true };

// Start observing
observer.observe(targetNode, config);

// Simulate a change
setTimeout(() => {
    const newElement = document.createElement('p');
    newElement.textContent = 'New text!';
    targetNode.appendChild(newElement);
}, 2000);

Kes Penggunaan:

• penyahpepijat dan analisis prestasi web
• Ukuran masa beban sumber
• Pengenalpastian tugas menyekat benang utama
• Pemantauan metrik pengalaman pengguna (TTI)
• Analisis impak skrip pihak ketiga

---

8. Pemerhati Tersuai: Memperluas Fungsi

Buat pemerhati tersuai menggunakan corak reka bentuk pemerhati untuk senario di luar API terbina dalam.

Contoh Kod:

// Element to observe
const targetElement = document.querySelector('#box');

// Create an IntersectionObserver
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            console.log('Element in viewport:', entry.target);
        } else {
            console.log('Element out of viewport:', entry.target);
        }
    });
});

// Start observing
observer.observe(targetElement);

Kes Penggunaan:

• Sistem acara tersuai
• Seni bina reaktif
• Model sub-pub
• Pemberitahuan khusus aplikasi
• Aliran kerja dinamik

---

Kesimpulan

Pemerhati JavaScript ialah alat yang berkuasa untuk membina aplikasi dinamik dan responsif. Menguasai pelbagai jenis ini akan meningkatkan keupayaan pembangunan JavaScript anda dengan ketara. Eksperimen dengan contoh ini untuk memperdalam pemahaman anda dan menyepadukannya ke dalam projek anda.

Atas ialah kandungan terperinci Memahami Pemerhati dalam JavaScript: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!