Wie man eine Funktion aus einer anderen JS-Datei aufruft

Um eine Funktion aus einer anderen JavaScript-Datei aufzurufen, wählen Sie die passende Methode für Ihre Umgebung: Klassische <script>-Tags stellen eine globale Funktion im Browser bereit, ECMAScript-Module verwenden export und import, und Node.js CommonJS nutzt module.exports und require. Die folgenden Beispiele zeigen, wie die Dateien zusammenarbeiten und wo die jeweiligen Ansätze ausgeführt werden.

Eine Funktion aus einer anderen JavaScript-Datei im Browser aufrufen

Bei einer Seite mit klassischen Skripten definieren Sie die Funktion in einer Datei und laden diese Datei vor dem Skript, das sie aufruft. Klassische Skripte teilen sich den globalen Gültigkeitsbereich der Seite. Daher kann die erste Datei die Funktion an window anhängen:

• Schreiben Sie in greeting.js window.showGreeting = function () { document.querySelector("#message").textContent = "Hello from greeting.js"; };.
• Schreiben Sie in app.js document.querySelector("#show").addEventListener("click", window.showGreeting);.

Speichern Sie diese Dateien neben index.html. Diese Seite lädt sie in der erforderlichen Reihenfolge und enthält sowohl die Schaltfläche als auch das Nachrichtenelement:

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Call a function from another file</title>
  <p id="message">Click the button to show the message.</p>
  <button id="show" type="button">Show greeting</button>
  <script src="greeting.js"></script>
  <script src="app.js"></script>
</html>

Beim Klick auf die Schaltfläche ruft der Handler in app.js die aus greeting.js geladene Funktion auf. Laden Sie das Skript mit der Funktionsdefinition zuerst. Andernfalls versucht die Seite möglicherweise, den Handler zu registrieren, bevor window.showGreeting vorhanden ist. Der html-Block zeigt eine Browserseite und ist kein Protokoll einer Programmausgabe.

Funktionen mit ECMAScript-Modulen teilen

Verwenden Sie ECMAScript-Module, wenn Sie explizite Importe statt eines gemeinsam genutzten globalen Gültigkeitsbereichs bevorzugen. Speichern Sie diese drei vollständigen Dateien im selben Verzeichnis. Die erste Datei exportiert eine Funktion, die zweite importiert sie und aktualisiert die Seite:

• greeting.js: export function makeGreeting(name) { return \Hello, ${name}!`; }`
• app.js: import { makeGreeting } from "./greeting.js"; document.querySelector("#message").textContent = makeGreeting("Ada");

Speichern Sie diese vollständige Seite als index.html neben den beiden Dateien. Das Nachrichtenelement ist vorhanden, bevor das Modul ausgeführt wird:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Share a function with a module</title>
  </head>
  <body>
    <p id="message">The greeting will appear here.</p>
    <script type="module" src="app.js"></script>
  </body>
</html>

Achten Sie darauf, dass der relative Importpfad zu den Dateipfaden passt. Browser laden Module mit Modulsemantik und stellen ihre Deklarationen nicht auf window bereit.

Stellen Sie die Seite über HTTP mit einem lokalen Entwicklungsserver bereit. Wird sie direkt als file:-URL geöffnet, verhindert das häufig das Laden der Module. Das ist eine Anforderung an das Hosting im Browser, keine Voraussetzung für die Ausführung mit Node.js. Node.js unterstützt ebenfalls ECMAScript-Module, allerdings mit eigenen Regeln für Pakete und Dateiendungen. Die Syntax zum Exportieren aus ECMAScript-Modulen verwendet denselben export-Mechanismus für Funktionen und andere Werte. Für diesen Artikel war kein deutsches Linkziel verfügbar.

Funktionen mit CommonJS in Node.js importieren

CommonJS ist das traditionelle Modulsystem von Node.js. Ein Modul kann eine Funktion module.exports zuweisen; eine andere Datei kann sie mit require abrufen. Der verlinkte Vergleich von JavaScript import und require erläutert die Unterschiede zwischen diesen Modulsystemen.

Dieses eigenständige Node.js-Beispiel erstellt eine Hilfsdatei, importiert ihre Funktion und ruft sie auf. Speichern Sie den Code als main.cjs und führen Sie in einem Terminal mit installiertem Node.js node main.cjs aus:

const fs = require("node:fs");
const os = require("node:os");
const path = require("node:path");

const folder = fs.mkdtempSync(path.join(os.tmpdir(), "function-demo-"));
try {
  const helperPath = path.join(folder, "math.cjs");
  fs.writeFileSync(helperPath, "module.exports = (a, b) => a + b;\n");
  const add = require(helperPath);
  console.log(`Result: ${add(5, 3)}`);
} finally {
  fs.rmSync(folder, { recursive: true, force: true });
}

Result: 8

Die Hilfsdatei exportiert eine Funktion, und der aufrufende Code erhält sie als Rückgabewert von require; der abschließende Aufruf von console.log verwendet diese Funktion. Durch die Dateiendung .cjs ist das CommonJS-Format der Hilfsdatei eindeutig, auch wenn das umgebende Projekt ECMAScript-Module verwendet. Dieses Beispiel ist für Node.js gedacht und läuft nicht in einer Browserseite. Der Ausgabeblock bleibt unverändert; darin enthaltene englische Texte werden deshalb auch im Beispiel auf Englisch angezeigt.

Eine JavaScript-Datei mit jQuery laden

Mit $.getScript() von jQuery lässt sich ein Skript bei Bedarf laden. Für Seiten, die jQuery bereits verwenden, ist das eine ältere Alternative; bei neuem Code sind Browsermodule oder gewöhnliche Skript-Tags meist verständlicher. Laden Sie jQuery vor dem aufrufenden Code und warten Sie den Lade-Callback ab, bevor Sie die Funktion aus der heruntergeladenen Datei verwenden.

Zum Beispiel kann mathUtils.js mit window.mathUtils = { add: (a, b) => a + b }; ein globales Objekt im Browser bereitstellen. Laden Sie jQuery auf der Seite zuerst und verwenden Sie den Callback, um die Funktion nach dem Laden des Skripts aufzurufen:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $.getScript("mathUtils.js")
    .done(function () {
      const result = window.mathUtils.add(5, 3);
      $("body").append(`<p>Result: ${result}</p>`);
    })
    .fail(function () {
      $("body").append("<p>The script could not be loaded.</p>");
    });
</script>

Die Anfrage läuft asynchron. Code, der mathUtils benötigt, gehört daher in .done() oder einen anderen Abschluss-Handler und nicht direkt hinter $.getScript(). Bei einer URL von einer anderen Herkunft kann jQuery das Skript über ein Skriptelement laden; für diese Art des Ladens verlangen Browser in der Regel kein CORS. Eine herkunftsübergreifende fetch()- oder XHR-Anfrage setzt dagegen voraus, dass der Server sie mit CORS erlaubt. Browserrichtlinien wie die Content Security Policy können das Laden eines Skripts dennoch blockieren; ebenso kann es fehlschlagen, wenn die URL nicht erreichbar ist. Weitere Informationen zum Ladeverhalten finden Sie in der Dokumentation zu jQuery $.getScript().