Mari buat bas acara asli ringan di JavaScript

Bas acara adalah corak reka bentuk (walaupun kita akan membincangkan JavaScript di sini, ia adalah corak reka bentuk dalam mana -mana bahasa) yang boleh digunakan untuk memudahkan komunikasi antara komponen yang berbeza. Ia juga boleh dianggap sebagai penerbitan/melanggan atau pubSub.

Ideanya ialah komponen boleh mendengar bas acara untuk difahami apabila operasi mereka dilakukan. Sebagai contoh, komponen panel tab boleh mendengar peristiwa yang menunjukkan bahawa ia mengubah tab aktif. Sudah tentu, ini mungkin disebabkan dengan mengklik salah satu tab, jadi ia ditangani sepenuhnya dalam komponen itu. Walau bagaimanapun, dengan bas acara, beberapa elemen lain boleh memberitahu tab untuk membuat perubahan. Bayangkan ralat di mana penyerahan borang menyebabkan pengguna menerima amaran dalam tab tertentu, jadi borang menghantar mesej ke bas acara, mengarahkan komponen tab untuk menukar tab aktif ke tab yang mengandungi ralat. Ini adalah bagaimana ia kelihatan di bas acara.

Kod pseudo untuk kes ini adalah seperti berikut ...

 // tab komponen tab.Changetab = id => {
  // Tukar operasi DOM tab aktif.
};
MyEventBus.SubScribe ("perubahan tab", tabs.changetab (id));

// komponen lain ...
// sesuatu berlaku, dan kemudian:
MyEventBus.Publish ("perubahan-tab", 2);

Adakah anda memerlukan perpustakaan JavaScript untuk melaksanakannya? (Soalan Petua: Anda tidak memerlukan perpustakaan JavaScript). Nah, ada banyak pilihan:

• Pubsubjs
• Eventemitter3
• Postal.js
• JQuery juga menyokong peristiwa tersuai, yang sangat relevan dengan corak ini.

Juga, lihat Mitt, perpustakaan dengan hanya 200 bait GZIP. Corak mudah ini mengilhami orang untuk menyelesaikannya sendiri dengan cara yang sama -sama mungkin.

Mari kita lakukan sendiri! Kami tidak menggunakan mana-mana perpustakaan pihak ketiga sama sekali, tetapi sebaliknya mengambil kesempatan daripada sistem pendengaran acara yang sudah dibina dalam JavaScript, addEventListener yang kita kenal dan suka.

Pertama, beberapa konteks

API addEventListener dalam JavaScript adalah fungsi ahli kelas EventTarget . Sebabnya kita boleh mengikat acara klik ke butang ialah antara muka prototaip ( HTMLButtonElement ) secara tidak langsung diwarisi dari EventTarget .

Tidak seperti kebanyakan antara muka DOM yang lain, anda boleh menggunakan kata kunci new untuk membuat EventTarget secara langsung . Ia disokong dalam semua pelayar moden, tetapi baru -baru ini. Seperti yang dapat kita lihat dalam tangkapan skrin di atas, Node mewarisi EventTarget , jadi semua nod Dom mempunyai kaedah addEventListener .

Petua

Saya cadangkan menggunakan jenis nod yang sangat ringan sebagai bas pendengaran acara kami: Komen HTML ( <!-- --> ).

Untuk enjin penyemak imbas, komen HTML hanyalah komen dalam kod dan tidak mempunyai fungsi selain menyediakan teks deskriptif kepada pemaju. Walau bagaimanapun, sejak komen masih ditulis dalam HTML, mereka akhirnya muncul di DOM sebagai nod sebenar dan mempunyai prototaip sendiri Comment -yang mewarisi dari Node .

Kelas Comment boleh dibuat secara langsung dari new , seperti EventTarget :

 const myEventBus = Komen baru ('My-Event-Bus');

