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?
Venu immadi
Punkte
1585
Dan Dascalescu
Punkte
125523
Hier ist die verallgemeinerte Version der Vorgehensweise von Facebook für den allgegenwärtigen Like-Button:
<script>
var firstScript = document.getElementsByTagName('script')[0],
js = document.createElement('script');
js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
js.onload = function () {
// do stuff with your dynamically loaded script
snowStorm.snowColor = '#99ccff';
};
firstScript.parentNode.insertBefore(js, firstScript);
</script>Wenn es bei Facebook funktioniert, wird es auch bei Ihnen funktionieren.
Der Grund, warum wir nach dem ersten script Element anstelle von head o body ist, weil einige Browser keinen erstellen, wenn er fehlt, aber wir haben garantiert einen script Element - dieses. Mehr lesen unter http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .
Dmitry Sheiko
Punkte
2030
Die meisten der hier gezeigten Lösungen setzen eine dynamische Belastung voraus. Ich habe stattdessen nach einem Compiler gesucht, der alle abhängigen Dateien in einer einzigen Ausgabedatei zusammenfasst. Das gleiche wie Weniger / Sass Präprozessoren befassen sich mit dem CSS @import at-rule. Da ich nichts Anständiges dieser Art gefunden habe, habe ich ein einfaches Tool geschrieben, das dieses Problem löst.
Hier ist also der Compiler, https://github.com/dsheiko/jsic , das ersetzt $import("file-path") mit dem angeforderten Dateiinhalt sicher. Hier ist die entsprechende Grunzen Plugin: https://github.com/dsheiko/grunt-jsic .
Auf dem jQuery-Master-Zweig werden einfach atomare Quelldateien zu einer einzigen Datei zusammengefügt, die mit intro.js und endet mit outtro.js . Das passt mir nicht, da es keine Flexibilität bei der Gestaltung des Quellcodes bietet. Sehen Sie sich an, wie es mit jsic funktioniert:
src/main.js
var foo = $import("./Form/Input/Tel");src/Form/Eingabe/Tel.js
function() {
return {
prop: "",
method: function(){}
}
}Jetzt können wir den Compiler starten:
node jsic.js src/main.js build/mail.jsUnd erhalten Sie die kombinierte Datei
build/main.js
var foo = function() {
return {
prop: "",
method: function(){}
}
};
Adem İlhan
Punkte
1410
Wenn Sie die Absicht haben, die JavaScript-Datei zu laden, ist unter Verwendung der Funktionen aus der importierten/eingeschlossenen Datei können Sie auch ein globales Objekt definieren und die Funktionen als Objektelemente festlegen. Zum Beispiel:
global.js
A = {};file1.js
A.func1 = function() {
console.log("func1");
}file2.js
A.func2 = function() {
console.log("func2");
}main.js
A.func1();
A.func2();Sie müssen nur vorsichtig sein, wenn Sie Skripte in eine HTML-Datei einfügen. Die Reihenfolge sollte wie unten angegeben sein:
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
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.