Module, Import- und Exportanweisungen in JavaScript | Mit Beispielen erklärt

Module werden in JavaScript verwendet, um das Konzept der Modularität zu implementieren, das im Kern der Prozess der Aufteilung einer Lösung in kleinere, kompakte und aussagekräftigere Komponenten ist. In JavaScript wird die Modularität durch die Verwendung von Exporten und importiert Keywords erreicht. Wenn JavaScript als modulares Skript mit einer HTML -Webseite verwendet wird, ist das Schlüsselwort “Modul”Wird als Typ des Skript -Tags hinzugefügt

Warum Module verwenden?

Vermeiden Sie es, die Wörter zu wiederholen. „Im Laufe der Zeit haben sich Webanwendungen von sehr kleinen Programmen zu großen und komplexen Programmen geändert, um komplizierte Aufgaben zu erfüllen. Um größere/komplexe Webanwendungen zu erstellen, wurde ES6 JavaScript mit der Fähigkeit geliefert, Skripte unter Verwendung des Exportfunktion und das Importfunktion.

Einrichten einer HTML -Seite

Gehen Sie in Ihren bevorzugten Texteditor und erstellen Sie eine HTML -Seite. Geben Sie einfach die folgenden Codezeilen in das Body -Tag ein:

JS -Module erklärten

Anstatt die HTML -Elemente auf einer Webseite zu manipulieren, werden wir die Ausgabe mithilfe der Konsole anzeigen und überprüfen. Daher benötigen wir keine schicken Elemente auf unserer HTML -Webseite.

Führen Sie die Datei aus und Sie sehen die folgende Ausgabe:

Einrichten von Skriptdateien

Erstellen Sie nun im selben Verzeichnis, in dem sich Ihre HTML -Datei befindet, zwei “.JS”Dateien als:

• Hauptkript.JS: Diese Datei wird mit der HTML -Webseite verknüpft.
• Compscript.JS: Diese Datei enthält einige Komponentenfunktionen.

Genau wie dieser:

Linken Sie jetzt in Ihrem HTML das Netzkript.JS Verwenden Sie den folgenden Befehl:

Wie Sie sehen können, übergeben wir im Gegensatz zu normalen Skript -Tags nicht nur den Quell -Link, sondern auch den Typ, der auf “eingestellt istModul”, Um den Browser zu benachrichtigen, dass sich dieses Skript in modularer Form befindet.

Funktionen in der Komponentendatei hinzufügen

Um die Modularität anzuzeigen, erstellen Sie einige Variablen/Funktionen in der Komponenten -Skriptdatei “Compscript.JSUnd exportieren Sie sie in die Hauptkript.JS.

In der Compscript.JS Erstellen Sie die folgende Funktion, mit der 5 Zahlen ausgedruckt sind:

Funktion PrintNumbers (num)
für (lass i = num; ich <= num+5 ; i++)
Konsole.log (i);

Ihre Komponenten -Skriptdatei sieht Folgendes aus:

Exportieren und Importieren von Funktionen

Nun zugänglich auf diese Funktion innerhalb der Hauptkript.JS Datei Sie müssen diese Funktion aus dem CompScript exportieren.JS -Datei. Sie können dies tun, indem Sie den Keyword -Export hinter die Funktion wie diese stellen:

Verwenden Sie es nun im Netzkript.JS, wir müssen das fangen Export Verwendung der importieren Funktion. Sie können dies tun, indem Sie die folgende Syntax verwenden:

Importieren Sie Funktionsname aus "scriptsoruce.JS;

In unserem Fall würde sich diese Zeile in:

importieren printNumbers aus "./Compscript.JS ";

Um diese Funktion in unserer Hauptskriptdatei zu verwenden, können Sie die Funktion einfach aufrufen, wenn wir eine andere Funktion in JavaScript aufrufen:

PrintNumbers (5);

Der Hauptkript.JS wird so aussehen:

Speichern Sie die Datei und aktualisieren Sie die HTML und gehen Sie zur Entwicklerkonsole. Sie sehen die folgende Ausgabe:

Und wenn Sie genau auf die Ausgabe in der Konsole achten, werden Sie sehen:

Obwohl Sie das nur verknüpft haben Mianscript.JS Mit der HTML -Seite wurde unsere Komponente erfolgreich ausgeführt. Daher können Sie sagen, dass Sie das Konzept der Komponentialmodularität erfolgreich implementiert haben.

Aber warte, es gibt noch mehr!

Stellen Sie sich vor, Sie exportieren mehrere Funktionen wie:

Exportfunktion PrintNumbers (num)
für (lass i = num; ich <= num + 5; i++)
Konsole.log (i);


Exportfunktion nameprinter ()
Konsole.log ("John Doe")

Export const alter = 22;
Exportfunktion printjob ()
Konsole.log ('Auditor');

Schreiben des Schlüsselworts Export Mit jedem Element, das Sie exportieren möchten, ist dies kein guter Ansatz, was Sie tun können, ist am Ende der Datei, schreiben Sie einen Zeilenbefehl, der die Funktionen und die Variablen exportieren, die Sie möchten.

Sie tun dies, indem Sie die folgende Zeile schreiben:

exportieren printNumbers, nameprinter, Alter, printjob;

Dein Compscript.JS wird so aussehen:

Um alle Funktionen und Variablen mit dem Schlüsselwort für Exportieren aus einer Datei zu importieren, können Sie das Asterisk "*" -Symbol wie unten gezeigt verwenden:

Import * als Comp von "./Compscript.JS ";

Der Sternchensymbol " *" bedeutet, dass Sie alle Exporte der Datei unter dem Namen importieren möchten “Comp”,

Verwenden Sie die Funktion und Variablen, die wir gerade importiert haben, die Punktbetreiber zusammen mit dem Namen der Funktion/Variablen:

Comp.Nameprinter ();

Wenn Sie alle Exporte aus dem verwenden möchten Compscript.JS Datei, dann verwenden Sie den folgenden Code:

Import * als Comp von "./Compscript.JS ";
Comp.Nameprinter ();
Konsole.log ("Alter ist:" + comp.Alter);
Comp.printjob ();
Comp.PrintNumbers (2);

Dann dein Hauptkript.JS wird so aussehen:

Speichern Sie die Dateien und aktualisieren Sie die Webseite, und Sie sehen die Ausgabe in der Konsole als

Wie Sie sehen können, haben wir jeden Export von der erfolgreich genutzt Compscript.JS in unserem Hauptkript.JS Datei.

Abschluss

Module helfen uns, unsere Webanwendungen in kleinere, prägnante und überschaubare Teile zu unterteilen. Die Modularität im JavaScript wird erreicht, indem das Skript in verschiedene Komponenten aufgeteilt und die verwendet wird importieren Und Export Merkmale Option in ES6 eingeführt. Um dies zu demonstrieren, haben wir eine grundlegende HTML -Seite eingerichtet, zwei verschiedene Skriptdateien erstellt und einige Funktionen in der Komponentendatei angegeben. Danach haben wir sie in unserer Hauptskriptdatei verwendet. Wir haben auch verschiedene Möglichkeiten zum Exportieren mehrerer Merkmale und im Importieren aller Funktionen auf einmal gelernt.