Kami juga boleh menggunakan document.createComment Purba tetapi Sokongan yang Dilengkapi. API. Ia memerlukan parameter data, iaitu kandungan komen. Ia juga boleh menjadi rentetan kosong:

 const myEventBus = document.CreateComment ('My-Event-Bus');

Sekarang kita boleh menggunakan dispatchEvent untuk mengeluarkan acara, yang menerima objek Event . Untuk lulus data acara yang ditentukan pengguna, gunakan CustomEvent , di mana medan detail boleh digunakan untuk mengandungi sebarang data.

 myeventbus.dispatchevent (
  baru CustomEvent ('Name Event', {
    Perincian: 'Data Event'
  })
);

Internet Explorer 9-11 menyokong CustomEvent , tetapi tiada versi menyokong new CustomEvent . Menggunakan document.createEvent untuk mensimulasikannya adalah kompleks, jadi jika sokongan IE adalah penting bagi anda, ada cara untuk mengisi.

Sekarang kita dapat mengikat pendengar acara:

 myEventBus.addeventListener ('Name Event', ({detail}) => {
  console.log (terperinci); // => Event-Data
});

Jika acara itu dimaksudkan untuk api hanya sekali, kita boleh menggunakan { once: true } untuk mengikat satu kali. Pilihan lain tidak sesuai di sini. Untuk menghapuskan pendengar acara, kita boleh menggunakan removeEventListener asli.

debug

Bilangan peristiwa yang terikat pada bas acara tunggal boleh menjadi sangat besar. Jika anda lupa untuk memadamkannya, mungkin ada kebocoran memori. Bagaimana jika kita ingin tahu berapa banyak peristiwa yang terikat kepada myEventBus ?

myEventBus adalah node dom, jadi devtools dalam penyemak imbas boleh menyemaknya. Di sana kita dapat mencari acara dalam tab Elements → Event Listener. Pastikan untuk menyahtinakan "nenek moyang" untuk menyembunyikan peristiwa yang terikat pada document dan window .

Contoh

Satu kelemahan ialah sintaks EventTarget sedikit verbose. Kita boleh menulis pembungkus mudah untuknya. Berikut adalah demonstrasi dalam TypeScript:

 Kelas Eventbus<detailtype any> {
  EventTarget peribadi: EventTarget;
  pembina (description = '') {this.eventTarget = document.appendchild (document.createComment (description)); }
  ON (Jenis: String, pendengar: (Acara: CustomEvent<detailtype> ) => void) {this.eventTarget.addeventListener (jenis, pendengar); }
  sekali (jenis: rentetan, pendengar: (Acara: CustomEvent<detailtype> ) => void) {this.eventTarget.addeventListener (jenis, pendengar, {sekali: true}); }
  OFF (jenis: String, pendengar: (Acara: CustomEvent<detailtype> ) => void) {this.eventTarget.RemoveEventListener (jenis, pendengar); }
  emit (jenis: rentetan, terperinci?: detailType) {return this.eventTarget.dispatCheVent (customEvent baru (jenis, {detail})); }
}

// Penggunaan const myEventBus = eventBus baru<string> ('My-Event-Bus');
myEventBus.on ('Name Event', ({detail}) => {
  console.log (terperinci);
});

myEventBus.once ('Name Event', ({detail}) => {
  console.log (terperinci);
});

myEventBus.emit ('Name Event', 'Hello'); // => hello hello
myEventBus.emit ('Name Event', 'World'); // => dunia</string></detailtype></detailtype></detailtype></detailtype>

Demonstrasi berikut menyediakan JavaScript yang disusun.

Itu sahaja! Kami hanya mencipta bas pendengaran acara bebas ketergantungan di mana satu komponen dapat memberitahu satu lagi komponen perubahan untuk mencetuskan tindakan. Melakukan operasi sedemikian tidak memerlukan perpustakaan yang lengkap, dan kemungkinan ia dihidupkan tidak terhad.

Atas ialah kandungan terperinci Mari buat bas acara asli ringan di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!