JavaScript-Module

In diesem Tutorial lernen Sie anhand von Beispielen Module in JavaScript kennen.

Wenn unser Programm größer wird, kann es viele Codezeilen enthalten. Anstatt alles in eine einzelne Datei zu packen, können Sie Module verwenden, um Codes in separaten Dateien entsprechend ihrer Funktionalität zu trennen. Dies macht unseren Code organisiert und einfacher zu pflegen.

Das Modul ist eine Datei, die Code zum Ausführen einer bestimmten Aufgabe enthält. Ein Modul kann Variablen, Funktionen, Klassen usw. enthalten. Sehen wir uns ein Beispiel an:

Angenommen, eine Datei mit dem Namen greet.js enthält den folgenden Code:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Um den Code von greet.js in einer anderen Datei zu verwenden, können Sie den folgenden Code verwenden:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Hier,

• Die greetPerson()Funktion in der Datei greet.js wird mit dem exportSchlüsselwort exportiert

   export function greetPerson(name) (… )

• Dann haben wir greetPerson()mit dem importSchlüsselwort in eine andere Datei importiert . Um Funktionen, Objekte usw. zu importieren, müssen Sie sie umschließen ( ).

   import ( greet ) from '/.greet.js';

Hinweis : Sie können nur über das Modul auf exportierte Funktionen, Objekte usw. zugreifen. Sie müssen das exportSchlüsselwort für die jeweilige Funktion, Objekte usw. verwenden, um sie zu importieren und in anderen Dateien zu verwenden.

Mehrere Objekte exportieren

Es ist auch möglich, mehrere Objekte aus einem Modul zu exportieren. Beispielsweise,

In der Datei module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

In der Hauptdatei

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Hier,

 import ( name, sum ) from './module.js';

Dadurch werden sowohl sum()die Namensvariable als auch die Funktion aus der Datei module.js importiert .

Umbenennung von Importen und Exporten

Wenn die Objekte (Variablen, Funktionen usw.), die Sie importieren möchten, bereits in Ihrer Hauptdatei vorhanden sind, verhält sich das Programm möglicherweise nicht wie gewünscht. In diesem Fall übernimmt das Programm den Wert aus der Hauptdatei anstelle der importierten Datei.

Um Namenskonflikte zu vermeiden, können Sie diese Funktionen, Objekte usw. während des Exports oder während des Imports umbenennen.

1. Im Modul umbenennen (Exportdatei)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Hier werden beim Exportieren der Funktion aus der Datei module.js der Funktion neue Namen (hier newName1 & newName2) zugewiesen. Daher wird beim Importieren dieser Funktion der neue Name verwendet, um auf diese Funktion zu verweisen.

2. Benennen Sie die Importdatei um

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Hier werden beim Importieren der Funktion die neuen Namen (hier newName1 & newName2) für den Funktionsnamen verwendet. Jetzt verwenden Sie die neuen Namen, um auf diese Funktionen zu verweisen.

Standardexport

Sie können auch den Standardexport des Moduls durchführen. Beispielsweise,

In der Datei greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Beim Importieren können Sie dann Folgendes verwenden:

 import random_name from './greet.js';

Während des Standardexports

• zufälliger_name wird aus importiert greet.js. Da random_namenicht in ist greet.js, ist der Standard Export ( greet()in diesem Fall) exportiert als random_name.
• Sie können den Standardexport direkt verwenden, ohne geschweifte Klammern einzuschließen ().

Hinweis : Eine Datei kann mehrere Exporte enthalten. Sie können jedoch nur einen Standardexport in eine Datei haben.

Module Verwenden Sie immer den Strict Mode

Standardmäßig befinden sich Module im strengen Modus. Beispielsweise,

 // in greet.js function greet() ( // strict by default ) export greet();

Nutzen der Verwendung des Moduls

• Die Codebasis ist einfacher zu pflegen, da sich unterschiedlicher Code mit unterschiedlichen Funktionen in unterschiedlichen Dateien befindet.
• Macht Code wiederverwendbar. Sie können ein Modul definieren und je nach Bedarf mehrfach verwenden.

Die Verwendung von Import / Export wird in einigen Browsern möglicherweise nicht unterstützt. Weitere Informationen finden Sie unter JavaScript-Import / Export-Support.