Avantages et inconvénients du chaînage en JavaScript
Bien que le chaînage raccourcisse le code,
dans la plupart des cas, l'introduction d'une variable
est tout de même plus pratique. Comparez deux exemples -
maintenant j'ai introduit la variable elem et je peux
définir n'importe quel nombre d'attributs, tandis que
querySelector n'est appelé qu'une
seule fois :
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
Maintenant, je n'introduis pas de nouvelle variable et donc
je dois appeler querySelector
deux fois :
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
À mon avis, ce code est devenu plus complexe, bien
qu'il occupe une ligne de moins. De
plus, si je veux changer la valeur de id
de 'elem' pour une autre, je devrai
le faire à plusieurs endroits, ce qui n'est pas très pratique.
Il y a un autre problème - la charge sur le navigateur.
La recherche d'éléments dans la page, effectuée par
la méthode querySelector, est une opération assez
lente (et en général, tout travail
avec les éléments de la page est une opération lente
- retenez cela).
Dans notre cas, si nous utilisons à chaque fois
querySelector, le navigateur à chaque fois
va traiter le code HTML de la page et chercher
l'élément avec le id donné plusieurs fois
(peu importe que le id soit identique - le navigateur
effectuera toutes les actions plusieurs fois), accomplissant
des opérations inutiles qui peuvent ralentir
le fonctionnement du navigateur.
Si nous utilisons la variable elem
- aucune recherche dans la page n'a lieu
(l'élément est déjà trouvé et une référence vers celui-ci se trouve
dans la variable).
Voici le code suivant :
<img id="image" src="avatar.png" width="300" height="500">
console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);
Indiquez les défauts de ce code. Corrigez-les.
