Προγραμματισμός βάσει συμβάντων: Ένας πλήρης οδηγός με παραδείγματα

Informatec Digital » προγραμματισμός » Προγραμματισμός βάσει συμβάντων: Ένας πλήρης οδηγός με παραδείγματα

Ο προγραμματισμός βάσει συμβάντων είναι ένα στυλ ανάπτυξης στο οποίο μια εφαρμογή αντιδρά στο περιβάλλον της και όχι σε μια άκαμπτη λίστα βημάτων. Αντί να εκτελείται διαδοχικά από το σημείο Α στο σημείο Β, το λογισμικό περιμένει συμβάντα και ανταποκρίνεται όταν κάποιος κάνει κλικ, φτάσουν δεδομένα ή αλλάξει η κατάσταση του συστήματος.

Αν προέρχεστε από ένα πιο διαδοχικό υπόβαθρο προγραμματισμού, αυτή η προσέγγιση ανοίγει έναν κόσμο δυνατοτήτων για πλούσιες διεπαφές, υπηρεσίες υψηλού φόρτου εργασίας και συστήματα που επεξεργάζονται ζωντανές ροές εργασίας. Προσφέρω μια ολοκληρωμένη επισκόπηση εννοιών, αρχιτεκτονικής, τύπων συμβάντων, πρακτικού κώδικα (JavaScript, Node.js και Python/tkinter) και βέλτιστων πρακτικών για να σας βοηθήσω να τον κατακτήσετε με ευκολία.

Τι είναι ο προγραμματισμός που βασίζεται σε γεγονότα;

Σε αυτό το παράδειγμα, η λογική ενεργοποιείται όταν συμβαίνει κάτι σχετικό: αλληλεπίδραση χρήστη, μηνύματα δικτύου, αισθητήρες, χρονοδιακόπτες ή οποιοδήποτε σήμα ορίζεται από τον προγραμματιστή. Αυτό το "κάτι" ονομάζεται συμβάν και ενεργοποιεί έναν ή περισσότερους χειριστές που περιέχουν την απόκριση που θέλετε να εκτελέσετε.

Το κλειδί είναι ότι τα συμβάντα μπορούν να συμβούν ασύγχρονα, ακόμη και παράλληλα. Το πρόγραμμα παραμένει σε εγρήγορση χρησιμοποιώντας έναν βρόχο συμβάντων που συλλέγει, τοποθετεί σε ουρά και διανέμει συμβάντα στους δέκτες του , διατηρώντας την εφαρμογή σε απόκριση και ξεμπλοκάρισμα.

Βασικές έννοιες: συμβάντα, πομποί, δέκτες και βρόχος

Ένα συμβάν είναι η εκδήλωση ότι κάτι έχει συμβεί: ένα κλικ, ένα διπλό κλικ, ένα πάτημα πλήκτρου, το τέλος μιας λήψης, η άφιξη ενός πακέτου δικτύου, το άνοιγμα ενός παραθύρου κ.λπ. Συνήθως μεταφέρει δεδομένα (ωφέλιμο φορτίο) και ένα πλαίσιο που περιγράφει τι συνέβη , επιτρέποντας τη λήψη αποφάσεων στον χειριστή.

Τα στοιχεία που δημιουργούν συμβάντα ονομάζονται εκπομποί (emitters), ενώ αυτά που τα παρακολουθούν ονομάζονται δέκτες ή ακροατές (listeners). Η σύνδεση μεταξύ τους δημιουργείται με μηχανισμούς εγγραφής (listeners) ή σύνδεσης (binding) που υποδεικνύουν ποια συνάρτηση πρέπει να εκτελεστεί για κάθε τύπο συμβάντος.

