Εισαγωγή στα συστήματα μονάδων σε JavaScript

Εισαγωγή στα συστήματα μονάδων σε JavaScript

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





ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

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



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





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

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

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



το bluetooth των Windows 10 είναι απενεργοποιημένο

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

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

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



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

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



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
foo.callSayName("Bar");

Το παραπάνω μπλοκ κώδικα είναι ένα παράδειγμα του τρόπου με τον οποίο δημιουργήθηκαν λειτουργικές μονάδες πριν από την εισαγωγή των εγγενών λειτουργικών μονάδων 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 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

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

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

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

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

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

//main.js 
exports.myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

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

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

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

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

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

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

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

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

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

//otherModule.js 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

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

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

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

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

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

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

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

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

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

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

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

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.bar();

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

καλύτερη εφαρμογή καθαρισμού Android χωρίς διαφημίσεις

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

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

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

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

Όπως έτσι:

//index.html 
<script src="./app.js" type="module"></script>

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

Όπως έτσι:

//package.json 
"type":"module"

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

πώς να απενεργοποιήσετε τον χρόνο οθόνης

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

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

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

//main.js 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named export"); 
};

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

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

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

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

//otherModule.js 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

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

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

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

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

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

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

//main.js 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

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

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

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

//otherModule.js 
import Bar from "./main.js";

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

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

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

//main.js 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

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

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