Τα modules στη JavaScript είναι ένας τρόπος οργάνωσης του κώδικα σε ξεχωριστά αρχεία, κάνοντας τον κώδικα πιο δομημένο και ευανάγνωστο. Τα modules επιτρέπουν τη διαχωρισμένη ανάπτυξη, επιτρέποντας την επαναχρησιμοποίηση κώδικα και τη διατήρηση διαφορετικών λειτουργιών σε διάφορα αρχεία.
Στην παρακάτω περιγραφή, θα δείτε πώς να δημιουργήσετε και να χρησιμοποιήσετε modules στη JavaScript:
Δημιουργία ενός Module
Δημιουργήστε ένα νέο αρχείο με τον κώδικά σας. Ας πούμε ότι το αρχείο ονομάζεται utils.js και περιέχει το εξής:
// utils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
Στο παραπάνω παράδειγμα, δημιουργούμε δύο συναρτήσεις, add και subtract, και τις εξάγουμε (export) ως μέρος του module.
Χρήση ενός Module
Στο αρχείο που θέλετε να χρησιμοποιήσετε τις συναρτήσεις από το module, μπορείτε να το κάνετε ως εξής:
// main.js
import { add, subtract } from './utils.js';
const result1 = add(5, 3);
const result2 = subtract(10, 7);
console.log(result1); // Εμφανίζει: 8
console.log(result2); // Εμφανίζει: 3
Στο παραπάνω παράδειγμα, χρησιμοποιούμε τη δήλωση import για να εισάγουμε τις συναρτήσεις add και subtract από το αρχείο utils.js. Έπειτα, μπορούμε να χρησιμοποιήσουμε αυτές τις συναρτήσεις όπως συνηθίζεται.
Τα modules είναι ένας ισχυρός τρόπος οργάνωσης του κώδικα και της ανάπτυξης πιο συντηρητικών και αναγνώσιμων εφαρμογών.
[adinserter block=”2″]
Τα JavaScript modules σας επιτρέπουν να διαχωρίσετε τον κώδικά σας σε ξεχωριστά αρχεία.
Αυτό καθιστά πιο εύκολη τη συντήρηση της βάσης κώδικα σας.
Τα modules εισάγονται από εξωτερικά αρχεία με τη δήλωση import.
Τα modules εξαρτώνται επίσης από το type="module" στην ετικέτα <script>.
Ένα παράδειγμα κώδικα για τη χρήση JavaScript modules. Ας υποθέσουμε ότι θέλουμε να χρησιμοποιήσουμε ένα module που περιέχει μεθόδους για τις βασικές αριθμητικές πράξεις.
- Δημιουργήστε ένα αρχείο με το όνομα
math.js:
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
- Δημιουργήστε ένα αρχείο με το όνομα
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Modules Example</title> </head> <body> <script type="module" src="main.js"></script> </body> </html>
- Δημιουργήστε ένα αρχείο με το όνομα
main.js:
// main.js
import { add, subtract } from './math.js';
const result1 = add(5, 3);
const result2 = subtract(10, 7);
console.log(`Addition result: ${result1}`);
console.log(`Subtraction result: ${result2}`);
Αφού δημιουργήσετε τα παραπάνω αρχεία, ανοίξτε το αρχείο index.html σε έναν ιστότοπο και ελέγξτε την κονσόλα για τα αποτελέσματα. Το module math.js περιλαμβάνει δύο μεθόδους για την πρόσθεση και αφαίρεση αριθμών, ενώ το main.js εισάγει αυτές τις μεθόδους και τις χρησιμοποιεί. Το type="module" στην ετικέτα <script> είναι απαραίτητο για να εισάγετε modules στον κώδικά σας.
Τα modules με συναρτήσεις ή μεταβλητές μπορούν να αποθηκευτούν σε οποιοδήποτε εξωτερικό αρχείο.
Υπάρχουν δύο τύποι εξαγωγής: Ονομαστικές Εξαγωγές (Named Exports) και Προεπιλεγμένες Εξαγωγές (Default Exports).
[adinserter block=”3″]
Ονομαστικές Εξαγωγές (Named Exports)
Με τις ονομαστικές εξαγωγές, μπορείτε να εξάγετε πολλές συναρτήσεις ή μεταβλητές από ένα module και να τις εισάγετε με το ίδιο όνομα που χρησιμοποιήθηκε για την εξαγωγή.
Εδώ είναι ένα παράδειγμα:
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math.js';
const result1 = add(5, 3);
const result2 = subtract(10, 7);
console.log(`Addition result: ${result1}`);
console.log(`Subtraction result: ${result2}`);
Προεπιλεγμένες Εξαγωγές (Default Exports)
Με τις προεπιλεγμένες εξαγωγές, μπορείτε να εξάγετε μόνο μια συνάρτηση ή μια μεταβλητή από ένα module, και δεν απαιτείται να χρησιμοποιείτε το ίδιο όνομα κατά την εισαγωγή.
Εδώ είναι ένα παράδειγμα:
// math.js
export default function multiply(a, b) {
return a * b;
}
// main.js
import multiply from './math.js';
const result = multiply(4, 5);
console.log(`Multiplication result: ${result}`);
Στο παραπάνω παράδειγμα, χρησιμοποιούμε την προεπιλεγμένη εξαγωγή για να εξάγουμε τη συνάρτηση multiply από το math.js, και μπορούμε να την εισάγουμε με το όνομα που θέλουμε στο main.js.
Μπορείτε να εισάγετε modules σε ένα αρχείο με δύο τρόπους, ανάλογα αν πρόκειται για ονομαστικές εξαγωγές ή προεπιλεγμένες εξαγωγές.
Οι ονομαστικές εξαγωγές εισάγονται χρησιμοποιώντας αγκύλες {}. Οι προεπιλεγμένες εξαγωγές δεν χρειάζονται αυτές τις αγκύλες.
Εδώ είναι ένα παράδειγμα:
Ονομαστικές Εξαγωγές (Named Exports)
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math.js';
const result1 = add(5, 3);
const result2 = subtract(10, 7);
console.log(`Addition result: ${result1}`);
console.log(`Subtraction result: ${result2}`);
Προεπιλεγμένες Εξαγωγές (Default Exports)
// math.js
export default function multiply(a, b) {
return a * b;
}
// main.js
import multiply from './math.js';
const result = multiply(4, 5);
console.log(`Multiplication result: ${result}`);
Στο παραπάνω παράδειγμα, στο main.js, χρησιμοποιούμε τη δήλωση import με αγκύλες {} για να εισάγουμε τις ονομαστικές εξαγωγές add και subtract από το math.js, ενώ χρησιμοποιούμε την προεπιλεγμένη εξαγωγή με την δήλωση import χωρίς αγκύλες για τη συνάρτηση multiply από το math.js.