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

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

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

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

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

Οι ενότητες JavaScript παρουσιάστηκαν το 2009, με την έκδοση ES5 της γλώσσας προγραμματισμού. Χρησιμοποιώντας ενότητες, οι προγραμματιστές ήταν πλέον σε θέση να δημιουργήσουν προσαρμοσμένα κομμάτια κώδικα και να τα εξάγουν για να χρησιμοποιηθούν σε άλλα τμήματα μιας εφαρμογής JavaScript.

Η βασική δομή του μοτίβου ενότητας

  
(function(){  
//Declare private variables and functions  
//Declare and return public variables and functions  
})();

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

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

Η δεύτερη ενότητα αποτελείται από μια τιμή επιστροφής που περικλείει δημόσιες μεταβλητές και συναρτήσεις στις οποίες είναι δυνατή η πρόσβαση εκτός του πλαισίου του μοτίβου της ενότητας.

Χρήση του μοτίβου ενότητας για τη δημιουργία εφαρμογής

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

Ένας ελεγκτής εργασιών
Ελεγκτής UI
Ελεγκτής αποθήκευσης
Ελεγκτής εφαρμογών

Σχετίζεται με: Έργα προγραμματισμού για αρχάριους

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

Χρήση του μοτίβου μονάδας για δημιουργία παραδείγματος ελεγκτή διεπαφής χρήστη

  
const UIController = ( function() {  
//the private section of the module  
let component = 'Replacement Text';  
const changeComponent = function() {  
//change all the h1 text to what is in the component variable above  
const element = document.querySelector('h1');  
element.textContent = component;  
}  
//the public section of the module  
return{  
callChangeComponent: function() {  
changeComponent();  
}  
}  
})();

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

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

Λανθασμένος τρόπος για να καλέσετε το παράμετρο changeComponent

  
UIController.changeComponent();

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

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

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

Σωστός τρόπος για να καλέσετε το παράδειγμα Παράδειγμα στοιχείου

  
UIController.callChangeComponent();

Το μοτίβο του εργοστασίου

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

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

Χρησιμοποιώντας το Factory Pattern για να εκχωρήσετε ένα παράδειγμα τύπου εργασίας

  
//Factory pattern function  
const TaskFactory = function(){  
this.createTask = function(name, type){  
let task;  
//check the type the user selected  
if(type === 'urgent'){  
task = new UrgentTask(name);  
}else if(type === 'trivial'){  
task = new TrivialTask(name);  
}  
//set the type selected in the if statement to the one received as a property  
task.type = type;  
//used to print the task and its type to the console  
task.define = function(){  
console.log(`${this.name} (${this.type}): ${this.priority}`)  
}  
return task  
}  
}

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

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

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

Δημιουργήστε επείγοντες και ασήμαντους τύπους εργασιών

  
//Create the urgent task type  
const UrgentTask = function(name){  
this.name = name;  
this.priority = 'as soon as possible'  
}  
//create the trivial task type  
const TrivialTask = function(name){  
this.name = name;  
this.priority = 'when you can'  
}

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

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

Δημιουργία παραδείγματος πίνακα

  
//create an array to host the different task  
const task = [];

Τώρα μπορούμε επιτέλους να δημιουργήσουμε μια νέα εργασία.

Παράδειγμα δημιουργίας νέων εργασιών

  
//create two new tasks  
const factory = new TaskFactory();  
task.push(factory.createTask('Clean the house', 'urgent'));  
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));

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

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

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

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

  
//print each task to the console  
task.forEach(function(task){  
task.define();  
});

Θα πρέπει να δείτε την ακόλουθη έξοδο να εμφανίζεται στην κονσόλα σας.

  
Clean the house (urgent): as soon as possible  
Reach level 30 in Candy Crush (trivial): when you can

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

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

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

Πίστωση εικόνας: Alltechbuzz/ Pixabay

πώς να κατεβάσετε φωτογραφίες από το facebook

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να δηλώσετε μεταβλητές στο JavaScript

Για να ξεκινήσετε με το JavaScript, πρέπει να κατανοήσετε τις μεταβλητές. Ακολουθούν τρεις τρόποι δήλωσης μεταβλητών στο JavaScript.

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
JavaScript

Σχετικά με τον Συγγραφέα Kadeisha Kean(Δημοσιεύθηκαν 21 άρθρα)

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

Περισσότερα από τον Kadeisha Kean

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή