Gibt es in JavaScript etwas Ähnliches wie @import
in CSS, mit dem Sie eine JavaScript-Datei in eine andere JavaScript-Datei einfügen können?
Die alten Versionen von JavaScript hatten kein import, include oder require, so dass viele verschiedene Ansätze für dieses Problem entwickelt wurden. Seit 2015 (ES6) verfügt JavaScript jedoch über den Standard ES6-Module zum Importieren von Modulen in Node.js, der auch von den meisten modernen Browsern unterstützt wird. Für die Kompatibilität mit älteren Browsern können die Tools build und/oder transpilation verwendet werden.
ECMAScript (ES6)-Module werden in Node.js seit Version 8.5 mit dem --experimental-modules
Flag unterstützt. Alle beteiligten Dateien müssen die Endung .mjs
haben.
// module.mjs
export function hello() {
return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello(); // val is "Hello";
Browser haben Unterstützung für das direkte Laden von ECMAScript-Modulen (keine Tools wie Webpack erforderlich) seit Safari 10.1, Chrome 61, Firefox 60 und Edge 16. Prüfen Sie die aktuelle Unterstützung unter caniuse.
<script type="module">
import { hello } from './hello.mjs';
hello('world');
</script>
// hello.mjs
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Lesen Sie mehr unter https://jakearchibald.com/2017/es-modules-in-browsers/
Mit dynamischen Importen kann das Skript bei Bedarf andere Skripte laden:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Lesen Sie mehr unter https://developers.google.com/web/updates/2017/11/dynamic-import
Die alte, in Node.js immer noch weit verbreitete Methode, Module zu importieren, ist das 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"
Es gibt andere Möglichkeiten für JavaScript, externe JavaScript-Inhalte in Browsern einzubinden, die keine Vorverarbeitung erfordern.
Sie könnten ein zusätzliches Skript mit einem AJAX-Aufruf laden und dann eval
verwenden, um es auszuführen. Dies ist der einfachste Weg, ist aber aufgrund des JavaScript-Sandbox-Sicherheitsmodells auf Ihre Domäne beschränkt. Die Verwendung von "eval" öffnet auch die Tür für Bugs, Hacks und Sicherheitsprobleme.
Wie bei den dynamischen Importen können Sie ein oder mehrere Skripte mit einem "Fetch"-Aufruf laden und dabei Versprechen verwenden, um die Ausführungsreihenfolge für Skriptabhängigkeiten zu kontrollieren, indem Sie die Bibliothek Fetch Inject verwenden:
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
Die jQuery-Bibliothek bietet Ladefunktionen in einer Zeile:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Sie können ein Skript-Tag mit der Skript-URL in den HTML-Code einfügen. Um den Overhead von jQuery zu vermeiden, ist dies eine ideale Lösung.
Das Skript kann sogar auf einem anderen Server liegen. Außerdem wertet der Browser den Code aus. Der <script>
-Tag kann entweder in den <head>
der Webseite eingefügt werden, oder direkt vor dem schließenden </body>
-Tag.
Hier ist ein Beispiel, wie dies funktionieren könnte:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
Diese Funktion fügt ein neues <script>
-Tag am Ende des head-Abschnitts der Seite ein, wobei das Attribut src
auf die URL gesetzt wird, die der Funktion als erster Parameter übergeben wird.
Beide Lösungen werden in JavaScript Madness: Dynamic Script Loading diskutiert und illustriert.
Nun gibt es ein großes Problem, das Sie kennen müssen. Das bedeutet, dass Sie den Code aus der Ferne laden. Moderne Webbrowser laden die Datei und führen Ihr aktuelles Skript weiter aus, weil sie alles asynchron laden, um die Leistung zu verbessern. (Dies gilt sowohl für die jQuery-Methode als auch für das manuelle dynamische Laden von Skripten).
Das heißt, wenn Sie diese Tricks direkt anwenden, *können Sie den neu geladenen Code in der nächsten Zeile nicht mehr verwenden, da er immer noch geladen wird.
Zum Beispiel: my_lovely_script.js
enthält MySuperObject
:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Dann laden Sie die Seite neu, indem Sie F5 drücken. Und es funktioniert! Verwirrend... Was kann man also tun? Nun, Sie können den Hack verwenden, den der Autor in dem Link vorschlägt, den ich Ihnen gegeben habe. Kurz gesagt, für Leute, die es eilig haben, verwendet er ein Ereignis, um eine Callback-Funktion auszuführen, wenn das Skript geladen wird. So können Sie den gesamten Code, der die Remote-Bibliothek verwendet, in die Callback-Funktion einfügen. Zum Beispiel:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Dann schreiben Sie den Code, den Sie NACH dem Laden des Skripts verwenden wollen, in eine Lambda-Funktion:
var myPrettyCode = function() {
// Here, do whatever you want
};
Dann führen Sie das alles aus:
loadScript("my_lovely_script.js", myPrettyCode);
Beachten Sie, dass das Skript nach dem Laden des DOM oder vorher ausgeführt werden kann, je nach Browser und ob Sie die Zeile script.async = false;
eingefügt haben. Es gibt einen [großartigen Artikel über das Laden von Javascript im Allgemeinen] (http://www.html5rocks.com/en/tutorials/speed/script-loading/), in dem dies diskutiert wird.
Wie bereits am Anfang dieser Antwort erwähnt, verwenden viele Entwickler Build/Transpilierungs-Tools wie Parcel, Webpack oder Babel in ihren Projekten, die es ihnen ermöglichen, eine neue JavaScript-Syntax zu verwenden, Abwärtskompatibilität für ältere Browser zu gewährleisten, Dateien zu kombinieren, zu minifizieren, Code aufzuteilen usw.
Es ist möglich, ein JavaScript-Tag dynamisch zu generieren und es an ein HTML-Dokument aus einem anderen JavaScript-Code heraus anzuhängen. Dadurch wird eine gezielte JavaScript-Datei geladen.
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");
Vielleicht können Sie diese Funktion verwenden, die ich auf dieser Seite gefunden habe How do I include a JavaScript file in a JavaScript file?:
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}