Pemancar acara utama dalam JavaScript – Beragampengetahuan

JavaScript Ini adalah bahasa yang paling berbasis peristiwa – klik pengguna, respons server Ajax panggilan, atau pemicu yang diaktifkan kode Anda saat Anda membutuhkannya. Pemancar peristiwa adalah bagian penting dari gaya pemrograman reaktif ini, yang memfasilitasi interaksi antara berbagai bagian aplikasi.

Pada artikel ini, kita akan mempelajari cara membuat pemancar peristiwa Anda sendiri dari awal menggunakan teknik dasar dalam JavaScript, namun sangat canggih. Saat Anda mengembangkan a simpul. Apakah Anda sedang membangun JS bagian belakang atau dinamis ujung depan aplikasi, panduan ini akan mengimplementasikan komunikasi berbasis peristiwa dalam waktu singkat.

Apa itu pemancar peristiwa?

Pemancar peristiwa adalah objek/modul yang mendengarkan peristiwa tertentu dan melakukan tindakan tertentu (ia melakukan ini dengan memanggil tindakan yang telah ditentukan sebelumnya, yaitu pendengar). Anda dapat menganggapnya sebagai penyiar acara yang memicu suatu acara setiap kali terjadi sesuatu.

di simpul. Di Node.js, kelas EventEmitter adalah modul bawaan, tetapi memahami cara kerjanya dengan membuat modul dan membaca beberapa kode akan meningkatkan keterampilan pengkodean Anda dan beradaptasi untuk menyesuaikan aplikasi Anda.

Mengapa menggunakan pemancar peristiwa?

1. Komunikasi terpisah: Komponen dapat berinteraksi tanpa bergantung secara langsung satu sama lain.
2. dapat digunakan kembali:Buat modul fleksibel untuk mendengarkan dan memancarkan peristiwa untuk berbagai bagian aplikasi Anda.
3. Skalabilitas: Menangani operasi asinkron secara efisien dalam sistem besar.

Membangun pemancar peristiwa dengan JavaScript

Silakan ikuti langkah-langkah di bawah ini untuk membuatnya sendiri pemancar peristiwa Mulai dari awal.

1. Cetak Biru: Buat kelas EventEmitter

Mulailah dengan struktur kelas sederhana untuk mengelola event listening dan memicunya.

kode JavaScript

class EventEmitter {
  constructor() {
    this.events = {};
  }

  // Add a listener
  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  // Trigger an event
  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(...args));
    }
  }

  // Remove a specific listener
  off(event, listenerToRemove) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(listener => listener !== listenerToRemove);
  }

  // Add a one-time listener
  once(event, listener) {
    const wrapper = (...args) => {
      listener(...args);
      this.off(event, wrapper); // Remove after being called
    };
    this.on(event, wrapper);
  }
}

2. Prinsip kerja

• on(event, listener): Daftarkan pendengar untuk acara tertentu.
• emit(event, ...args): Jalankan semua pendengar yang terkait dengan acara ini.
• off(event, listener): Membatalkan pendaftaran pendengar tertentu.
• once(event, listener): Jalankan pendengar satu kali dan segera hapus.

Contoh: Menggunakan EventEmitter Anda

Berikut cara menggunakan pemancar peristiwa khusus:

kode JavaScript

// Instantiate the EventEmitter
const emitter = new EventEmitter();

// Define event listeners
const greet = name => console.log(`Hello, ${name}!`);
const farewell = name => console.log(`Goodbye, ${name}!`);

// Register listeners
emitter.on('greet', greet);
emitter.on('farewell', farewell);

// Emit events
emitter.emit('greet', 'Alice');    // Output: Hello, Alice!
emitter.emit('farewell', 'Alice'); // Output: Goodbye, Alice!

// Remove a listener
emitter.off('greet', greet);

// Emit again
emitter.emit('greet', 'Alice');    // No output (listener removed)

// One-time event
emitter.once('special', name => console.log(`This is special for ${name}!`));
emitter.emit('special', 'Bob');   // Output: This is special for Bob!
emitter.emit('special', 'Bob');   // No output (listener removed)

Praktik Terbaik untuk Pemancar Peristiwa

1. Hindari kebocoran memori:Selalu hapus pendengar off ketika mereka tidak lagi dibutuhkan.
2. Penanganan kesalahan: Pastikan fungsi pendengar Anda menangani kesalahan dengan baik.
3. Konvensi penamaan acara: Gunakan nama peristiwa deskriptif untuk kejelasan dan pemeliharaan.
4. penonton yang dibatasi: Batasi jumlah pendengar suatu acara untuk mencegah masalah kinerja.

Kapan menggunakan pemancar peristiwa

• aplikasi ujung belakang: Menangani kejadian asinkron seperti permintaan HTTP, operasi database, atau pesan WebSocket.
• Aplikasi ujung depan: Mendukung komunikasi antar komponen UI dalam kerangka kerja seperti React, Vue atau Angular.
• Perpustakaan khusus: Mengimplementasikan modul yang dapat digunakan kembali yang mengeluarkan peristiwa untuk tugas tertentu.

Pertanyaan yang Sering Diajukan (FAQ)

1. Apakah EventEmitter tersedia dalam JavaScript biasa?

TIDAK, EventEmitter Bukan API browser asli. Namun, Anda bisa menerapkannya sendiri (seperti yang ditunjukkan dalam artikel ini) atau menggunakan perpustakaan serupa Pemancar peristiwa Node.js.