So rufen Sie Javascript extern auf-Front-End-Fragen und Antworten-php.cn

Im modernen Webdesign ist JavaScript zu einem unverzichtbaren Bestandteil geworden. JavaScript kann die Funktionalität von Webseiten problemlos erweitern und gleichzeitig das Benutzererlebnis verbessern. Obwohl JavaScript direkt in HTML eingebettet werden kann, ist es sehr nützlich, JavaScript als separate externe Datei zu kapseln und extern aufzurufen, wenn Sie denselben JavaScript-Code auf mehreren Webseiten wiederverwenden müssen.

In diesem Artikel wird erläutert, wie Sie JavaScript-Code extern aufrufen, einschließlich der Einbettung in HTML-Dokumente und der Verknüpfung mit Dokumenten.

JavaScript in HTML-Dokumente einbetten Das direkte Einbetten von JavaScript-Code in HTML-Dokumente ist der einfachste Weg. Sie müssen lediglich das -Tag in den Head-Bereich oder Body-Bereich des HTML schreiben und den JavaScript-Code direkt darin einbetten.

Das Folgende ist beispielsweise ein einfaches HTML-Dokument mit eingebettetem JavaScript-Code:

嵌入JavaScript代码 function sayHello() { alert("Hello World!"); } 点击我 Nach dem Login kopieren In diesem Beispiel definieren wir eine einfache Funktion namens sayHello(). Es begrüßt den Benutzer mit einer Warnaktion. Wir rufen diese Funktion mit dem onclick-Ereignis auf, das im HTML-Button-Tag definiert ist.

Während dieser Ansatz für kleine Projekte in Ordnung sein mag, kann die Einbettung Ihres gesamten JavaScript-Codes in das HTML-Dokument bei größeren Projekten dazu führen, dass der Code unübersichtlich und schwer zu pflegen ist.

JavaScript-Code als separate externe Datei speichern Um dieses Problem zu lösen, können wir den JavaScript-Code als separate externe Datei speichern. Dieser Ansatz macht den Code klarer und leichter lesbar und erleichtert die Wiederverwendung desselben Codes in verschiedenen HTML-Dokumenten. Da der Browser externe Dateien zwischenspeichert, erhöht sich gleichzeitig auch die Ladegeschwindigkeit.

Hier ist ein einfaches Beispiel: Wir speichern den JavaScript-Code in einer Datei namens myscript.js.

function sayHello() { alert("Hello World!"); } Nach dem Login kopieren Wir speichern den obigen Code als myscript.js und verlinken ihn dann in unser HTML-Dokument.

调用外部JavaScript文件 点击我 Nach dem Login kopieren Durch die Verwendung des -Tags und des src-Attributs können wir die Datei myscript.js in das HTML-Dokument verlinken. Auf diese Weise können wir alle in der JavaScript-Datei definierten Funktionen und Variablen im HTML-Dokument aufrufen.

Es ist zu beachten, dass Sie bei der Verwendung externer JavaScript-Dateien sicherstellen müssen, dass die JavaScript-Dateien korrekt geladen werden können. Wenn der Dateipfad falsch ist, kann der Browser die Datei nicht finden und der Code in der JavaScript-Datei wird nicht ausgeführt.

Ein weiterer Vorteil der Einbindung externer JavaScript-Dateien in HTML-Dokumente besteht darin, dass die Website dadurch einfacher zu verwalten und zu warten ist. Wenn der JavaScript-Code aktualisiert werden muss, ändern Sie einfach den Code in der JavaScript-Datei und alle HTML-Dokumente, die die Datei verwenden, können automatisch aktualisiert werden.

Mehrere Funktionen und Variablen in einer JavaScript-Datei definieren Im Allgemeinen kann eine JavaScript-Datei eine Reihe logisch verwandter Funktionen und Variablen enthalten. Dies kann Ihnen helfen, Ihren Code besser zu organisieren und ihn in mehr Anwendungsszenarien nutzbar zu machen.

Hier ist zum Beispiel eine Datei namens myfunctions.js, die mehrere Funktionen enthält:

function addNumber(a, b) { return a + b; }

function subtractNumber(a, b) { return a - b; }

function divideNumber(a, b) { return a / b; } Nach dem Login kopieren Wir führen diese JavaScript-Datei in unser HTML-Dokument ein:

在JavaScript文件中定义多个函数和变量 10 + 5 = document.write(addNumber(10, 5));

10 - 5 = document.write(subtractNumber(10, 5));

10 / 5 = document.write(divideNumber(10, 5));

Nach dem Login kopieren Dieses Beispiel zeigt, wie man mehrere Funktionen in mehreren HTML-Dokumenten verwendet. Mehrere definierte Funktionen verwenden in myfunctions.js. Wir können diese Funktionen aufrufen, indem wir Funktionen in einem Skriptblock aufrufen.

Asynchrones Laden von JavaScript verwenden Wenn wir eine JavaScript-Datei in ein HTML-Dokument einfügen, beginnt der Browser sofort mit dem Laden der Datei und blockiert das Rendern der Seite, bis die Datei vollständig geladen ist. Dies kann dazu führen, dass Seiten langsamer geladen werden.

Um dieses Problem zu vermeiden, können wir das asynchrone Laden von JavaScript verwenden. Konkret können wir den Download von JavaScript unten auf der HTML-Seite platzieren und das async-Attribut im Skript-Tag auf true setzen. Dies führt dazu, dass der Browser den Download der JavaScript-Datei ignoriert, bis die Seite vollständig geladen ist und mit dem Herunterladen des Codes beginnt.

Zum Beispiel unten ist ein HTML-Dokument, das eine JavaScript-Datei asynchron lädt:

异步加载JavaScript 使用异步加载JavaScript进行页面优化 这里是页面的正文内容。

Nach dem Login kopieren Wir laden die JavaScript-Datei myscript.js in das HTML-Dokument. Wenn Sie das Attribut „async“ auf „true“ setzen, lädt der Browser den Skriptcode asynchron und verhindert nicht, dass die Seite gerendert wird.

Zusammenfassung

In diesem Artikel haben wir besprochen, wie man JavaScript-Code in HTML-Dokumente einbettet und JavaScript-Code extern aufruft. Wir haben auch besprochen, wie man JavaScript-Code als separate externe Datei speichert, mehrere Funktionen und Variablen in einer JavaScript-Datei definiert und das asynchrone Laden von JavaScript-Code zur Seitenoptimierung verwendet.

Ob Sie Anfänger oder Profi sind, das Verständnis dieses Wissens wird Ihnen helfen, JavaScript-Code besser zu organisieren und zu verwalten und die Leistung und Wartbarkeit Ihrer Website zu verbessern.