W javascript nie ma importu / dołączania / wymagania, ale są dwa główne sposoby osiągnięcia tego, co chcesz:
1 - Możesz załadować go za pomocą wywołania AJAX, a następnie użyć eval.
Jest to najprostszy sposób, ale jest ograniczony do Twojej domeny ze względu na ustawienia bezpieczeństwa Javascript, a używanie eval otwiera drzwi do błędów i hacków.
2 - Dodaj tag script z adresem URL skryptu w kodzie HTML.
Zdecydowanie najlepszy sposób. Możesz załadować skrypt nawet z obcego serwera i jest czysty, gdy używasz parsera przeglądarki do oceny kodu. Możesz umieścić tag w nagłówku strony internetowej lub na dole jej treści.
Oba te rozwiązania są tutaj omówione i zilustrowane.
Teraz jest duży problem, o którym musisz wiedzieć. Oznacza to, że zdalnie ładujesz kod. Nowoczesne przeglądarki internetowe załadują plik i będą wykonywać bieżący skrypt, ponieważ ładują wszystko asynchronicznie, aby poprawić wydajność.
Oznacza to, że jeśli użyjesz tych sztuczek bezpośrednio, nie będziesz mógł użyć nowo załadowanego kodu w następnej linii po tym, jak poprosiłeś o załadowanie, ponieważ nadal będzie się ładował.
Np .: my_lovely_script.js zawiera 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
Następnie ponownie ładujesz stronę, naciskając klawisz F5. I to działa! Mylące...
Więc co z tym zrobić?
Cóż, możesz skorzystać z hackowania, który autor sugeruje w linku, który ci dałem. Podsumowując, dla osób w pośpiechu używa en event do uruchomienia funkcji zwrotnej, gdy skrypt jest ładowany. Możesz więc umieścić cały kod za pomocą zdalnej biblioteki w funkcji wywołania zwrotnego. EG:
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);
}
Następnie piszesz kod, którego chcesz użyć PO załadowaniu skryptu w funkcji lambda:
var myPrettyCode = function() {
// here, do what ever you want
};
Następnie uruchom to wszystko:
loadScript("my_lovely_script.js", myPrettyCode);
Ok, rozumiem. Ale pisanie tego wszystkiego jest trudne.
Cóż, w takim przypadku możesz jak zwykle skorzystać z fantastycznego darmowego frameworka jQuery, który pozwoli ci zrobić to samo w jednej linii:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});