Η καρδιά του συστήματος είναι ο βρόχος συμβάντων. Αυτός ο βρόχος συλλέγει εκκρεμή συμβάντα, τα ταξινομεί και τα παραδίδει στους αντίστοιχους χειριστές τους. Χάρη σε αυτό το μοτίβο, η εφαρμογή μπορεί να αντιδράσει σε πολλαπλά ερεθίσματα χωρίς να μπλοκάρει τη διεπαφή ή να σπαταλά πόρους.

Σε οπτικά και κινητά περιβάλλοντα, θα μπορείτε επίσης να διακρίνετε μεταξύ συμβάντων που ξεκινούν από τον χρήστη (κλικ, σύρσιμο, άγγιγμα, κλίση μιας συσκευής) και αυτόματων συμβάντων (άνοιγμα οθόνης, ενεργοποίηση χρονοδιακόπτη, αλλαγή εστίασης). Ο διαχωρισμός αυτών των δύο ομάδων σάς βοηθά να σχεδιάσετε προβλέψιμες ροές αλληλεπίδρασης.

Πώς λειτουργεί ο κύκλος ζωής συμβάντων

Μπορούμε να συνοψίσουμε τη δυναμική σε τρία διασυνδεδεμένα βήματα. Πρώτον, το συμβάν δημιουργείται (από άτομο, σύστημα, δίκτυο ή υλικό) . Το συμβάν αυτό εισέρχεται σε ένα κοινό κανάλι (ουρά) ενώ ο βρόχος συμβάντων παρακολουθείται.

Δεύτερον, λαμβάνει χώρα η ακρόαση. Οι δέκτες που είναι εγγεγραμμένοι σε αυτόν τον συγκεκριμένο τύπο συμβάντος το ανιχνεύουν (για παράδειγμα, ένας ακροατής «κλικ» ή ένας χειριστής «δεδομένων» σε μια υποδοχή) και είναι έτοιμοι να ενεργήσουν.

Τέλος, λαμβάνει χώρα ο χειρισμός. Ένας ελεγκτής επεξεργάζεται το αντικείμενο συμβάντος, ελέγχει τις ιδιότητές του (τύπος, στόχος, τιμές) και αποφασίζει τι θα κάνει : ενημέρωση του UI, επικύρωση, διάδοση, ακύρωση ή εκπομπή νέων cascading συμβάντων.

Οι πιο συχνοί τύποι εκδηλώσεων

Στην πράξη, θα συναντήσετε γνωστές οικογένειες. Η κατανόηση των λεπτομερειών τους θα σας γλιτώσει από πολλούς πονοκεφάλους όσον αφορά την τελειοποίηση και την εφαρμογή τους.

• Ποντίκι ή δείκτης: κλικ, dblclick, μείωση του δείκτη του ποντικιού, αύξηση του δείκτη του ποντικιού, αλλαγή του δείκτη του ποντικιού, αφαίρεση του ποντικιού, μετακίνηση του ποντικιού, μενού περιβάλλοντος.
• Πληκτρολόγιο: πλήκτρο κάτω, πλήκτρο πάνω, πάτημα πλήκτρων (για πλήκτρα χαρακτήρων).
• Παράθυρο και έγγραφο: φόρτωση, σφάλμα (κατά τη φόρτωση πόρων), αλλαγή μεγέθους, κύλιση, απόκρυψη/εμφάνιση σελίδας.
• μορφές: εισαγωγή, αλλαγή, υποβολή, εστίαση/απομάκρυνση.
• Τροχός/κύλιση: τροχός με δεδομένα οριζόντιας και κάθετης κύλισης.

Εκτός από το όνομα του συμβάντος, το αντικείμενο συμβάντος παρέχει επιπλέον λεπτομέρειες. Για τους δείκτες, θα βρείτε τα clientX/pageX και clientY/pageY. Για τα πληκτρολόγια, θα ελέγξετε για κλειδί, κώδικα ή τροποποιητές (shiftKey, altKey, ctrlKey) . Για τα δεδομένα τροχού, θα βρείτε τα deltaX, deltaY και deltaMode για να προσδιορίσετε τη μονάδα.

