Heim >Web-Frontend >js-Tutorial >Wie kann ich eine JavaScript-Datei in eine andere einbinden?

Wie kann ich eine JavaScript-Datei in eine andere einbinden?

DDD
DDDOriginal
2024-12-21 02:28:14290Durchsuche

How Can I Include One JavaScript File in Another?

Wie füge ich eine JavaScript-Datei in eine andere ein?

Das Einfügen einer JavaScript-Datei in eine andere ist nicht so einfach wie die Verwendung von @import in CSS . Vor ES6 wurden verschiedene Ansätze verwendet, um dieses Problem anzugehen.

ES6-Module

Seit 2015 (ES6) führte JavaScript ES6-Module ein, um Module in Node.js zu importieren. Auch die meisten modernen Browser unterstützen diesen Standard. ES6-Module verwenden die folgende Syntax:

export function hello() {
  return "Hello";
}
import { hello } from './module.js';
let val = hello(); // val is "Hello";

Node.js erfordert

Node.js verwendet den älteren CJS-Modulstil, der auf dem basiert module.exports/require system:

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

Andere Browser werden geladen Methoden

Neben ES6-Modulen bieten Browser auch verschiedene andere Möglichkeiten zum Laden externer JavaScript-Inhalte:

  • AJAX-Laden:Verwenden Sie einen AJAX-Aufruf um ein zusätzliches Skript zu laden und es dann mit eval auszuführen.
  • Fetch Loading: Laden Sie Skripte mithilfe eines Abrufaufrufs und versprechen Sie, die Ausführungsreihenfolge zu steuern.
  • jQuery-Laden: Verwenden Sie die jQuery-Bibliothek, um Skripte mit einer einzigen Codezeile zu laden.
  • Dynamisches Laden von Skripten: Fügen Sie ein Skript-Tag mit der Skript-URL in den HTML-Code ein. Dadurch kann der Browser den Code auswerten.

Skriptausführung erkennen

Beim Remote-Laden von Code führen moderne Browser Skripte asynchron aus, sodass der Code dies möglicherweise nicht tut sofort nach dem Laden verfügbar. Um zu erkennen, wann das Skript ausgeführt wurde, können Sie Folgendes verwenden:

  • Ereignishandler: Binden Sie die Ereignisse onload oder onreadystatechange des Skript-Tags an eine Rückruffunktion.
  • Quellcode-Zusammenführung/Vorverarbeitung: Verwenden Sie zum Kombinieren Build-/Transpilierungstools wie Parcel, Webpack oder Babel und verarbeiten Sie JavaScript-Dateien, bevor sie in den Browser geladen werden.

Das obige ist der detaillierte Inhalt vonWie kann ich eine JavaScript-Datei in eine andere einbinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn