Heutzutage spielt JavaScript eine große Rolle bei der Entwicklung von Websites. Front-End-Entwickler verwenden JavaScript, um interaktive Webanwendungen zu erstellen. Infolgedessen ist die Nachfrage nach JavaScript-Entwicklern gestiegen.
Sicherlich hat sich JavaScript im Laufe der Jahre weiterentwickelt. ES6 führte viele neue Funktionen in die Sprache ein. Eine davon ist eine Möglichkeit, Codes zwischen JavaScript-Dateien einfach auszutauschen.
Funktionsimport und -export für JavaScript sind neue Features, die Sie zu einem besseren Entwickler machen. So funktionieren diese Funktionen.
Was ist ein JavaScript-Modul?
Ein JavaScript-Modul ist eine JavaScript-Datei, die eine Codesammlung enthält, die Sie verwenden können. Module werden normalerweise in separate Dateien geschrieben und mithilfe von importiert importieren Stichwort. Es spart Zeit und Mühe, da Sie es später wiederverwenden können.
Zum Beispiel, wenn Sie eine Funktion aufgerufen haben berechnenSumme(), können Sie es in eine andere Datei einfügen und überall in Ihrem Projekt verfügbar machen, indem Sie die verwenden
Export Und importieren JavaScript funktioniert ohne viel Aufhebens.Einer der Vorteile der Verwendung von Modulen besteht darin, dass es hilft, Ihren Code zu organisieren. Es macht auch Ihren Code überschaubarer und einfacher zu debuggen.
Um eine JavaScript-Datei als Modul zu verwenden, müssen Sie in Ihrem HTML-Dokument ein Skript mit einem erstellen type="modul".
<Skripttyp="Modul" Quelle="Dateiname.js"></script>
Es gibt zwei Arten von Modulen:
- ECMAScript-Module: Standard-JavaScript-Module, die von allen gängigen Browsern unterstützt werden.
- CommonJS-Module: sind älter und werden nicht allgemein unterstützt.
Wir konzentrieren uns hier auf die ECMAScript-Module. Sehen Sie sich bei Bedarf unsere an Einführung in JavaScript um die Grundlagen aufzufrischen.
So exportieren Sie Funktionen in JavaScript
In JavaScript sind Funktionen erstklassige Objekte, die neben der eigenständigen Verwendung auch als Argumente übergeben werden können. Das Exportieren von Funktionen ist eine gute Möglichkeit, sie in andere Programme zu übertragen. Es wird auch verwendet, wenn Sie wiederverwendbare Bibliotheken erstellen möchten.
Das Exportieren von Funktionen in JavaScript erfolgt über die Export Funktion. Der Export Funktion exportiert eine gegebene Funktion, die von einer anderen Datei oder einem anderen Skript verwendet werden soll. Durch den Export unsere eigenen Funktionen, können wir sie frei in anderen Dateien oder Skripten verwenden, ohne uns um Lizenzprobleme kümmern zu müssen.
Es gibt zwei Möglichkeiten, die zu verwenden Export effizient funktionieren. Wir werden diese mit Codebeispielen durchgehen.
Angenommen, Sie haben eine Datei getPersönlicheDetails.js die eine Funktion hat, die den vollständigen Namen eines Benutzers nach einer Eingabeaufforderung zurückgibt. Die Funktion sieht so aus:
FunktiongetFullName(vollständiger Name){
vollständigerName = Eingabeaufforderung ('Wie lautet dein Vorname');
Konsole.log (vollständiger Name);
}
- Sie können diese Funktion exportieren, indem Sie einfach die verwenden Export Schlüsselwort gefolgt vom Namen der Funktion in geschweiften Klammern. Es sieht aus wie das:
Export {getFullName}; - Die zweite Methode besteht darin, die hinzuzufügen Export Schlüsselwort kurz vor der Deklaration der Funktion.
ExportFunktiongetFullName (vollständiger Name){...}
Mit der ersten Methode können Sie mehrere Funktionen exportieren. Dazu werden die Namen der gewünschten Funktionen in die geschweiften Klammern eingeschlossen. Die Funktionen werden durch Komma getrennt.
Zum Beispiel: Angenommen, Sie haben drei Funktionen in unserem getPersönlicheDetails.js Datei - getFullName(),getE-Mail(), getDob(). Sie können die Funktionen exportieren, indem Sie die folgende Codezeile hinzufügen:
exportiere {getFullName, getEmail, getDob};
So importieren Sie Funktionen in JavaScript
Um ein Modul verwenden zu können, müssen Sie es zunächst importieren. Jede Funktion kann mit einer vollständigen Pfadreferenz importiert werden.
Das Importieren von Funktionen ist recht einfach. JavaScript hat eine eingebaute Funktion, um eigene Funktionen aus anderen Dateien zu importieren. Wenn Sie von anderen Modulen aus auf diese Funktionen zugreifen möchten, empfiehlt es sich, für jedes Ihrer Dienstprogramme eine Funktionsdeklaration einzuschließen.
Eine zu importierende Funktion ist bereits in ihrer Originaldatei exportiert.
Sie können Funktionen aus einer anderen Datei importieren, indem Sie die verwenden importieren Keyword-Funktionalität. Importieren können Sie auswählen, welcher Teil einer Datei oder eines Moduls geladen werden soll.
So importieren Sie unsere getFullName Funktion ab getPersönlicheDetails.js:
importieren {getFullName} aus './getPersonalDetails.js'Dadurch wird diese Funktion für die Verwendung in unserer aktuellen Datei verfügbar.
Um mehrere Funktionen zu importieren, werden die zu importierenden Funktionen in geschweiften Klammern eingeschlossen. Jede wird durch ein Komma (,) getrennt.
importieren {getFullName, getEmail, getDob} aus './getPersonalDetails.js'Es gibt eine andere Möglichkeit, die zu verwenden importieren Funktionalität. Dadurch können wir alle Exporte in eine bestimmte Datei importieren. Dies geschieht mit der * importieren als Syntax.
Sie können alle Exporte in unserem importieren getPersönlicheDetails.js indem Sie die folgende Codezeile hinzufügen:
importieren * als persönlicheDetailsModul aus './getPersonalDetails.js'Das obige erstellt ein Objekt namens persönlicheDetailsModul.
Dies ist nur ein Variablenname, Sie können ihm einen beliebigen Namen geben.
Dieses Objekt enthält alle Exporte in unserer getPersonalDetails.js. Die Funktionen werden in diesem Objekt gespeichert und können auf die gleiche Weise aufgerufen werden, wie Sie auf jede Objekteigenschaft zugreifen.
Beispielsweise können wir auf die zugreifen getFullName Funktion, indem Sie die folgende Codezeile hinzufügen
persönlicheDetailsModul.getFullName();Was ist Exportstandard?
Standard exportieren ist eine außergewöhnliche Exportfunktion. Dies wird verwendet, wenn nur eine Variable aus einer Datei exportiert wird. Es wird auch verwendet, um einen Fallback-Wert für eine Datei oder ein Modul zu erstellen.
Unten ist ein Beispiel, wo wir die verwendet haben getFullName Funktion als Standard:
ExportStandardFunktiongetFullName (vollständiger Name){...}Sie können nicht mehr als einen Wert als Standard in jedem Modul oder jeder Datei haben.
Eine standardmäßig verwendete Funktion wird anders importiert. So importieren Sie unsere getFullName Standardmäßig verwendete Funktion:
importieren vollständiger Name aus './getPersonalDetails.js'Hier sind die Unterschiede:
- Es gibt keine geschweiften Klammern um den importierten Wert, vollständiger Name.
- vollständiger Name Hier ist nur ein Variablenname. Es speichert den Wert der Standardfunktion.
Optimieren Sie Ihre JavaScript-Funktionen
JavaScript-Module sind Codeteile, die mithilfe der Import- und Export-JavaScript-Funktionen in anderen Teilen Ihres Codes wiederverwendet werden können. Sie werden normalerweise in separate Dateien geschrieben und mit dem Schlüsselwort import importiert. Einer der Vorteile der Verwendung von Modulen besteht darin, dass es hilft, Ihren Code zu organisieren. Es macht auch Ihren Code überschaubarer und einfacher zu debuggen.