Gibt es in JavaScript etwas Ähnliches wie @import in CSS, mit der Sie eine JavaScript-Datei in eine andere JavaScript-Datei einfügen können?
Antworten
Zu viele Anzeigen?
Dmitry Sheiko
Punkte
2030
In einer modernen Sprache mit der Prüfung, ob das Skript bereits geladen wurde, wäre dies der Fall:
function loadJs( url ){
return new Promise(( resolve, reject ) => {
if (document.querySelector( `head > script[ src = "${url}" ]`) !== null ){
console.warn( `script already loaded: ${url}` );
resolve();
}
const script = document.createElement( "script" );
script.src = url;
script.onload = resolve;
script.onerror = function( reason ){
// This can be useful for your error-handling code
reason.message = `error trying to load script ${url}`;
reject( reason );
};
document.head.appendChild( script );
});
}Verwendung (async/await):
try { await loadJs("https://.../script.js"); }
catch(error) { console.log(error); }または
await loadJs( "https://.../script.js" ).catch( err => {} );Verwendung (Versprechen):
loadJs( "https://.../script.js" ).then( res => {} ).catch( err => {} );
Turnerj
Punkte
4143
Falls Sie Folgendes verwenden Web-Arbeiter und zusätzliche Skripte in den Geltungsbereich des Workers aufnehmen möchten, sollten die anderen Antworten über das Hinzufügen von Skripten zum head Tag usw. wird für Sie nicht funktionieren.
Zum Glück, Web Worker haben ihre eigenen importScripts Funktion die eine globale Funktion im Bereich des Web Workers ist, die dem Browser selbst eigen ist, da sie ist Teil der Spezifikation .
Alternativ dazu, als zweithöchste Antwort auf Ihre Frage Highlights , RequireJS kann auch das Einbinden von Skripten innerhalb eines Web Workers handhaben (wahrscheinlich durch den Aufruf von importScripts selbst, aber mit einigen anderen nützlichen Funktionen).
KthProg
Punkte
1890
Obwohl diese Antworten sehr gut sind, gibt es eine einfache "Lösung", die es schon gibt, seit Skripte geladen werden, und die 99,999 % der Anwendungsfälle der meisten Menschen abdeckt. Fügen Sie einfach das Skript, das Sie benötigen, vor dem Skript ein, das es benötigt. Bei den meisten Projekten dauert es nicht lange, um festzustellen, welche Skripte in welcher Reihenfolge benötigt werden.
<!DOCTYPE HTML>
<html>
<head>
<script src="script1.js"></script>
<script src="script2.js"></script>
</head>
<body></body>
</html>Wenn Skript2 Skript1 voraussetzt, ist dies wirklich der einfachste Weg, so etwas zu tun. Ich bin sehr überrascht, dass niemand dies angesprochen hat, da es die offensichtlichste und einfachste Antwort ist, die in fast jedem einzelnen Fall anwendbar ist.
Sam4Code
Punkte
521
Alexis Dumas
Punkte
1260
Meine übliche Methode ist:
var require = function (src, cb) {
cb = cb || function () {};
var newScriptTag = document.createElement('script'),
firstScriptTag = document.getElementsByTagName('script')[0];
newScriptTag.src = src;
newScriptTag.async = true;
newScriptTag.onload = newScriptTag.onreadystatechange = function () {
(!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') && (cb());
};
firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag);
}Es funktioniert großartig und benötigt bei mir keine Seitenreloads. Ich habe versucht, die AJAX-Methode (eine der anderen Antworten), aber es scheint nicht zu funktionieren, wie schön für mich.
Hier ist eine Erklärung, wie der Code funktioniert für diejenigen, die neugierig sind: im Wesentlichen, es schafft ein neues Skript-Tag (nach dem ersten) der URL. Es wird in den asynchronen Modus versetzt, so dass es den Rest des Codes nicht blockiert, sondern einen Callback aufruft, wenn der readyState (der Zustand des zu ladenden Inhalts) auf "loaded" wechselt.
3 Stimmen
MDN-Dokumente über JavaScript-Module con entsprechende Beispiele auf github
0 Stimmen
Meine Antwort hier stackoverflow.com/a/72335692/9868445 wurde anonym und ohne Angabe von Gründen heruntergestuft, aber ich empfehle trotzdem einen Blick darauf zu werfen.