Ακρόαση και διαχείριση εκδηλώσεων στην πράξη

Υπάρχουν δύο τυπικές προσεγγίσεις στον ιστό. Η μία είναι ο ορισμός χειριστών στην ίδια την HTML (χαρακτηριστικά όπως το onclick) , χρήσιμα για πρωτότυπα ή απλές περιπτώσεις:

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

Η άλλη, πιο καθαρή και πιο επεκτάσιμη επιλογή είναι η εγγραφή ακροατών από το JavaScript. Το `addEventListener` σάς επιτρέπει να εγγραφείτε κατά τον χρόνο εκτέλεσης και να αποσυνδέσετε την προβολή από τη λογική.

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);

Κάθε χειριστής λαμβάνει το αντικείμενο συμβάντος. Εκεί θα βρείτε τις μεθόδους e.type, e.target, e.cancelable και key όπως e.preventDefault() ή e.stopPropagation() για να ακυρώσετε την προεπιλεγμένη συμπεριφορά ή να σταματήσετε τη φούσκα.

Μια τυπική περίπτωση είναι η καταγραφή της τιμής μιας εισόδου χωρίς ανανέωση της σελίδας: διαβάστε το e.target.value μέσα στον χειριστή αλλαγής ή εισόδου και θα έχετε το κείμενο ενεργό.

Παραδείγματα κώδικα σε Node.js και Python

Το Node.js εφαρμόζει ένα ισχυρό μοτίβο δημοσίευσης/εγγραφής με την κλάση EventEmitter. Αυτό σας επιτρέπει να ορίσετε τα δικά σας επιχειρηματικά συμβάντα και να αντιδράσετε σε αυτά.

// 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');

Στην Python, εάν εργάζεστε με διεπαφές επιφάνειας εργασίας, το tkinter διευκολύνει τη σύνδεση γραφικών στοιχείων σε συμβάντα. Ένα κουμπί, ένα πλαίσιο ή ένα παράθυρο μπορούν να συσχετιστούν με ενέργειες ποντικιού και πληκτρολογίου.

# 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()

Αν προτιμάτε ένα βασικό παράδειγμα ενός προσαρμοσμένου εκδότη σε Python (χωρίς γραφικό περιβάλλον χρήστη), μπορείτε να προσομοιώσετε τη συνδρομή και την ειδοποίηση χρησιμοποιώντας λίστες συναρτήσεων :

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')

Ιδιότητες και μέθοδοι σε οπτικά περιβάλλοντα (MIT App Inventor και παρόμοια)

Τα εργαλεία ανάπτυξης που βασίζονται σε μπλοκ, όπως το MIT App Inventor, αποτελούν ένα τέλειο παράδειγμα ενός παραδείγματος που βασίζεται σε συμβάντα. Κάθε στοιχείο (κουμπί, ετικέτα, εικόνα) έχει ιδιότητες, συμβάντα και μεθόδους που χειρίζεστε οπτικά.

Οι ιδιότητες περιγράφουν τον τρόπο με τον οποίο «εμφάνιση» ή «συμπεριφορά» ενός στοιχείου: μέγεθος γραμματοσειράς, στοίχιση, χρώμα, ορατότητα ή κείμενο. Μπορούν να οριστούν κατά τη σχεδίαση ή να τροποποιηθούν κατά τον χρόνο εκτέλεσης για να προσαρμοστεί η διεπαφή με βάση τις αλληλεπιδράσεις ή τα εισερχόμενα δεδομένα.

Οι μέθοδοι είναι προκαθορισμένες ενέργειες που ένα στοιχείο γνωρίζει πώς να εκτελέσει, όπως η μετακίνηση ενός παραθύρου, η εστίαση ενός πεδίου, η προσθήκη ενός στοιχείου σε μια λίστα ή η εκκαθάριση κειμένου. Δεν τις προγραμματίζετε από την αρχή: το περιβάλλον τις παρέχει έτοιμες για κλήση.

