Include / require / import en javascript 24

Sam — Thu, 03 Jan 2013 15:04:33 +0000

On ne peut pas inclure un script dans un script en JS dans un navigateur Web. Il n’y a pas de mot clé import, include ou require.

On peut néanmoins trouver un moyen d’inclure du code en le téléchargeant et en l’incluant dans la page.

Solution 1, la bourrine

On peut faire une requête GET et un eval sur. C’est dangereux. C’est bancal. Ca marche que pour le domaine en cours. C’est pas une bonne idée. Je ne vous le montre donc pas.

Solution 2, la maline

On va créer une balise et la faire pointer sur le fichier à télécharger. Ainsi on utilise le mécanisme naturel pour le navigateur d’include du code.

var include = function(url, callback){
 
    /* on crée une balise<script type="text/javascript">script> */
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    /* On fait pointer la balise sur le script qu'on veut charger
       avec en prime un timestamp pour éviter les problèmes de cache
    */
 
    script.src = url + '?' + (new Date().getTime());
 
    /* On dit d'exécuter cette fonction une fois que le script est chargé */
    if (callback) {
        script.onreadystatechange = callback;
        script.onload = script.onreadystatechange;
    }
 
    /* On rajoute la balise script dans le head, ce qui démarre le téléchargement */
    document.getElementsByTagName('head')[0].appendChild(script);
}

Ca s’utilise comme ça:

include('http://adressedemonscript.com/fichier.js', function() {
    code à exécuter une fois que le script est chargé
})

La partie callback est très importante. En effet, si vous essayez d’exécuter du code après include() qui dépend du code chargé par include(), ça va foirer : le code n’est pas encore téléchargé. En effet, les navigateurs téléchargent les balises scripts en arrière plan et en parallèle :

include('http://adressedemonscript.com/fichier.js');
code à exécyter une fois que le script est chargé

Il faut donc mettre ce code dans un callback, pour garantir qu’il soit lancé quand le script a terminé de chargé.

Solution 3, la coquine

jQuery, encore et toujours, possède un raccourcis pour faire tout ça pour vous:

$('http://adressedemonscript.com/fichier.js', function() {
    code à exécuter une fois que le script est chargé
})

Sam & Max » include

Include / require / import en javascript 24

Solution 1, la bourrine

Solution 2, la maline

Solution 3, la coquine