Advertisement
  1. Code
  2. Web Development
Code

Astuce DéButant jQuery : On Ne Saute Pas Dans La Piscine

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by David Leuliette (you can also view the original English article)

En dehors du fait que jQuery soit disponible depuis des années, il y a encore une erreur que je rencontre fréquemment, plus souvent qu'autre chose.

Exemple 1

Analysons le code suivant :

L'exemple de code précédent est beaucoup trop compliqué pour diverses raisons. Ne vous inquiétez pas sur sa logique d'exécution (c'est du charabia). Au lieu de cela, je veux que vous regardiez toutes les références à $(this)

Comparez le DOM à une piscine.

Imaginez le DOM comme une piscine. Rappelez vous quand vous étiez enfant, vous plongiez dans la piscine pour attraper des pièces, pendant que vos parents vous observaient ? Ce sera notre comparaison avec le monde réel.

À chaque fois que vous utilisez $('.someClass'), jQuery plonge dans la piscine (DOM), et cherche des pièces (ou noeuds). Conséquence, Si vous faites de multiples références à une fonction, cela fait beaucoup de plongeons. Pour comparer avec le monde réel, avec vos 2 mains vous pouvez prendre plusieurs pièces d'un coup. Pourquoi faire appel à jQuery si vous n'en avez pas besoin ? Vous devriez mettre en place le concept de “mise en cache”.

C'est beaucoup plus propre. Même si de nos jours les moteurs de navigateur modernes sont incroyablement rapides, et exécutent aux mieux votre code spaghetti vous devriez toujours prendre la peine d'écrire du code efficace, pour ne pas gaspiller votre énergie à sauter inutilement dans la piscine.
Maintenant, techniquement, si vous passez à jQuery un noeud du DOM, comme this, cela ne re-parcours pas l'arbre du DOM. C'est simplement un objet jQuery qui est retourné.

Simplement parce que la différence de performance entre les deux peut être négligeable, nous écrivons un code propre pour nous-mêmes.

Exemple 2

Prenons un exemple un peu plus compliqué les "tabs".

Voici un mauvais exemple. C'est dégueu, et inefficace. La première chose à corriger est de se débarrasser de tout ce qui concerne le CSS. JavaScript n'embarque des propriétés de style que seulement si les valeurs sont crées dynamiquement. Par exemple, si vous avez besoin de calculer précisément le positionnement d'un élément à l'écran, vous pourriez utiliser .css('left', calculatedValue). La bonne pratique est d'exporter ce qui concerne la mise en page dans une feuille de style externe.
Ce qui nous laisse :

Encore une fois, pourquoi le DOM est-il parcouru pour .js-tabs li et $(this) ? On ne saute pas dans la piscine. Utilisons la "mise en cache" de l'emplacement de .js-tabs li.

C'est mieux, mais $(this) est toujours appelé 2 fois, ce qui n'est pas une affaire énorme. Mais, d'après mon expérience, si ce n'est pas fait de suite, ce n'est jamais fait et ce nombre augmente rapidement.

Filtrage

Une autre option (un peu moins optimisé) serait d'utiliser le filtrage.

La différence dans ce cas, est que, au lieu de référencer $(this), nous allons utiliser la méthode filter() pour réduire la liste de collection d'objets sélectionnés pour ne conserver que celui qui est cliqué.

Ce qu'il faut retenir

C'est vrai, ce n'est pas la fin du monde si vous faites référence à $('.js-tabs) plusieurs fois dans une fonction. Mais cela y contribue. De nos jours, les moteurs JavaScript sont super rapides. Si vous testez la performance pour ces opérations exécutées des milliers de fois, la différence dans l'exécution pourrait être de quelques centaines de millisecondes. Mais une question demeure : pourquoi le feriez vous ?

Parfois, lorsque nous utilisons des abstractions massives comme jQuery, c'est facile d'oublier que $('.js-tabs') est une réelle fonction qui exécute un bon morceau de code. Il faut noter que ces concepts s'appliquent à JavaScript en général - et pas seulement à jQuery.

Utiliser les techniques de mise en cache décrites ci-dessus pour écrire un code plus propre... pour vous-même.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.