Σε αυτούς τους τύπους πλατφορμών, θα μπορείτε επίσης να διακρίνετε μεταξύ αυτόματων συμβάντων (π.χ., όταν ξεκινά μια οθόνη) και εκείνων που ενεργοποιούνται από τον χρήστη (πάτημα ενός κουμπιού, σύρσιμο, άγγιγμα, κλίση του τηλεφώνου). Αυτός ο διαχωρισμός είναι χρήσιμος για την ενορχήστρωση της πλοήγησης και της κατάστασης με εύτακτο τρόπο.

GUI, CLI και ο ρόλος του λειτουργικού συστήματος

Τα λειτουργικά συστήματα στέλνουν συμβάντα στην εφαρμογή που έχει την εστίαση εισόδου. Σε ένα γραφικό περιβάλλον χρήστη (GUI), κάθε παράθυρο ή γραφικό στοιχείο μπορεί να λαμβάνει και να χειρίζεται τα δικά του συμβάντα μέσω του βρόχου συμβάντων της εφαρμογής.

Ακόμα και σε προγράμματα γραμμής εντολών, υπάρχουν παρόμοια σήματα: η διεργασία μπορεί να περιμένει τον χρήστη να πληκτρολογήσει και να πατήσει Enter για να θεωρήσει ότι έχει συμβεί το συμβάν "ολοκληρώθηκε η εισαγωγή". Η κύρια διαφορά είναι ότι στο CLI η ροή γίνεται αντιληπτή ως γραμμική, αλλά εξακολουθούν να υπάρχουν αναμονές για συμβάντα.

Εφαρμογές Star για προγραμματισμό που βασίζεται σε γεγονότα

Διαδραστικές διεπαφές χρήστη : ιστότοποι, επιτραπέζιοι υπολογιστές και κινητές συσκευές αντιδρούν άμεσα σε κάθε χειρονομία. Η εμπειρία δίνει την αίσθηση φυσικής, επειδή η λογική εκτελείται ακριβώς όταν το απαιτεί ο χρήστης.

Ασύγχρονη επικοινωνία : Οι διακομιστές HTTP, τα WebSockets, οι ουρές μηνυμάτων και οι μικροϋπηρεσίες εκμεταλλεύονται το μοντέλο για να επεξεργάζονται εισερχόμενα αιτήματα χωρίς να μπλοκάρουν άλλες εργασίες.

Η επεξεργασία σε πραγματικό χρόνο —τηλεμετρία, IoT, εμπορία, παρακολούθηση υποδομών και βιομηχανικός έλεγχος— ενεργοποιεί άμεσες ενέργειες ως απόκριση στις αλλαγές που ανιχνεύονται από αισθητήρες. Το ίδιο το συμβάν είναι το τέλειο έναυσμα για αντίδραση στην πραγματικότητα σε χιλιοστά του δευτερολέπτου.

Πλεονεκτήματα και προκλήσεις που πρέπει να ληφθούν υπόψη

Από τη θετική πλευρά, κερδίζετε διαδραστικότητα, αποτελεσματικότητα και επεκτασιμότητα : ο κώδικας εκτελείται μόνο όταν χρειάζεται, το κύριο νήμα δεν κολλάει και μπορείτε να κατανείμετε την εργασία μεταξύ πολλών εξειδικευμένων χειριστών.

Αντίθετα, η πολυπλοκότητα αυξάνεται με τον αριθμό των συμβάντων, των ακροατών και των ασύγχρονων ροών . Χωρίς σαφή σχεδιασμό, η συντηρησιμότητα υποφέρει και προκύπτουν προβλήματα όπως η ακανόνιστη αλυσιδωτή σύνδεση ή οι δύσκολοι στη δοκιμή χειριστές.

Καλές πρακτικές για την εργασία με εκδηλώσεις

