Wie kann ich JavaScript-Dateien in meine Webprojekte einbinden?

Einbinden von JavaScript-Dateien: Über @Import hinaus

Während @import in CSS häufig zum Einbinden externer Stylesheets verwendet wird, unterstützt JavaScript a nicht nativ ähnlicher Mechanismus. Im Laufe der Zeit sind zahlreiche Methoden entstanden, um diesem Bedarf gerecht zu werden.

ES6-Module (empfohlen)

Seit 2015 umfasst JavaScript ES6-Module und bietet eine standardisierte Möglichkeit zum Importieren Module. Dieser Ansatz wird von den meisten modernen Browsern und Node.js unterstützt.

Um ES6-Module zu nutzen, erstellen Sie eine module.js-Datei mit einer Exportfunktion:

export function hello() {
  return "Hello";
}

Importieren Sie in eine andere Datei Modul und verwenden Sie seine Funktion:

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

Node.js Require

Für Node.js ist der traditionelle Modulstil das module.exports/require-System.

Erstellen Sie ein mymodule.js-Modul:

module.exports = {
   hello: function() {
      return "Hello";
   }
}

Verwenden Sie das Modul in einer anderen Datei:

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

AJAX Laden

AJAX-Anfragen können zum dynamischen Laden von JavaScript-Skripten verwendet werden. Aufgrund von Sicherheitsbeschränkungen ist diese Funktionalität jedoch auf dieselbe Domäne beschränkt. Von der Verwendung von eval zum Ausführen solcher Skripte wird aufgrund potenzieller Sicherheitsrisiken abgeraten.

Fetch-Laden

Ähnlich wie bei dynamischen Importen ermöglicht die Fetch-Inject-Bibliothek das Laden mehrerer Skripte per Fetch und Steuern der Ausführungsreihenfolge mithilfe von Versprechen.

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery Laden

jQuery bietet eine vereinfachte Methode zum Laden externer Skripte:

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Dynamisches Skriptladen

Bei dieser Technik wird ein Skript erstellt Tag mit der gewünschten URL versehen und in den HTML-Code einfügen Dokument.

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    document.head.appendChild(script);
}

Erkennen der Skriptausführung

Beim asynchronen Laden von Skripten kommt es zu einer Verzögerung, bevor die Skripte ausgeführt werden. Um zu erkennen, wann ein Skript vollständig geladen wurde, sollten Sie ereignisbasierte Rückrufe oder den im Link in der ursprünglichen Antwort vorgeschlagenen Ansatz in Betracht ziehen.

Quellcode-Zusammenführung/Vorverarbeitung

Moderne Build-Tools wie Parcel, Webpack und Babel können mehrere JavaScript-Dateien kombinieren, Transformationen anwenden und browserübergreifende Kompatibilität bieten. Dadurch können Entwickler erweiterte JavaScript-Funktionen nutzen und ihren Entwicklungsworkflow optimieren.

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