Il n'y a pas d'import / include / require en javascript, mais il existe deux façons principales d'obtenir ce que vous voulez:
1 - Vous pouvez le charger avec un appel AJAX puis utiliser eval.
C'est le moyen le plus simple, mais il est limité à votre domaine en raison des paramètres de sécurité Javascript, et utiliser eval ouvre la porte aux bogues et aux hacks.
2 - Ajoutez une balise de script avec l'URL du script dans le HTML.
Certainement la meilleure voie à suivre. Vous pouvez charger le script même à partir d'un serveur étranger, et il est propre lorsque vous utilisez l'analyseur du navigateur pour évaluer le code. Vous pouvez mettre la balise dans la tête de la page Web, ou en bas du corps.
Ces deux solutions sont discutées et illustrées ici.
Maintenant, il y a un gros problème que vous devez connaître. Cela implique que vous chargez le code à distance. Les navigateurs Web modernes chargeront le fichier et continueront à exécuter votre script actuel car ils chargent tout de manière asynchrone pour améliorer les performances.
Cela signifie que si vous utilisez ces astuces directement, vous ne pourrez pas utiliser votre code nouvellement chargé à la ligne suivante après avoir demandé son chargement, car il sera toujours en cours de chargement.
EG: my_lovely_script.js contient 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
Ensuite, vous rechargez la page en appuyant sur F5. Et il fonctionne! Déroutant...
Alors que faire à ce sujet?
Eh bien, vous pouvez utiliser le hack suggéré par l'auteur dans le lien que je vous ai donné. En résumé, pour les personnes pressées, il utilise en event pour exécuter une fonction de rappel lorsque le script est chargé. Ainsi, vous pouvez mettre tout le code à l'aide de la bibliothèque distante dans la fonction de rappel. PAR EXEMPLE :
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);
}
Ensuite, vous écrivez le code que vous souhaitez utiliser APRÈS le chargement du script dans une fonction lambda:
var myPrettyCode = function() {
// here, do what ever you want
};
Ensuite, vous exécutez tout cela:
loadScript("my_lovely_script.js", myPrettyCode);
OK j'ai compris. Mais c'est pénible d'écrire tout ça.
Eh bien, dans ce cas, vous pouvez utiliser comme toujours le fantastique framework jQuery gratuit, qui vous permet de faire exactement la même chose en une seule ligne:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});