Η συνεπής ονομασία για τους χειριστές (onSubmit, handleClickCancel), αποφεύγει την ενσωματωμένη λογική στην HTML και συγκεντρώνει τη συνδρομή με το addEventListener ή το σύστημα συμβάντων του framework σας.

Αποτροπή διαρροών : αφαίρεση προγραμμάτων ακρόασης όταν το στοιχείο καταστραφεί ή το στοιχείο DOM εξαφανιστεί. Χρησιμοποιήστε το `removeEventListener` στον ιστό ή ισοδύναμους μηχανισμούς σε πλαίσια και εγγενή γραφικά περιβάλλοντα χρήστη.

Επικύρωση και όριο : Χρησιμοποιήστε την e.preventDefault() σε φόρμες εάν η επικύρωση δεν έχει ολοκληρωθεί ακόμη και την e.stopPropagation() όταν δεν θέλετε ένα συμβάν να ενεργοποιείται και στους προγόνους.

Αποσυνδέστε δημοσιεύοντας συμβάντα τομέα (π.χ., 'order.created') και επιτρέποντας σε άλλες ενότητες να εγγραφούν. Αυτό μειώνει τις άμεσες εξαρτήσεις και διευκολύνει την εξέλιξη της εφαρμογής.

Πέρα από το μέτωπο: αρχιτεκτονική και μοτίβα

Η υπολογιστική βάσει συμβάντων δεν περιορίζεται στο front-end. Στο back-end, μπορείτε να χρησιμοποιήσετε ουρές (RabbitMQ, Kafka), μεσίτες, εσωτερικούς διαύλους και υπηρεσίες cloud όπως το AWS για να επιτρέψετε την επικοινωνία χωρίς αποκλεισμούς και την ανθεκτικότητα μεταξύ μικροϋπηρεσιών.

Χρήσιμα μοτίβα περιλαμβάνουν την Προέλευση Συμβάντων (τα συμβάντα είναι η πηγή της αλήθειας), τη Μεταφορά Κατάστασης Μεταφερόμενου Συμβάντος (μεταφορά κατάστασης μέσω συμβάντων) και τα Εξερχόμενα (εξασφάλιση αξιόπιστης δημοσίευσης από τη βάση δεδομένων). Όλα βασίζονται στην ίδια αρχή: την αντίδραση σε συμβάντα.

Ιδιότητες αντικειμένου συμβάντος που πρέπει να απομνημονεύσετε

Εκτός από τα e.type και e.target, υπάρχουν μερικά πολύ χρήσιμα πεδία. Για εισαγωγή με ποντίκι : clientX/clientY (σε σχέση με το παράθυρο) και pageX/pageY (σε σχέση με το έγγραφο) και which (κουμπί πατημένο). Για εισαγωγή με πληκτρολόγιο : πλήκτρο, κώδικας και τροποποιητές όπως shiftKey, altKey και ctrlKey.

Για τον τροχό, τα deltaX και deltaY ορίζουν την μετατόπιση και το deltaMode υποδεικνύει εάν οι μονάδες είναι pixel, γραμμές ή σελίδες. Όταν συνδυάζονται αποτελεσματικά, σας επιτρέπουν να δημιουργείτε ακριβείς και προσβάσιμες αλληλεπιδράσεις.

Συμβάντα, ιδιότητες και μέθοδοι σε περιβάλλον

Για να συνοψίσουμε την οπτική προσέγγιση: ένα στοιχείο έχει ιδιότητες (διαμόρφωση), συμβάντα (τι του συμβαίνει) και μεθόδους (τι γνωρίζει πώς να κάνει) . Αυτή η τριάδα εμφανίζεται στο App Inventor, στα web frameworks και στα native SDK.

Η τροποποίηση ιδιοτήτων κατά τον χρόνο εκτέλεσης, όπως το μέγεθος γραμματοσειράς ή το χρώμα του κουμπιού μετά την επικύρωση, είναι φυσική σε αυτό το μοντέλο. Συνδέστε αυτές τις αλλαγές με συμβάντα και θα επιτύχετε εύκολα αντιδραστικά περιβάλλοντα χρήστη.

