Bonnes pratiques JQuery

Charger le contenu depuis un CDN

Plutôt que de stocker JQuery sur votre serveur, vous pouvez choisir un CDN [1] notoire. Cela devrait réduire le temps de chargement de la page.

<!--:( -->
<script src="/vendor/jquery/jquery.min.js"></script>
<!-- :) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Voici une liste de CDN fournissant un accès à la bibliothèque JQuery :

Les bonnes pratiques ne concernent pas seuelement JQuery ; les éléments d’affichage - type CSS ou autre - peuvent aussi être chargés parallèlement.

Prévoir une méthode de chargement alternative en cas de défailllance du CDN

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <script>window.jQuery || document.write("<script src='/vendor/jquery/jquery.min.js'>\x3C/script>");</script>

Télécharger

Préférer les versions compressées

  1. <!-- :( -->
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
  3. <!-- :) -->
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Télécharger

Placer l’appel au script en fin de page plutôt qu’en en-tête

  1. <!doctype html>
  2. <head>
  3. ...
  4. <!-- :( -->
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. </head>
  7. <body>
  8. ...
  9. <!-- :) -->
  10. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  11. </body>
  12. ...

Télécharger

Utiliser des URLs en chemins relatif

Pas besoin de spécifier le protocole http ou https. Le navigateur optera de lui-même pour le protocole https s’il se trouve déjà dans un environemment sécurisé.

  1. <!-- :( -->
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  3. <!-- :) -->
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Télécharger

Raccourci pour l’événement ready

  1. // Appel classique
  2. $(document).ready(function() {
  3. ...
  4. });
  5. // Version rapide
  6. $(function() {
  7. });

Télécharger

Garder le $ lors de la déclaration d’une variable de type jQuery.

Grâce à cette convention de nommage, on distingue facilement la nature de l’objet JQuery.

  1. // :(
  2. var form = $('#contactForm');
  3. // :)
  4. var $form = $('#contactForm');

Télécharger

Du bon usage de $this

La variable $this s’utilise avantageusement au début des fonctions non déclarées, par exemple dans une boucle de type each.

  1. // :(
  2. $('li').each(function() {
  3. $(this).on('click', function() {
  4. $(this).addClass('active');
  5. });
  6. });
  7. // :)
  8. $('li').each(function() {
  9. var $this = $(this);
  10. $this.on('click', function() {
  11. $this.addClass('active');
  12. });
  13. });

Télécharger

Certains préfèrent utiliser that ou self. Attention de ne pas oublier qu’il s’agit d’un objet jQuery.

Mettre en cache les objets jQuery

Si un objet jQuery est utilisé plusieurs fois, le mettre en cache permet d’optimiser les performances.

  1. // :(
  2. $('.menu li').each(function() { ... });
  3. $('.menu li').each(function() { ... });
  4. // :)
  5. var $items = $('.menu li');
  6. $items.each(function() { ... });
  7. // on recycle :)
  8. $items.each(function() { ... });

Télécharger

Enchaînement des fonctions

C’est asssurément l’une des fonctionalités les plus appréciée de jQuery. On peut ainsi appeler une série de méthodes dans la même foulée.

"Write less, do more", garder en tête le slogan de jQuery
  1. // :(
  2. var $a = $('#about');
  3. $a.hide();
  4. $a.addClass();
  5. $a.fadeIn();
  6. $a.hide();
  7. // :)
  8. $('#about').hide().addClass().fadeIn().hide();
  9. // c'est mieux
  10. // Retour à la ligne et identation améliorent la visibilité
  11. $('#about')
  12. .hide()
  13. .addClass()
  14. .fadeIn()
  15. .hide();

Télécharger

Déclarer un nouvel élément

Lors de la création d’un élément, faîtes en sorte de manipuler les éléments via les méthodes jQuery plutôt que d’insérer du code HTML brut.

  1. // Don't
  2. var $hidden = $('<input class="form-control" type="hidden" name="foo" value="bar" />').appendTo('#form');
  3. // :)
  4. var $hidden = $('<input/>')
  5. .addClass('form-control')
  6. .attr('type', 'hidden')
  7. .attr('name', 'foo')
  8. .val('bar')
  9. .appendTo('#form');
  10. // ou bien
  11. var $hidden = $('<input/>', {
  12. class: 'form-control',
  13. type: 'hidden',
  14. name: 'foo',
  15. value: 'bar'
  16. }).appendTo('#form');

