Inconvénient du templating
Le gros problème du templating, c'est que l'on viens modifier le innerHTML directement, et ça ce n'est pas génial.
Ben on peut utiliser insertAdjacentHTML tout le temps et éviter innerHTML s'il le faut?Même si je préfère la méthode insertAdjacentHTML au innertHTML, de la même façon cette méthode va modifier le innerHTML en interne, donc le problème reste le même.
Hum, d'accord, mais c'est quoi ce problème? Je ne comprend pas.Et bien quand on modifie le innerHTML d'un élément présent dans le DOM, on force le rechargement complet de la page, ce qui est couteux en performance pour le navigateur. Contrairement au appendChild qui ne va forcer le navigateur qu'à calculer l'affichage du nouvel élément sans retoucher au reste de la page.
Ah... Donc il ne faut pas l'utiliser dans ce cas...Je ne serais pas aussi formel, les avantages du templating restent intéressant, et le rechargement de la page une fois de temps en temps reste relativement rapide, et invisible pour l'utilisateur. Là où je veux en venir, c'est qu'il faut impérativement éviter d'abuser de cette méthode.
Ok, donc de temps en temps oui, mais pas trop souvent.Toujours pas, en fait l'erreur commise régulièrement, c'est lors de l'affichage d'une liste d'élément avec du templating et la modification du innerHTML, supposons que l'on ait plusieurs cartes à afficher, et toutes les données sont dans un tableau listCard, on pourrait vouloir faire ça :
{"language":"text/javascript","content":"for(let card of listCard){\n\tlet chaine = `<div class=\"card\">\n\t\t\t\t\t <span class=\"title\">${card.title}</span>\n\t\t\t\t\t <img class=\"picture\" alt=\"${card.img.alt}\" src=\"${card.img.src}\">\n\t\t\t\t\t <span class=\"description\">${card.description}\"</span>\n\t\t\t\t\t <date class=\"date\">${card.date}\"</date>\n\t\t\t\t </div>`;\n\n\tdocument.querySelector(\"body\").innerHTML += chaine;\n}","filename":""}
Oui ça me parait logique.Le problème est que la modification de innerHTML est à l'intérieur de la boucle, donc on va modifier le innerHTML à chaque tour de la boucle et pour chaque card, et donc recharger la page à chaque fois. Si on a 3 cards, ça va rester très rapide, mais si on en a 10, ou 50 ou 100 à afficher, on va recharger l'affichage de la page autant de fois, et là ça deviens vraiment problématique.
Ah oui je n'avais pas pensé à ça...Limitons les dégâts au maximum
Dans ce cas, il n'y a pas de méthode magique, juste un peu de réflexion à avoir de la part du développeur, en n'utilisant innerHTML qu'une seule fois.
Mais comment faire ça?Tout simplement en ajoutant toutes les cards sous forme HTML une par une dans une chaine de caractères, avant de passer cette chaine entière au innerHTML une seule et unique fois !
{"language":"text/javascript","content":"// Je crée une chaine vide qui va contenir toutes les card\nlet listCardDom = \"\";\n\nfor(let card of listCard){\n\t// j'ajoute les card une par une à ma chaine\n\tlistCardDom += `<div class=\"card\">\n\t\t\t\t\t <span class=\"title\">${card.title}</span>\n\t\t\t\t\t <img class=\"picture\" alt=\"${card.img.alt}\" src=\"${card.img.src}\">\n\t\t\t\t\t <span class=\"description\">${card.description}\"</span>\n\t\t\t\t\t <date class=\"date\">${card.date}\"</date>\n\t\t\t\t </div>`;\n}\n\n//j'ajoute cette chaine après la boucle, pour que ça ne soit modifié qu'une seule fois avec tout le contenu\ndocument.querySelector(\"body\").innerHTML = listCardDom;","filename":""}
En fait c'est tout bête... Mais logiqueRécapitulatif
Pour reprendre tout ce que l'on a vu, il y a deux façons de créer de nouveaux éléments à ajouter dans le DOM.
createElement
La méthode createElement est bien plus performante, mais nettement moins pratique à utiliser, on s'en servira donc quand on construit une application qui a besoin d'avoir de très bonnes performances, ou dans des cas particulier d'outils qui se servent énormément de la création d'élément comme les éditeurs, car dans ce cas le code peut être plus générique bien plus facilement
Templating
Et le templating de façon plus général pour afficher de la données de façon pratique, en gardant bien à l'esprit qu'il faut faire attention à la façon dont on l'utilise pour ne pas trop impacter les performances.
C'est noté! Merci pour tes conseils. J'ai terminé cette partie