Acara tersuai di penyemak imbas: alat berguna yang anda tidak tahu yang anda perlukan

Baru -baru ini, saya dapati kuasa acara penyemak imbas tersuai - alat yang menghairankan yang saya tidak pernah diterokai sebelum ini. Anda boleh membuat dan mencetuskan acara tersuai anda sendiri, kemudian dengar mereka dalam permohonan anda. Ini membuka kemungkinan komunikasi yang cekap.

mengapa menggunakan acara tersuai?

mari kita gambarkan dengan contoh dunia nyata. Saya sedang membangunkan lanjutan krom menggunakan React, dengan pelbagai modul dan logik bebas, beberapa komponen React Outside (dalam fail typescript mandiri). Saya memerlukan kaedah komunikasi antara modul yang mantap.

Walaupun spesifik lanjutan adalah sulit, bayangkan perkhidmatan untuk pengeluar kereta (Toyota, Ford, Mercedes). Setiap memerlukan pengendalian yang unik, menghasilkan fail logik yang berasingan - bukan reaksi komponen. Alat reaksi standard seperti

, konteks, atau redux/mobx tidak boleh digunakan secara langsung. useState

acara tersuai menyediakan penyelesaian.

bagaimana peristiwa tersuai berfungsi

Acara tersuai membolehkan anda membuat, menghantar, dan mendengar peristiwa, lulus data tersuai. Sintaks teras adalah mudah:

Menambah pendengar:

<code class="language-javascript">window.addEventListener(type, listener);</code>

• : rentetan sensitif kes (nama acara). type
• : Fungsi yang dilaksanakan apabila acara dihantar. Objek pilihan listener boleh ditambah (lihat dokumentasi untuk butiran). options

Menghantar peristiwa:

<code class="language-javascript">const event = new CustomEvent(eventName, { detail });
window.dispatchEvent(event);</code>

• : nama acara (mesti sepadan dengan eventName dalam type). addEventListener
• : Objek yang mengandungi data yang dihantar kepada pendengar. Ini menjadikan peristiwa tersuai sangat fleksibel. detail

Contoh dunia nyata: React and Custom Events

dalam lanjutan krom saya:

1. pendengar acara (useeffect dalam app.tsx):

<code class="language-javascript">useEffect(() => {
    const handleCustomEvent = (event: CustomEvent) => {
        console.log(event.detail);
    };

    window.addEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);

    return () => {
        window.removeEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);
    };
}, []);</code>

<code>*   `ADD_CUSTOM_EVENT`: A constant (prevents typos).
*   `handleCustomEvent`: Logs the event's `detail` object (in this simplified example).</code>

2. Menghantar peristiwa: dari mana saja:

<code class="language-javascript">const event = new CustomEvent('ADD_CUSTOM_EVENT', { detail: { key: 'exampleKey', value: 'exampleValue' } });
window.dispatchEvent(event);</code>

mengapa saya menghargai pendekatan ini

Acara tersuai menyediakan penyelesaian yang bersih dan cekap untuk komunikasi silang modul dalam lanjutan saya. Ia melangkaui keperluan mekanisme spesifik reaksi seperti konteks atau perpustakaan pengurusan negeri, yang menawarkan pendekatan yang mudah dan elegan untuk cabaran komunikasi yang kompleks dalam aplikasi web. Saya harap ini membuktikan membantu orang lain!

Atas ialah kandungan terperinci Acara tersuai di penyemak imbas: alat berguna yang anda tidak tahu yang anda perlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!