Pengaturcaraan Didorong Acara: Panduan Lengkap dengan Contoh

Informatec Digital » pengaturcaraan » Pengaturcaraan Didorong Acara: Panduan Lengkap dengan Contoh

Pengaturcaraan dipacu peristiwa ialah gaya pembangunan yang mana aplikasi bertindak balas terhadap perkara yang berlaku di sekelilingnya dan bukannya senarai langkah yang tegar. Daripada berjalan terus dari titik A ke titik B, perisian menunggu acara dan bertindak balas Apabila seseorang mengklik, data tiba atau keadaan sistem berubah.

Jika anda datang daripada latar belakang pengaturcaraan yang lebih berurutan, pendekatan ini membuka rangkaian kemungkinan baharu untuk antara muka yang kaya, perkhidmatan muatan tinggi dan sistem yang memproses strim langsung. Saya mencadangkan lawatan lengkap konsep, seni bina, jenis acara, kod praktikal (JavaScript, Node.js dan Python/tkinter) dan amalan baik untuk menguasainya dengan mudah.

Apakah pengaturcaraan dipacu peristiwa?

Dalam paradigma ini, logik dicetuskan apabila sesuatu yang berkaitan berlaku: interaksi pengguna, mesej rangkaian, penderia, pemasa atau sebarang isyarat yang ditentukan oleh pengaturcara. "Sesuatu" itu dipanggil peristiwa dan mencetuskan satu atau lebih pengendali. yang mengandungi respons yang ingin anda laksanakan.

Perkara utama ialah peristiwa boleh berlaku secara tidak segerak, walaupun secara selari. Program mendengar melalui gelung acara yang mengumpul, beratur dan mengedarkan acara kepada penerimanya., memastikan apl responsif tanpa menyekat.

Konsep penting: peristiwa, pemancar, penerima dan gelung

Peristiwa ialah manifestasi bahawa sesuatu telah berlaku: klik, klik dua kali, ketukan kekunci, selesai muat turun, ketibaan paket rangkaian, pembukaan tetingkap, dsb. Ia biasanya membawa data (muatan) dan konteks yang menerangkan perkara yang berlaku, yang membolehkan keputusan dibuat dalam pengendali.

Komponen yang menjana peristiwa dipanggil pemancar; mereka yang mengendalikannya dipanggil penerima atau pendengar. Pautan antara kedua-duanya diwujudkan dengan mekanisme langganan (pendengar) atau mengikat yang menunjukkan fungsi mana yang harus dilaksanakan untuk setiap jenis acara.

Inti sistem ialah gelung peristiwa. Gelung ini mengumpul acara yang belum selesai, menyusunnya dan menghantarnya kepada pengawal yang sepadan. Terima kasih kepada corak ini, aplikasi boleh bertindak balas kepada pelbagai rangsangan tanpa menyekat antara muka atau membazir sumber..

Dalam persekitaran visual dan mudah alih, anda juga akan membezakan antara acara yang dimulakan pengguna (mengklik, menyeret, mengetik, menyengetkan peranti) dan acara automatik (membuka skrin, mencetuskan pemasa, menukar fokus). Mengasingkan kedua-dua kumpulan membantu anda mereka bentuk aliran interaksi yang boleh diramal..

Cara kitaran hayat acara berfungsi

Kita boleh meringkaskan dinamik dalam tiga langkah yang digabungkan. Pertama, acara dijana (oleh orang, sistem, rangkaian atau perkakasan); peristiwa itu memasuki saluran biasa (baris gilir) semasa gelung acara menonton.

Kedua, mendengar berlaku. Penerima yang melanggan jenis acara tertentu itu mengesannya. (contohnya, pendengar 'klik' atau pengendali 'data' pada soket) dan bersedia untuk bertindak.

Akhirnya, pengendalian dilaksanakan. Pengendali memproses objek acara, menanyakan sifatnya (jenis, destinasi, nilai) dan memutuskan perkara yang perlu dilakukan.: Kemas kini UI, sahkan, sebarkan, batalkan atau keluarkan acara berlatarkan baharu.

Jenis acara yang paling kerap

Dalam amalan anda akan menemui keluarga yang terkenal. Mengetahui nuansanya menjimatkan anda banyak sakit kepala apabila ia berkaitan dengan penyahpepijatan dan instrumentasi.:

