Tentant d’être moderne avec JavaScript et tous les autres langages et modes de développement, je regarde comment utiliser les importations de modules pour JavaScript, et ce spécifiquement dans le contexte d’une page HTML. Il y a d’autres contextes d’utilisation, mais je veux me concentrer sur « le plus simple » pour le moment.
Je questionne Internet et j’ai quelques réponses mais il m’aura fallu quelques heures de « gossage » (au Québec, gossage signifie à peu près ‘bidouillage’) pour que ça fonctionne comme je veux.
Les modules sont chargés après que le HTML de la page est traité. Donc ce qui suit ne fonctionne pas (du moins pas sur mon ordi).
Le ficher module charSet.js existe bien et il est bien à l’endroit spécifié ../js/charSet.js.
Le contenu du fichier expose bien une classe statique myCharSet avec la propriété S_CharUnaccented.
Cependant le module reste invisible au code JavaScript inséré dans le HTML (<p>charUnaccented = <script>document.write(myCharSet…</script></p>) puisqu’il est chargé après le traitement du HTML. Donc myCharSet est indéfini.
Pour que ça fonctionne il m’a fallu changer le code d’inclusion du module comme suit :
Utiliser la fonction import (techniquement ce n’est pas une fonction, mais ne nous perdons pas dans les détails) et la méthode then() qui permet de lancer une exécution au retour d’appel asynchrone puisque import jour à l’asynchrone.
then((charSetModule) =>... : ici charSetModule peut être n’importe quel nom unique pour référencer le module importé. Ce module est passé en paramètre à la fonction testResults(m).
Dans la fonction testResult(m), le paramètre m permet de manipuler le module dans la fonction : ainsi m nous permet d’accéder à la classe statique myCharSet exposée par la déclaration export dans le fichier charSet.js :
Plus haut, on a aperçu que dans la fonction testResults(m) il y avait un appel à console.log(m) pour afficher le contenu de m (ne faites pas attention, le ménage du code n’est pas fait) :
Maintenant que ça fonctionne comme je veux, j’ai à réfléchir comment organise mon code et surtout comment nommer classes, variables et références pour que le tout soit intelligible et relativement intuitif à utiliser par la suite.
Comme on est le 20 juillet 2024, je souhaite bon courage à toute personne impliquée à réparer/redémarrer les systèmes affligés du problème « Crowdstrike » https://www.crowdstrike.com/en-us/ .
À bientôt
PS : les jolies images de code sauf la dernière (capture d’écran) ont été créées avec Carbon Desktop App https://github.com/beyondcode/carbon-desktop-app de Marcel Pociot que l’on peut télécharger pour Windows/Mac/Linux https://github.com/beyondcode/carbon-desktop-app/releases/tag/1.0.0 .