Während der Entwicklung von Websites erstellt der Entwickler mehr als eine JavaScript -Datei für verschiedene Funktionen, mit denen die Gesamtleistung oder Anwendung einer Website verbessert wird. Außerdem kann es einfacher organisiert und verwaltet werden. Durch Einbeziehen einer JavaScript -Datei in eine andere Datei kann der Code in dieser Datei an mehreren Stellen wiederverwendet werden. Beispielsweise müssen Programmierer manchmal eine Funktion von einer anderen Datei aufrufen oder auf einige Variablen zugreifen, wodurch variable Benennungskonflikte verhindern können.
In diesem Artikel wird die Methoden demonstriert, die eine JS -Datei in eine andere JS -Datei einbeziehen/hinzufügen können.
So fügen Sie eine JavaScript -Datei in eine andere JavaScript -Datei ein?
Verwenden Sie die folgenden Möglichkeiten, um eine JavaScript -Datei in eine andere JavaScript -Datei einzubeziehen/in eine andere JavaScript -Datei hinzuzufügen:
Methode 1: Fügen Sie eine JavaScript -Datei in eine andere JavaScript -Datei mit dem Tag "" ein
Vor den ES6 -Modulen wurden die JavaScript -Dateien in andere JavaScript -Dateien hinzugefügt, indem er ein erstellt wurdeSkriptElement in der JavaScript -Datei und verwendet die “src”Attribut zum Hinzufügen des Pfades/des Speicherorts der Datei.
Beispiel
Erstellen Sie in einer HTML -Datei einen Absatz mit der “"Tag zuweisen, indem eine ID zugewiesen wird"TextSo drucken Sie den Text auf der Seite von JavaScript:
Erstellen Sie eine JavaScript -Datei “JSfile.JSDas wird der Haupt -JavaScript -Datei hinzugefügt. Schreiben Sie in dieser Datei einen Code, um den Text auf der Webseite mit der “zu druckenInnerhtml" Eigentum:
dokumentieren.GetElementById ("Text").innerhtml = 'Hallo, ich bin JSfile.JS In der Haupt -JavaScript -Datei mithilfe der JavaScript -Datei hinzugefügt Skript Schild';
Im "”Tag in der HTML -Datei oder in der Haupt -JavaScript -Datei erstellen Sie zuerst eine Variable“Skript”:
var script = Dokument.CreateLement ('Skript');
Fügen Sie nun den Dateipfad mit der "hinzu" hinzusrcAttribut/Eigenschaft und fügen Sie es dann als Kind zum "hinzu"Kopf" Schild:
Skript.src = "./JSfile.JS ";
dokumentieren.Kopf.appendChild (script);
Es ist zu sehen, dass das “JSfile.JS”Wird in der Haupt -JavaScript -Datei hinzugefügt, da er den Text auf der Webseite druckt:
Methode 2: Fügen Sie eine JavaScript -Datei in eine andere JavaScript -Datei mit der Anweisung "Import" ein
In ES6 -Modulen wird die Anweisung import/exportiert, um die Datei in eine andere JavaScript -Datei hinzuzufügen. Dies ist eine moderne Methode, die von den meisten modernen Browsern unterstützt wird. Sie können eine JavaScript -Datei als Modul importieren, die dann in der Importdatei verwendet werden kann.
Beispiel
Importieren "JSfile.JS”In der Hauptdatei der JavaScript oder der“” Tag in einer HTML -Datei mit der “importieren" Stichwort:
Ausgang
Manchmal müssen Programmierer nur eine Funktion anstelle einer vollständigen Datei importieren. Schauen Sie sich unsere andere „Exportfunktion in JavaScript“ an.
Notiz: Um eine Datei in eine andere Datei im Knoten einzubeziehen.JS, die “erfordern()" Methode wird verwendet. Das Importieren einer JavaScript -Datei als Modul, die dann wie folgt in der Importdatei verwendet werden kann:
const modul = fordert ('./JSfile.JS ');
Hier geht es darum, die eine JavaScript -Datei in eine andere Datei einzubeziehen.
Abschluss
Verwenden Sie die “, um eine JavaScript -Datei in eine andere JavaScript -Datei aufzunehmenTag, indem Sie ein neues "Skript" -Element in JavaScript erstellen, indem Sie die “verwendenCreateLement”Attribut oder das“importieren" Stellungnahme. Moderne Browser unterstützen die Anweisung "Import", während das Tag "Skript" eine alte Methode ist, um eine JavaScript -Datei in eine andere Datei aufzunehmen. Dieser Artikel hat die Methoden demonstriert, um eine JS -Datei in eine andere Datei einzubeziehen/hinzuzufügen.