Es gibt keinen Import / Include / Require in Javascript, aber es gibt zwei Möglichkeiten, um das zu erreichen, was Sie wollen:
1 - Sie können es mit einem AJAX-Aufruf laden und dann eval verwenden.
Dies ist der einfachste Weg, aber aufgrund der Javascript-Sicherheitseinstellungen auf Ihre Domain beschränkt. Die Verwendung von eval öffnet die Tür für Fehler und Hacks.
2 - Fügen Sie ein Skript-Tag mit der Skript-URL im HTML hinzu.
Auf jeden Fall der beste Weg. Sie können das Skript sogar von einem fremden Server laden, und es ist sauber, wenn Sie den Browser-Parser zum Auswerten des Codes verwenden. Sie können das Tag im Kopf der Webseite oder am unteren Rand des Körpers platzieren.
Beide Lösungen werden hier diskutiert und veranschaulicht.
Nun gibt es ein großes Problem, über das Sie Bescheid wissen müssen. Dies bedeutet, dass Sie den Code remote laden. Moderne Webbrowser laden die Datei und führen Ihr aktuelles Skript weiter aus, da sie alles asynchron laden, um die Leistung zu verbessern.
Wenn Sie diese Tricks direkt verwenden, können Sie Ihren neu geladenen Code in der nächsten Zeile, nachdem Sie ihn zum Laden aufgefordert haben, nicht verwenden, da er noch geladen wird.
EG: 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 und treffen F5. Und es funktioniert! Verwirrend...
Was tun?
Nun, Sie können den Hack verwenden, den der Autor in dem Link vorschlägt, den ich Ihnen gegeben habe. Zusammenfassend lässt sich sagen, dass Personen, die es eilig haben, mit en event eine Rückruffunktion ausführen, wenn das Skript geladen wird. So können Sie den gesamten Code mithilfe der Remote-Bibliothek in die Rückruffunktion einfügen. Z.B :
function loadScript(url, callback)
{
// adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
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 verwenden möchten, nachdem das Skript in eine Lambda-Funktion geladen wurde:
var myPrettyCode = function() {
// here, do what ever you want
};
Dann führen Sie das alles aus:
loadScript("my_lovely_script.js", myPrettyCode);
OK ich habe es. Aber es ist ein Schmerz, all dieses Zeug zu schreiben.
In diesem Fall können Sie wie immer das fantastische kostenlose jQuery-Framework verwenden, mit dem Sie in einer Zeile genau dasselbe tun können:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});