Voici une liste d’astuce / bonnes pratiques concernant JQuery :
Utiliser la dernière version de JQuery
JQuery est en développement permanent et de nouvelles versions sortent régulièrement, plus rapide et plus puissante. N’oubliez pas de mettre à jour votre version de JQuery afin de profitez de nouvelles fonctionnalités et de gain de performance.
id > tags > class
Il faut savoir que la sélection via le sélecteur de Jquery (Sizzle) sera plus rapide si vous utiliser un id par rapport à un tag (p, div, table, …). De la même manière, il est préférable d’utiliser un tag qu’une classe.
Utiliser un contexte
Afin d’éviter de parcourir tout le document, on peut utiliser la notion de contexte qui va définir le scope de recherche. Pour cela, il vaut mieux utiliser find au lieu de spécifier le contexte au sélecteur. En effet, dans la cas où on passe le contexte au sélecteur, c’est la méthode find qui sera appelée.
//On passe le contexte au sélecteur
$('li', '#monContext')
//idem mais avec find
$('#monContext').find('li')
Mettre en cache / Chaîner vos appels
La sélection des éléments est coûteux en terme de temps. Il faut mieux ainsi mettre en cache les élements sélectionné afin de gagner en performance. Un des principes de base de JQuery est que la majorité des fonctions et plugins renvoie la liste des éléments à traiter. Ainsi, on peut chaîner les appels de fonctions.
//Peu performant
$('#item').show();
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// On chaîne les appels
$('#item').show().html('hello').css('background-color', '#ffffff');
// ou on met en cache l'élément
var item = $('#item');
item.show();
item.html('hello');
item.css('background-color', '#ffffff');
Dans le même esprit, pensez à naviguez dans le DOM de l’élément sélectionné au lieu de faire plusieurs sélection. Pour cela, JQuery propose les méthodes Traversing comme :
- siblings : permet de récupérer les éléments frère (de même niveau)
- childrens : permet de sélectionner les enfants
- next : permet de sélectionner l’élément frère suivant
- prev : permet de sélectionner l’élément frère précèdent
- nextAll et prevAll : permet de sélectionner respectivemnt tous les élément frères suivant et précèdent
- first et last: permet de sélection du premier et du dernier élément sélectionné
- …
Cerise sur le gâteau, ces méthodes accepte un sélecteur afin de filtrer les données !!!
//On récupère le permier élément p de l'élément #content
$('#content').first('p')
Les méthodes end et addSelf sont particulièrement utiles. End permet de remonter aux éléments précédemment sélectionnés et addSelf permet de rajouter l’élément père.
// On veut modifier le 1er et le dernier élément
$('ul').first().css('color', '#F00').end().last().css('color', '#F00')
// On veut sélectionner les 2 derniers éléments d'une liste
// On sélectionne le dernier, on récupère le précèdent et on s'ajoute soit même
$('li:last').prev().addSelf();
Limiter la manipulation du DOM
Afin d’avoir un script rapide, il faut limiter la manipulation du DOM au maximum (comme prepend(), append(), after()).
Eviter :
var myList = $('#myList');
for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}
Utiliser plutôt
var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);
Une autre astuce consiste à encapsuler dans un élément unique les éléments à insérer dans le DOM.
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>'; }
myListItems += '</ul>';
myList.html(myListItems);
Documentation de Jquery dans Visual Studio
Il suffit de rajouter jquery vs-doc disponible sur le CDN de Microsoft pour avoir la documentation de JQuery intégrée dans visual studio.
Veuillez à ne l’utiliser qu’en développement, le fichier pesant près de 216Ko contre 31Ko pour la version minifiée.
Liens
Voici les liens (en anglais) qui m’ont permis de faire l’article :