HTML και ανάθεση συμβάντων

Όταν η διεπαφή κατασκευάζεται δυναμικά, η εγγραφή σε κάθε νέο στοιχείο μπορεί να είναι δαπανηρή. Η ανάθεση συμβάντων ακούει ένα κοινό κοντέινερ και φιλτράρει με `e.target` , κάτι που απλοποιεί σημαντικά τις λίστες ή τους πίνακες με γραμμές που εμφανίζονται και εξαφανίζονται.

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

Με αυτόν τον τρόπο, ένας μόνο ακροατής διαχειρίζεται όλα τα τρέχοντα και μελλοντικά στοιχεία εντός του κοντέινερ #list. Λιγότερες συνδρομές, λιγότερη μνήμη και μικρότερος κίνδυνος διαρροών.

Πώς ενσωματώνεται με δίκτυα και σε πραγματικό χρόνο;

Στο Node.js, τα sockets και τα streams λειτουργούν ήδη με βάση τα συμβάντα: 'data', 'end', 'error', 'close'... Απλώς χρειάζεται να συνδέσετε χειριστές και να αφήσετε το runtime να κάνει τα υπόλοιπα . Στα προγράμματα περιήγησης, το WebSocket και το EventSource ακολουθούν την ίδια αρχή.

Για το IoT, η άφιξη μετρήσεων από αισθητήρες είναι η φυσική ενεργοποίηση. Μια αγωγός συμβάντων μπορεί να ομαλοποιήσει, να επικυρώσει και να δημοσιεύσει ενημερωμένες ειδοποιήσεις ή πίνακες ελέγχου χωρίς χειροκίνητη παρέμβαση.

Καθοδηγούμενη μάθηση και πρακτική

Αν θέλετε να το πάτε ένα βήμα παραπέρα, είναι καλή ιδέα να εξασκηθείτε με μικρά έργα: μια φόρμα με άμεση επικύρωση, μια συνομιλία με το WebSockets, έναν πίνακα ελέγχου που καταναλώνει μια ροή ή μια εφαρμογή για υπολογιστές με συνδέσεις. Η επανάληψη σε διαφορετικά περιβάλλοντα ενισχύει τα αντανακλαστικά και τα μοτίβα.

Μια άλλη επιλογή είναι η εκπαίδευση με εντατικά προγράμματα που συνδυάζουν βασικές αρχές, αρχιτεκτονική και ανάπτυξη. Μια καλή εφαρμογή για κινητά ή ένα σύγχρονο bootcamp ανάπτυξης ιστοσελίδων θα σας εξοικειώσει με τα γεγονότα, την ασυγχρονικότητα και τις διεπαφές σύνθεσης που είναι έτοιμες για παραγωγή.

Το λογισμικό που βασίζεται σε συμβάντα σάς επιτρέπει να δημιουργείτε λογισμικό που ανταποκρίνεται όπως περιμένουν οι άνθρωποι: χωρίς αποκλεισμούς και την κατάλληλη στιγμή. Τώρα έχετε τις έννοιες (συμβάντα, αποστολείς, δέκτες, βρόχοι), τους πιο συνηθισμένους τύπους, τον τρόπο χρήσης του αντικειμένου συμβάντος, παραδείγματα σε Node.js και Python/tkinter, τον ρόλο των ιδιοτήτων και των μεθόδων σε οπτικά περιβάλλοντα, εφαρμογές πραγματικού κόσμου και βέλτιστες πρακτικές . Με αυτή τη βάση, η μετάβαση από το κλικ στο αποτέλεσμα θα είναι θέμα προσεκτικής ακρόασης, καλύτερης διαχείρισης και διατήρησης του συστήματος καθαρού και αποσυνδεδεμένου.