19 lignes directrices pour écrire du code_jquery jquery efficace

Tout d'abord, gardez à l'esprit que jQuery est du javascript. Cela signifie que nous devons adopter les mêmes conventions de codage, guides de style et meilleures pratiques.
Tout d'abord, si vous êtes un novice en JavaScript, je vous recommande de lire "24 meilleures pratiques pour les débutants en JavaScript". Il s'agit d'un tutoriel JavaScript de haute qualité. Il est préférable de le lire avant de contacter jQuery.
Lorsque vous êtes prêt à utiliser jQuery, je vous recommande fortement de suivre ces directives :
1. La mise en cache des variables
La traversée du DOM coûte cher, alors essayez de mettre en cache les éléments réutilisés.

Copier le code Le code est le suivant :

// Oups

h = $('#element').height();
$('#element').css('height',h-20);

// Suggestions

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2 .Évitez les variables globales
Avec jQuery et JavaScript, en général, il est préférable de vous assurer que vos variables sont dans la portée de la fonction.

Copier le code Le code est le suivant :

// Oups

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// Suggestions

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

3. Utilisez la nomenclature hongroise
pour préfixer la variable avec $ afin d'identifier facilement l'objet jQuery.

Copier le code Le code est le suivant :

// Oups

var premier = $('#first');
var second = $('#second');
var value = $first.val();

// Suggestion - Préfixez l'objet jQuery avec $

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

4 .Utilisez la chaîne Var (mode Var unique)
pour combiner plusieurs instructions var en une seule instruction. Je recommande de mettre les variables non attribuées à la fin.

Copier le code Le code est le suivant :

var
$first = $( '#first '),
$second = $('#second'),
value = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};

5 Veuillez utiliser 'On'
Dans la nouvelle version de jQuery, le plus court on("click") est utilisé pour remplacer un click() similaire Une telle fonction. Dans les versions précédentes, on() était bind(). Depuis la version 1.7 de jQuery, on() est la méthode préférée pour attacher des gestionnaires d'événements. Cependant, par souci de cohérence, vous pouvez simplement utiliser la méthode on() ensemble.

Copier le code Le code est le suivant :

// Oups

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
>});

$first.hover(function(){
$first.css('border','1px solid red');
})

// Recommandation
$first.on('click',function(){
$first.css('border','1px solid red');
$first.css(' couleur','bleu');
})

$first.on('hover',function(){
$first.css('border','1px solid red');
})

6.
En général, il est préférable de combiner les fonctions autant que possible.

Copier le code Le code est le suivant :

// Oups

$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
>});

// Suggestions

$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});

7. Opération en chaîne
Il est très facile pour jQuery d'implémenter le fonctionnement en chaîne des méthodes. Profitez-en ci-dessous.

Copier le code Le code est le suivant :

// Oups

$second.html(value);
$second.on('click',function(){
alert('bonjour tout le monde');
});
$second. fadeIn('slow');
$second.animate({height:'120px'},500);

// Suggestions

$second.html(value);
$second.on('click',function(){
alert('bonjour tout le monde');
}).fadeIn('slow') .animate({height:'120px'},500);

8. Maintenir la lisibilité du code
En plus de rationaliser le code et d'utiliser le chaînage, cela peut rendre le code difficile à lire. L’ajout de pincements et de sauts de ligne peut faire des merveilles.

Copier le code Le code est le suivant :

// Oups

$second.html(value);
$second.on('click',function(){
alert('bonjour tout le monde');
}).fadeIn('slow') .animate({hauteur:'120px'},500);

// Suggestions

$second.html(value);
$second
.on('click',function(){ alert('bonjour tout le monde');})
.fadeIn('slow')
.animate({height:'120px'},500);

9. Sélectionnez l'évaluation du court-circuit
L'évaluation du court-circuit est une expression qui est évaluée de gauche à droite, en utilisant && ( ET logique) ou || (OU logique).

Copier le code Le code est le suivant :

// Oups

function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}

// Suggestions

function initVar($myVar) {
$myVar = $myVar || $('#selector');
}

10. Choisissez l'un des raccourcis
pour simplifier. le code Une solution consiste à tirer parti des raccourcis de codage.

Copier le code Le code est le suivant :

// Oups

if(collection.length > 0){..}

// Suggestions