Télécharger

Garder le CSS loin des manipulations de jQuery

Pas la peine de déclarer le style CSS directement à un élément. Le recours aux classes est fait pour ça.

  1. // :(
  2. $('#button').css({
  3. 'background-color': '#5cb85c',
  4. 'border-color': '#4cae4c'
  5. });
  6. // :)
  7. .success {
  8. background-color: #5cb85c;
  9. border-color: #4cae4c;
  10. }
  11. $('#button').addClass('success');

Télécharger

Choisir le bon sélecteur

Le sélecteur désignant l’id est le plus rapide

Pour retrouver un élément du DOM en fonction de son id, jQuery utilise la méthode native document.getElementById() qui s’avère bien plus efficace que Sizzle.

Sizzle is a pure-JavaScript CSS selector engine used by jQuery
  1. // :(
  2. $('#wrapper #inner');
  3. $('div#inner');
  4. $('.wrapper #inner');
  5. // :)
  6. $('#inner');

Télécharger

Du coup, mieux vaut introduire une recherche sur un id, quitte à enchaîner les recherches.

  1. // :(
  2. $('#container .row');
  3. // + rapide
  4. $('#container').find('.row');

Télécharger

Sélecteurs restrictifs

Il faut être spécifique sur le partie gauche de votre sélecteur, et moins en début.

  1. // pas glup
  2. $('div.data .gonzalez');
  3. // glup glup
  4. $('.data td.gonzalez');

Télécharger

Éviter le recours aux sélecteurs universels

  1. // moins rapide
  2. $('div.container > *');
  3. // Plus rapide
  4. $('.container').children();

Télécharger

Mieux vaut faire précéder les sélecteurs pseudo-class (ex :before) avec un tag ou un autre sélecteur. Car, si ce n’est pas le cas, le sélecteur universel * est implicitement employé.

  1. // :(
  2. $('.category :radio');
  3. // :)
  4. $('.category input:radio');

Télécharger

Privilégiez les méthodes de tri plutôt que les pseudos-sélecteurs.

Lorsque cele est possible, utiliser la méthode de tri jQuery plutôt que des pseudos-sélecteurs. La méthode querySelectorAll s’avère là encore plus rapide que la méthode Sizzle.

  1. // :(
  2. $('.item:first')
  3. // :)
  4. $('.item').eq(0)

Télécharger

Pas de javascript inline sur les élements HTML

Mieux vaut attacher un écouteur d’événement à l’objet.

  1. <!-- :( -->
  2. <button id="saveButton" onclick="javascript: save();">Save</button>
  3. // :)
  4. $('#saveButton').on('click', function() {
  5. ...
  6. });

Télécharger

Choisir un namespace personnalisé pour les événements

Ainsi il est plus facile de désactiver un événement sans affecter les autres écouteurs d’événements assignés à l’élément.

  1. $('#saveButton').on('click.bv', function() { ... });
  2. //Plus tard, on peut retirer sans crainte l'écouteur l'événement
  3. $('#saveButton').off('click.bv');

Télécharger

Ne pas passer les paramètres Ajax "en dur"

Lorsque d’un requête de type xmlHttpRequest, il faut utiliser le paramètre data, et non concaténer l’information au sein de l’URL.

  1. // :(
  2. $.ajax({
  3. url: '/remote/url?param1=value1&amp;param2=value2...'
  4. }});
  5. // :)
  6. $.ajax({
  7. url: '/remote/url',
  8. data: {
  9. param1: 'value1',
  10. param2: 'value2'
  11. ...
  12. }
  13. });

Télécharger

Dans le cas où les paramètres à transmettre sont très long (ex : le contenu intégral d’un article), on privilégiera la méthode POST, à la fois pour Ajax et le traitement côté serveur.

Internet Explorer 8 (and earlier) limits 2083 characters in URL

source Best jQuery practices · Programmer Tips


placido

Notes

[1Content Delivery Network : Un content delivery network (CDN) est constitué d’ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données (généralement du contenu multimédia volumineux) à des utilisateurs.