Πώς να χρησιμοποιήσετε μοτίβα σχεδίασης JavaScript

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

Εισαγωγή στα μοτίβα σχεδίασης JavaScript

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

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

Το μοτίβο της ενότητας

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

Αυτό μοιάζει λίγο με το πώς μπορείτε χρησιμοποιήστε τροποποιητές πρόσβασης σε μια τάξη σε μια γλώσσα όπως η Java ή C++.

Στο JavaScript, μπορείτε να εφαρμόσετε το μοτίβο της μονάδας χρησιμοποιώντας κλεισίματα.

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

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

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

Εδώ είναι ένα παράδειγμα:

συνθ ShoppingCartModule = (λειτουργία () {
// Ιδιωτικά δεδομένα
αφήνω cartItems = [];
// Ιδιωτική μέθοδος
λειτουργίαυπολογισμός Συνολικών Στοιχείων() {
ΕΠΙΣΤΡΟΦΗ cartItems.reduce((σύνολο, στοιχείο) => σύνολο + είδος.ποσότητα, 0);
 }
// Δημόσιο API
ΕΠΙΣΤΡΟΦΗ {
 addItem (στοιχείο) {
 cartItems.push (αντικείμενο);
 },
 getTotalItems() {
ΕΠΙΣΤΡΟΦΗ accountTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Παράδειγμα χρήσης
ShoppingCartModule.addItem({ όνομα: 'Προϊόν 1', ποσότητα: 2 });
ShoppingCartModule.addItem({ όνομα: 'Προϊόν 2', ποσότητα: 1 });
κονσόλα.log (ShoppingCartModule.getTotalItems()); // Έξοδος: 3
ShoppingCartModule.clearCart();
κονσόλα.log (ShoppingCartModule.getTotalItems()); // Έξοδος: 0

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

1. ο IIFE αναδιπλώνει ολόκληρο το μπλοκ κώδικα, δημιουργώντας μια συνάρτηση που εκτελείται αμέσως μετά τη δήλωση. Αυτό δημιουργεί ένα ιδιωτικό πεδίο για τα μέλη της ενότητας.
2. καρτΕίδη είναι μια ιδιωτική συστοιχία. Δεν είναι άμεσα προσβάσιμο εκτός της ενότητας.
3. accountTotalItems() είναι μια ιδιωτική μέθοδος που υπολογίζει τον συνολικό αριθμό ειδών στο καλάθι. Χρησιμοποιεί το περιορίζω() μέθοδος επανάληψης πάνω από το καρτΕίδη συστοιχίσετε και συνοψίστε τις ποσότητες όλων των αντικειμένων.
4. Η λειτουργική μονάδα επιστρέφει το δημόσιο API της ως αντικείμενο κυριολεκτικά, εκθέτοντας τρεις δημόσιες μεθόδους: πρόσθεσε είδος(), getTotalItems(), και clearCart().
5. Εκτός της λειτουργικής μονάδας, μπορείτε να αποκτήσετε πρόσβαση στις δημόσιες μεθόδους της λειτουργικής μονάδας για να αλληλεπιδράσετε με τη λειτουργία του καλαθιού αγορών.

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

Το μοτίβο του παρατηρητή

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

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

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το μοτίβο Observer για να εφαρμόσετε ένα απλό σύστημα ειδοποιήσεων:

// Υλοποίηση προτύπου παρατηρητή
λειτουργίαΣύστημα ειδοποιήσεων() {
// Κατάλογος συνδρομητών
Αυτό.subscribers = [];
// Μέθοδος εγγραφής σε ειδοποιήσεις
Αυτό.εγγραφώ = λειτουργία (συνδρομητής) {
Αυτό.subscribers.push (συνδρομητής);
 };
// Μέθοδος απεγγραφής από ειδοποιήσεις
Αυτό.διαγραφή = λειτουργία (συνδρομητής) {
συνθ ευρετήριο = Αυτό.subscribers.indexOf (συνδρομητής);
αν (ευρετήριο !== -1) {
Αυτό.subscribers.splice (ευρετήριο, 1);
 }
 };
// Μέθοδος ειδοποίησης των συνδρομητών
Αυτό.ειδοποιώ = λειτουργία (μήνυμα) {
Αυτό.subscribers.forEach(λειτουργία (συνδρομητής) {
 subscriber.receiveΕιδοποίηση (μήνυμα);
 });
 };
}
// Αντικείμενο συνδρομητή
λειτουργίαΣυνδρομητής(όνομα) {
// Μέθοδος λήψης και διαχείρισης ειδοποιήσεων
Αυτό.receiveNotification = λειτουργία (μήνυμα) {
κονσόλα.log (όνομα + " έλαβε ειδοποίηση: " + μήνυμα);
 };
}
// Παράδειγμα χρήσης
συνθ Σύστημα ειδοποιήσεων = νέος NotificationSystem();
// Δημιουργία συνδρομητών
συνθ συνδρομητής1 = νέος Συνδρομητής('Συνδρομητής 1');
συνθ συνδρομητής2 = νέος Συνδρομητής('Συνδρομητής 2');
// Εγγραφείτε συνδρομητές στο σύστημα ειδοποιήσεων
notificationSystem.subscribe (subscriber1);
notificationSystem.subscribe (subscriber2);
// Ειδοποίηση συνδρομητών
notificationSystem.notify('Νέα ειδοποίηση!');

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

ο Σύστημα ειδοποιήσεων η συνάρτηση αντιπροσωπεύει το σύστημα που στέλνει ειδοποιήσεις και το Συνδρομητής η λειτουργία αντιπροσωπεύει τους παραλήπτες των ειδοποιήσεων.

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

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

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

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

Η αποστολή μιας ειδοποίησης θα ενεργοποιήσει τη μέθοδο λήψης ειδοποίησης για κάθε συνδρομητή και θα καταγράψει το μήνυμα για κάθε συνδρομητή.

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

Χρήση προηγμένων μοτίβων JavaScript

Ακολουθούν ορισμένες γενικές συμβουλές για την αποτελεσματική χρήση προηγμένων μοτίβων JavaScript:

• Λάβετε υπόψη τις επιπτώσεις της απόδοσης: Τα προηγμένα μοτίβα ενδέχεται να εισάγουν πρόσθετη πολυπλοκότητα, η οποία μπορεί να επηρεάσει την απόδοση. Να έχετε υπόψη σας τις επιπτώσεις απόδοσης και βελτιστοποιήστε όπου χρειάζεται.
• Αποφύγετε τα αντι-μοτίβα: Κατανοήστε τα μοτίβα καλά και αποφύγετε να πέσετε σε αντι-μοτίβα ή να τα χρησιμοποιήσετε κατάχρηση. Χρησιμοποιήστε μοτίβα όπου έχουν νόημα και ευθυγραμμίζονται με τις απαιτήσεις της εφαρμογής σας.
• Ακολουθήστε τις συμβάσεις κωδικοποίησης: Ακολουθήστε με συνέπεια τις συμβάσεις κωδικοποίησης για να διατηρήσετε την αναγνωσιμότητα και τη συνέπεια στη βάση του κώδικά σας. Χρησιμοποιήστε ουσιαστικά ονόματα μεταβλητών και συναρτήσεων και παρέχετε σαφή τεκμηρίωση για τα μοτίβα σας.

Να είστε προσεκτικοί κατά την εφαρμογή αυτών των μοτίβων

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

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

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