Est-il préférable d'ajouter des éléments dans le dom depuis le html, ou de les créer par javascript ? Pourquoi ? (performances ou autres) Quelles règles à respecter à ce niveau ?
On va partir de l'hypothèse qu'on parle d'une application comme la tienne qui tourne entièrement sur le navigateur ou au moins qui délègue entièrement son rendu au navigateur.
Dans ce cas là, la modification du DOM via JavaScript répond essentiellement à des besoins "dynamiques", par exemple, si je veux créer un ensemble de sprites qui correspondent à l'ensemble des objets que j'ai défini en interne dans mon programme JavaScript. Le bon sens veut en effet qu'on automatise le plus de choses pour éviter de se répéter un peu partout dans son programme et dans ce cas là, la page html de base ne devra pas contenir grand chose.
C'est la tendance actuelle pour les "Web Single App" : on définit grosso modo une structure générale statique en HTML et on laisse ensuite le programme gérer le DOM de façon dynamique.
Dans ton cas, tout l'"univers" de ton jeu devrait idéalement être généré par JavaScript, surtout que comme ça, on a pas à faire constamment l'aller/retour entre le code et la page pour avoir une idée de comment tout ça s'articule.
Lorsque l'on utilise fréquemment une référence à un élément du DOM, est-il préférable de faire un appel à la fonction javascript lors de chaque appel, ou de créer une variable globale avec cette référence ?
L'utilisation de variable pour stocker des résultats d'appels de fonction répond principalement à deux besoins :
1/ avoir un cache pour le résultat d'appel de fonction (optimisation)
2/ éviter de se répéter dans le code (maintenabilité)
Dans la plupart des cas, la maintenabilité d'un code est pour moi plus important que son optimisation, et en tout cas, on ne devrait pas se soucier trop tôt de l'optimisation de son programme. Comme dirait Donald Knuth, "Premature optimization is the root of all evil (or at least most of it) in programming."
Dans ton cas, récupérer un élément par son id est quelque chose d'ultra optimisé, surtout par les navigateurs actuels, cela dit, ça reste un appel de fonction.
Dans une boucle de 1 000 000 itérations, utiliser getElementById avoir le même id ne serait probablement pas très malin.
Cependant, dans la grosse majorité des cas, c'est l'élégance du code, la concision et le soucis de ne pas se répéter qui devrait primer, et c'est parfois aussi une question de goût.
En gros, pour moi, dans ton contexte, il n'y a aucun soucis à utiliser getElementById() à chaque fois qu'on a besoin de travailler sur l'élément, si ce n'est que de voir 4 getElementById('toto') au sein du même bloc d'instructions sera pénible à relire/maintenir.
[^] # Re: Sur le code
Posté par Guillaume Denry (site web personnel) . En réponse au journal Balance virtuelle, application éducative javascript. Évalué à 2. Dernière modification le 04 octobre 2019 à 13:09.
On va partir de l'hypothèse qu'on parle d'une application comme la tienne qui tourne entièrement sur le navigateur ou au moins qui délègue entièrement son rendu au navigateur.
Dans ce cas là, la modification du DOM via JavaScript répond essentiellement à des besoins "dynamiques", par exemple, si je veux créer un ensemble de sprites qui correspondent à l'ensemble des objets que j'ai défini en interne dans mon programme JavaScript. Le bon sens veut en effet qu'on automatise le plus de choses pour éviter de se répéter un peu partout dans son programme et dans ce cas là, la page html de base ne devra pas contenir grand chose.
C'est la tendance actuelle pour les "Web Single App" : on définit grosso modo une structure générale statique en HTML et on laisse ensuite le programme gérer le DOM de façon dynamique.
Dans ton cas, tout l'"univers" de ton jeu devrait idéalement être généré par JavaScript, surtout que comme ça, on a pas à faire constamment l'aller/retour entre le code et la page pour avoir une idée de comment tout ça s'articule.
L'utilisation de variable pour stocker des résultats d'appels de fonction répond principalement à deux besoins :
1/ avoir un cache pour le résultat d'appel de fonction (optimisation)
2/ éviter de se répéter dans le code (maintenabilité)
Dans la plupart des cas, la maintenabilité d'un code est pour moi plus important que son optimisation, et en tout cas, on ne devrait pas se soucier trop tôt de l'optimisation de son programme. Comme dirait Donald Knuth, "Premature optimization is the root of all evil (or at least most of it) in programming."
Dans ton cas, récupérer un élément par son id est quelque chose d'ultra optimisé, surtout par les navigateurs actuels, cela dit, ça reste un appel de fonction.
Dans une boucle de 1 000 000 itérations, utiliser
getElementByIdavoir le même id ne serait probablement pas très malin.Cependant, dans la grosse majorité des cas, c'est l'élégance du code, la concision et le soucis de ne pas se répéter qui devrait primer, et c'est parfois aussi une question de goût.
En gros, pour moi, dans ton contexte, il n'y a aucun soucis à utiliser
getElementById()à chaque fois qu'on a besoin de travailler sur l'élément, si ce n'est que de voir 4getElementById('toto')au sein du même bloc d'instructions sera pénible à relire/maintenir.