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

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

Εδώ θα καλύψετε τα συστήματα λειτουργικών μονάδων που χρησιμοποιούνται σε εφαρμογές JavaScript, συμπεριλαμβανομένου του μοτίβου λειτουργιών, του συστήματος λειτουργικών μονάδων CommonJS που χρησιμοποιείται στις περισσότερες εφαρμογές Node.js και του συστήματος ES6 Module.

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

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

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

instagram viewer

Εδώ είναι η βασική δομή ενός IIFE:

(λειτουργία () {
//κωδικός εδώ
})();
(() => {
//κωδικός εδώ
})();
(ασυγχρονισμός () => {
//κωδικός εδώ
})();

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

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

Για παράδειγμα:

συνθ φου = (λειτουργία () {
συνθ sayName = (όνομα) => {
κονσόλα.κούτσουρο(«Γεια, με λένε ${name}`);
 };
//Εκθέτοντας τις μεταβλητές
ΕΠΙΣΤΡΟΦΗ {
 callSayName: (όνομα) => sayName (όνομα),
 };
})();
//Πρόσβαση σε εκτεθειμένες μεθόδους
foo.callSayName("Μπαρ");

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

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

Παρατηρήστε ότι το IIFE αποθηκεύεται σε μια μεταβλητή, foo. Αυτό συμβαίνει επειδή, χωρίς μια μεταβλητή να δείχνει τη θέση της στη μνήμη, οι μεταβλητές δεν θα είναι προσβάσιμες μετά την εκτέλεση του σεναρίου. Αυτό το μοτίβο είναι δυνατό λόγω Κλείσιμο JavaScript.

Το σύστημα μονάδων CommonJS

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

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

Αυτό το σύστημα μονάδας δημιουργήθηκε για JavaScript από την πλευρά του διακομιστή (Node.js) και, ως εκ τούτου, δεν υποστηρίζεται από προεπιλογή στα προγράμματα περιήγησης.

Για να εφαρμόσετε μονάδες CommonJS στο έργο σας, πρέπει πρώτα να αρχικοποιήσετε το NPM στην εφαρμογή σας εκτελώντας:

npm init -y

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

//randomModule.js
//εγκατεστημένο πακέτο
συνθ installedImport = απαιτώ("όνομα πακέτου");
//τοπική μονάδα
συνθ localImport = απαιτώ("/path-to-module");

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

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

Με όνομα Εξαγωγές

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

Για παράδειγμα:

//main.js
εξαγωγές.myExport = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα όνομα εξαγωγή");
};
εξαγωγές.άλλοςΕξαγωγή = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα άλλο παράδειγμα του ένα όνομα εξαγωγή");
};

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

Ομοίως, μπορείτε να εξάγετε τις λειτουργίες όπως:

συνθ myExport = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα όνομα εξαγωγή");
};
συνθ άλληΕξαγωγή = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα άλλο παράδειγμα του ένα όνομα εξαγωγή");
};
μονάδα μέτρησης.εξαγωγές = {
 myExport,
 άλληΕξαγωγή,
};

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

Ο κώδικάς σας θα δημιουργούσε ένα σφάλμα εάν επιχειρούσατε να το κάνετε με αυτόν τον τρόπο:

//λάθος τρόπο
εξαγωγές = {
 myExport,
 άλληΕξαγωγή,
};

Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να εισαγάγετε επώνυμες εξαγωγές:

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

Για παράδειγμα:

//otherModule.js
συνθ foo = απαιτώ("./κύριος");
foo.myExport();
foo.άλλοΕξαγωγή();

2. Αποδιάρθρωση των εξαγωγών από το εξαγωγές αντικείμενο.

Για παράδειγμα:

//otherModule.js
συνθ { myExport, AnotherExport } = απαιτώ("./κύριος");
myExport();
otherExport();

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

Προεπιλεγμένες εξαγωγές

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

Για παράδειγμα:

//main.js
τάξηFoo{
 μπαρ() {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα Προκαθορισμένοεξαγωγή");
 }
}
μονάδα μέτρησης.εξαγωγές = Φου;

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

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

Για παράδειγμα:

//otherModule.js
συνθ Μπαρ = απαιτώ("./κύριος");
συνθ αντικείμενο = νέος Μπαρ();
αντικείμενο.μπαρ();

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

Το σύστημα μονάδων ES6

Το σύστημα μονάδων ECMAScript Harmony, ευρέως γνωστό ως μονάδες ES6, είναι το επίσημο σύστημα λειτουργικών μονάδων JavaScript.

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

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

Όπως έτσι:

//index.html
<σενάριο src="./app.js" τύπος="μονάδα μέτρησης"></script>

Στο Node.js, πρέπει να ορίσετε τύπος προς την μονάδα μέτρησης στο δικό σου πακέτο.json αρχείο.

Όπως έτσι:

//package.json
"τύπος":"μονάδα μέτρησης"

Μπορείτε επίσης να εξάγετε μεταβλητές χρησιμοποιώντας το σύστημα μονάδων ES6 χρησιμοποιώντας είτε επώνυμες εξαγωγές είτε προεπιλεγμένες εξαγωγές.

Με όνομα Εξαγωγές

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

Για παράδειγμα:

//main.js
εξαγωγήσυνθ myExport = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα όνομα εξαγωγή");
};
εξαγωγήσυνθ άλληΕξαγωγή = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα άλλο παράδειγμα του ένα όνομα εξαγωγή");
};

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

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

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

Ακολουθεί ένα παράδειγμα αποδιάρθρωσης:

//otherModule.js
εισαγωγή { myExport, AnotherExport } από "./main.js";
myExport()
AnotherExport()

Ακολουθεί ένα παράδειγμα εισαγωγής ολόκληρου του αντικειμένου:

εισαγωγή * όπως και foo από "./main.js"
foo.myExport()
foo.άλλοΕξαγωγή()

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

Προεπιλεγμένες εξαγωγές

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

Για παράδειγμα:

//main.js
τάξηFoo{
 μπαρ() {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα Προκαθορισμένοεξαγωγή");
 }
}
εξαγωγήΠροκαθορισμένο Foo;

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

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

Για παράδειγμα:

//otherModule.js
εισαγωγή Μπαρ από "./main.js";

Μικτές Εξαγωγές

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

Για παράδειγμα:

//main.js
εξαγωγήσυνθ myExport = λειτουργία () {
κονσόλα.log("Αυτό είναι ένα άλλο παράδειγμα του ένα όνομα εξαγωγή");
};
τάξηFoo{
 μπαρ() {
κονσόλα.log("Αυτό είναι ένα παράδειγμα του ένα Προκαθορισμένοεξαγωγή");
 }
}
εξαγωγήΠροκαθορισμένο Foo;

Σημασία των Ενοτήτων

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