• Tetikus atau penunjuk: klik, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, menu konteks.
• Papan kekunci: keydown, keyup, tekan kekunci (untuk kekunci aksara).
• Tetingkap dan dokumen: memuatkan, ralat (semasa memuatkan sumber), ubah saiz, tatal, pagehide/pageshow.
• bentuk: input, tukar, hantar, fokus/fokus.
• Roda/skrol: roda dengan data skrol mendatar dan menegak.

Selain nama acara, objek acara menyediakan butiran tambahan. Dalam penunjuk anda akan mempunyai clientX/pageX dan clientY/pageY; dalam papan kekunci anda akan menyemak kekunci, kod atau pengubah suai (shiftKey, altKey, ctrlKey); dalam roda, deltaX, deltaY dan deltaMode untuk mengetahui unit.

Mendengar dan pengurusan acara dalam amalan

Terdapat dua cara biasa di web. Satu adalah untuk menentukan pengendali dalam HTML itu sendiri (atribut seperti onclick), berguna untuk prototaip atau kes mudah:

<!-- myClickHandler es la función JS que manejará el evento -->
<button onclick='myClickHandler()'>Púlsame</button>
<script>
  function myClickHandler(){
    alert('Hola');
  }
</script>

Satu lagi, lebih bersih dan lebih berskala, adalah untuk mendaftarkan pendengar daripada JavaScript. addEventListener membolehkan anda melanggan semasa runtime dan memisahkan pandangan daripada logik:

const btn = document.querySelector('button');
const onClick = (e) => {
  console.log('Destino:', e.target);
};
btn.addEventListener('click', onClick);
// Más tarde, si ya no lo necesitas:
// btn.removeEventListener('click', onClick);

Setiap pengendali menerima objek acara. Di sana anda akan menemui kaedah e.type, e.target, e.cancelable dan utama seperti e.preventDefault() atau e.stopPropagation() untuk membatalkan tingkah laku lalai atau menghentikan gelembung.

Kes biasa ialah menangkap nilai input tanpa memuat semula halaman: membaca e.target.value dalam perubahan atau pengendali input dan anda akan mendapat teks langsung.

Contoh kod dalam Node.js dan Python

Node.js melaksanakan corak penerbitan/langgan yang sangat berkuasa dengan kelas EventEmitter. Dengan cara ini anda boleh menentukan acara perniagaan anda sendiri dan bertindak balas terhadapnya.:

// Node.js (JavaScript)
const EventEmitter = require('events');
class MiBusEventos extends EventEmitter {}
const bus = new MiBusEventos();

bus.on('saludo', (nombre) => {
  console.log(`¡Hola, ${nombre}!`);
});

// Emitimos el evento con un dato asociado
bus.emit('saludo', 'mundo');

Dalam Python, jika anda bekerja dengan antara muka desktop, tkinter memudahkan untuk mengikat widget pada acara. Butang, bingkai atau tetingkap boleh dikaitkan dengan tindakan tetikus dan papan kekunci:

# Python + tkinter
from tkinter import *

def on_key(event):
    print('Tecla:', repr(event.char))

def on_click(event):
    marco.focus_set()
    print('Click en:', event.x, event.y)

root = Tk()
marco = Frame(root, width=120, height=120)
marco.bind('<Key>', on_key)
marco.bind('<Button-1>', on_click)
marco.pack()
root.mainloop()

Jika anda lebih suka contoh asas pemancar anda sendiri dalam Python (tanpa GUI), Anda boleh mensimulasikan langganan dan pemberitahuan dengan senarai ciri:

class Emisor:
    def __init__(self):
        self._subs = {}
    def on(self, evento, fn):
        self._subs.setdefault(evento, []).append(fn)
    def emit(self, evento, *args, **kwargs):
        for fn in self._subs.get(evento, []):
            fn(*args, **kwargs)

emisor = Emisor()
emisor.on('saludo', lambda: print('¡Hola, mundo!'))
emisor.emit('saludo')

Sifat dan kaedah dalam persekitaran visual (MIT App Inventor dan seumpamanya)

Alat pembangunan blok bangunan seperti MIT App Inventor ialah contoh sempurna bagi paradigma dipacu peristiwa. Setiap komponen (butang, label, imej) mempunyai sifat, peristiwa dan kaedah yang anda manipulasi secara visual.

Sifat menerangkan cara komponen "kelihatan" atau "berkelakuan": saiz fon, penjajaran, warna, keterlihatan atau teks. Mereka boleh diperbaiki dalam reka bentuk atau diubah dalam pelaksanaan untuk menyesuaikan antara muka. berdasarkan interaksi atau data yang masuk.

Kaedah ialah tindakan yang dipratentukan yang diketahui oleh komponen, seperti mengalihkan tetingkap, memfokuskan medan, menambah item pada senarai atau mengosongkan teks. Anda tidak memprogramkannya dari awal: persekitaran menawarkannya kepada anda sedia untuk digunakan..

Dalam jenis platform ini, anda juga akan membezakan antara acara automatik (cth., apabila skrin bermula) dan yang dicetuskan oleh pengguna (menekan butang, menyeret, mengetik, menyengetkan telefon). Pemisahan ini berguna untuk mengatur navigasi dan keadaan. dengan teratur.

GUI, CLI, dan Peranan Sistem Pengendalian

Sistem pengendalian menghantar acara ke aplikasi yang mempunyai fokus input. Dalam GUI, setiap tetingkap atau widget boleh menerima dan mengendalikan acaranya sendiri. melalui gelung acara apl.

Malah dalam program baris arahan, terdapat isyarat yang serupa: proses mungkin menunggu pengguna menaip dan tekan Enter untuk mempertimbangkan peristiwa "input lengkap" telah berlaku. Perbezaan utama ialah dalam CLI aliran itu dianggap sebagai linear, tetapi masih ada acara yang menunggu..

Bintangkan aplikasi untuk pengaturcaraan dipacu acara

Antara muka pengguna interaktif: Web, desktop dan peranti mudah alih bertindak balas serta-merta kepada setiap gerak isyarat. Pengalaman itu semula jadi kerana logiknya dilaksanakan tepat apabila pengguna memintanya.

Komunikasi tak segerak: Pelayan HTTP, WebSockets, baris gilir pemesejan dan perkhidmatan mikro mengeksploitasi model untuk memproses permintaan masuk tanpa menyekat kerja lain.

Pemprosesan masa nyata: telemetri, IoT, perdagangan, pemantauan infrastruktur atau kawalan industri melancarkan tindakan segera apabila perubahan dikesan oleh penderia. Peristiwa ini adalah pencetus yang sempurna untuk bertindak balas terhadap realiti dalam milisaat.

Kelebihan dan cabaran yang perlu diambil kira

Di sisi terang, Anda memperoleh interaktiviti, kecekapan dan skalabiliti: Kod hanya berjalan apabila diperlukan, utas utama tidak tersekat, dan anda boleh mengedarkan kerja di kalangan beberapa pengendali khusus.

Sebagai balasan, Kerumitan bertambah dengan bilangan acara, pendengar dan aliran tak segerakTanpa reka bentuk yang jelas, kebolehselenggaraan akan terjejas dan masalah seperti rantaian yang tidak teratur atau pengendali yang sukar untuk diuji timbul.

Amalan yang baik untuk bekerja dengan acara

Penamaan yang konsisten Untuk pengendali (onSubmit, handleClickCancel), elakkan logik sebaris dalam HTML dan pusatkan langganan dengan addEventListener atau sistem acara rangka kerja anda.

Mencegah kebocoran: Mengalih keluar pendengar apabila komponen dimusnahkan atau elemen DOM hilang. removeEventListener di web atau mekanisme yang setara dalam rangka kerja asli dan GUI.

Mengesahkan dan menghadkan: Gunakan e.preventDefault() pada borang jika ia belum lulus pengesahan lagi, dan e.stopPropagation() apabila anda tidak mahu sesuatu peristiwa juga berlaku pada nenek moyang.

Uncouple menerbitkan acara domain (cth., 'order.created') dan membenarkan modul lain melanggannya. Ini mengurangkan kebergantungan langsung dan menjadikannya lebih mudah untuk mengembangkan apl anda.

Di luar bahagian hadapan: seni bina dan corak

Orientasi acara tidak berhenti pada antara muka. Di bahagian belakang anda boleh menggunakan baris gilir (RabbitMQ, Kafka), broker atau bas dalaman dan perkhidmatan awan seperti AWS untuk menyampaikan perkhidmatan mikro tanpa sekatan dan dengan daya tahan.