if(collection.length){..>

11. Séparez les éléments lors d'opérations lourdes
Si vous prévoyez d'effectuer de nombreuses opérations sur les éléments DOM (définir plusieurs attributs ou styles CSS successivement ), Il est recommandé de détacher d’abord les éléments puis de les ajouter.

Copier le code Le code est le suivant :

// Oups

var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;

$element = $containerLi.first();
//... De nombreuses opérations complexes

// mieux

var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... De nombreuses opérations complexes

$container.append($element);

12. Compétences en mémorisation
Vous manquez peut-être d'expérience dans l'utilisation des méthodes dans jQuery, assurez-vous de consulter la documentation, il existe peut-être un moyen meilleur ou plus rapide. pour l'utiliser.

Copier le code Le code est le suivant :

// Oups

$('#id').data(clé,valeur);

// Suggestions (efficaces)

$.data('#id',key,value);

13. Mettre en cache les éléments parents à l'aide de sous-requêtes
Comme mentionné précédemment, la traversée du DOM est une opération coûteuse. Une approche typique consiste à mettre en cache les éléments parents et à réutiliser ces éléments mis en cache lors de la sélection des éléments enfants.

Copier le code Le code est le suivant :

// Oups

var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');

// Suggestions (efficaces)

var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

14. Évitez les sélecteurs universels
Placer des sélecteurs universels dans des sélecteurs descendants a de très mauvaises performances.

Copier le code Le code est le suivant :

// Oups

$('.conteneur > *');

// Suggestions

$('.container').children();
Évitez les sélecteurs universels implicites
Les sélecteurs universels sont parfois implicites et difficiles à trouver.

// Oups

$('.someclass :radio');

// Suggestions

$('.someclass input:radio');
Optimiser les sélecteurs
Par exemple, le sélecteur Id doit être unique, il n'est donc pas nécessaire d'ajouter des sélecteurs supplémentaires.

// Oups

$('div#myid');
$('div#footer a.myLink');

// Recommandation
$('#myid');
$('#footer .myLink');

15. Évitez les sélecteurs d'ID multiples
soulignez ici, l'ID. Le sélecteur doit être unique, il n'est pas nécessaire d'ajouter des sélecteurs supplémentaires et il n'est pas nécessaire d'avoir plusieurs sélecteurs d'ID descendants.

Copier le code Le code est le suivant :

// Oups

$('#extérieur #intérieur');

// Suggestions

$('#inner');

16. Tenez-vous-en à la dernière version
Les versions plus récentes sont généralement meilleures : plus légères et plus efficaces. Évidemment, vous devez considérer la compatibilité du code que vous souhaitez prendre en charge. Par exemple, la version 2.0 ne prend pas en charge IE 6/7/8.

Abandonner les méthodes obsolètes
Il est très important de faire attention aux méthodes obsolètes à chaque nouvelle version et d'essayer d'éviter d'utiliser ces méthodes.

Copier le code Le code est le suivant :

// Oups - le live a été abandonné

$('#stuff').live('click', function() {
console.log('hourra');
});

// Suggestion
$('#stuff').on('click', function() {
console.log('hourra');
});

// Remarque : cela peut être inapproprié. Live peut réaliser une liaison en temps réel, et un délégué peut être plus approprié
17. Utiliser CDN
Le CND de Google peut garantir que le cache le plus proche de l'utilisateur est sélectionné et répond rapidement. . (Veuillez rechercher l'adresse vous-même lorsque vous utilisez Google CND. L'adresse ici ne peut pas être utilisée. Nous recommandons le CDN fourni par le site officiel de jquery).

18. Combinez jQuery et le code natif javascript si nécessaire
Comme mentionné ci-dessus, jQuery est javascript, ce qui signifie que tout ce que vous pouvez faire avec jQuery peut également l'être avec du code natif. Le code natif (ou vanilla) peut ne pas être aussi lisible et maintenable que jQuery, et le code est plus long. Mais cela signifie aussi plus efficace (généralement plus le code sous-jacent est proche, moins il est lisible, plus les performances sont élevées, par exemple : l'assemblage, qui nécessite bien sûr des personnes plus puissantes). N'oubliez pas qu'aucun framework ne peut être plus petit, plus léger et plus efficace que le code natif

Compte tenu des différences de performances entre vanilla et jQuery, je recommande fortement d'absorber le meilleur des deux mondes et d'utiliser (si possible) du code natif équivalent à jQuery.

19. Dernier conseil
Enfin, le but de l'enregistrement de cet article est d'améliorer les performances de jQuery et quelques autres bonnes suggestions. Si vous souhaitez approfondir ce sujet, vous y trouverez beaucoup de plaisir. N'oubliez pas que jQuery n'est pas obligatoire, juste une option. Réfléchissez à la raison pour laquelle vous souhaitez l'utiliser. Manipulation du DOM ? ajax ? pochoir? des animations CSS ? Ou un moteur sélecteur ? Peut-être qu'un microframework javascript ou une version personnalisée de jQuery serait un meilleur choix.