Corak berguna termasuk Penyumberan Acara (sumber kebenaran adalah peristiwa), Perpindahan Negeri yang Dibawa Acara (pindah negeri melalui peristiwa) atau peti keluar (pastikan penerbitan yang boleh dipercayai daripada pangkalan data). Mereka semua bergantung pada prinsip yang sama: bertindak balas terhadap fakta..

Sifat objek acara yang perlu anda hafal

Selain e.type dan e.target, terdapat beberapa medan yang sangat berguna. Dalam tetikus: clientX/clientY (berkenaan dengan tetingkap) dan pageX/pageY (berkenaan dengan dokumen), yang (butang ditekan). Pada papan kekunci: kunci, kod dan pengubah suai seperti shiftKey, altKey dan ctrlKey.

Untuk roda, deltaX dan deltaY menandakan anjakan dan deltaMode menunjukkan sama ada unit ialah piksel, garisan atau halaman. Apabila digabungkan dengan baik, ia membolehkan anda mencipta interaksi yang tepat dan boleh diakses.

Peristiwa, sifat dan kaedah dalam konteks

Untuk meringkas pendekatan visual: komponen mempunyai sifat (konfigurasi), peristiwa (apa yang berlaku kepadanya) dan kaedah (apa yang ia tahu bagaimana untuk melakukannya)Triad ini muncul dalam App Inventor, rangka kerja web dan SDK asli.

Menukar sifat pada masa jalan, contohnya, saiz fon atau warna butang selepas pengesahan, adalah semula jadi dalam model ini. Ikat perubahan pada acara dan anda akan mendapat UI reaktif dengan mudah..

HTML dan delegasi acara

Apabila antara muka dibina secara dinamik, melanggan setiap elemen baharu boleh menjadi mahal. Delegasi acara mendengar pada bekas biasa dan penapis oleh e.target, yang sangat memudahkan senarai atau jadual dengan baris yang muncul dan hilang.

document.querySelector('#lista').addEventListener('click', (e) => {
  if (e.target.matches('li.removible')) {
    e.target.remove();
  }
});

Oleh itu, seorang pendengar menguruskan semua elemen semasa dan akan datang dalam bekas #list. Lebih sedikit langganan, kurang memori dan kurang risiko kebocoran.

Bagaimanakah ia disepadukan dengan rangkaian dan masa nyata?

Dalam Node.js, soket dan strim sudah berfungsi berdasarkan peristiwa: 'data', 'tamat', 'ralat', 'tutup'… Hanya pasang pengendali dan biarkan masa jalan melakukan yang lain.Dalam pelayar, WebSocket dan EventSource mengikut prinsip yang sama.

Untuk IoT, kedatangan ukuran daripada penderia adalah pencetus semula jadi. Saluran paip acara boleh menormalkan, mengesahkan dan menerbitkan makluman atau papan pemuka yang dikemas kini. tanpa campur tangan manual.

Pembelajaran dan amalan berpandu

Jika anda ingin melangkah lebih jauh, adalah idea yang baik untuk berlatih dengan projek kecil: borang dengan pengesahan hangat, sembang dengan WebSocket, papan pemuka yang menggunakan strim atau apl desktop dengan pengikatan. Pengulangan dalam konteks yang berbeza menyatukan refleks dan corak.

Pilihan lain ialah berlatih dengan program intensif yang menggabungkan asas, seni bina dan penggunaan. Bootcamp yang baik untuk apl mudah alih atau pembangunan web moden akan membolehkan anda mengetahui acara, tak segerak dan komposisi antara muka. sedia untuk pengeluaran.

Tingkah laku dipacu acara membolehkan anda membina perisian yang bertindak balas seperti yang diharapkan oleh orang ramai: tidak menyekat dan tepat pada masanya. Kini anda mempunyai konsep (peristiwa, pemancar, penerima, gelung), jenis yang paling biasa, penggunaan objek acara, contoh dalam Node.js dan Python/tkinter, peranan sifat dan kaedah dalam persekitaran visual, aplikasi sebenar dan amalan baik.Dengan asas-asas ini, bergerak dari klik ke hasil akan menjadi masalah mendengar dengan baik, mengurus dengan lebih baik dan memastikan sistem bersih dan terpisah.