Utilisez JQuery plus efficacement Voici 8 astuces

Utilisez JQuery plus efficacement Voici 8 astuces_jquery.

WBOY

Libérer： 2016-05-16 15:05:49

original

1093 Les gens l'ont consulté

1. La traversée du DOM coûte cher, donc mettez en cache les variables.

Copier le code Le code est le suivant :

//Non recommandé

var h = $('#ele').height();

$('#ele').css('hauteur', h-20);

Copier le code Le code est le suivant :

//Recommander

var $ele = $('#ele');

var h = $ele.height();

$ele.css('hauteur',h-20);

2. Optimiser les sélecteurs.

Copier le code Le code est le suivant :

//Non recommandé

$('div#monid')

Copier le code Le code est le suivant :

//Recommander

$('#monid')

3. Évitez les sélecteurs universels implicites.

Copier le code Le code est le suivant :

//Non recommandé

$('.someclass :radio')

Copier le code Le code est le suivant :

//Recommander

$('.someclass input:radio')

4. Évitez les sélecteurs universels.

Copier le code Le code est le suivant :

//Non recommandé

$('.conteneur > *')

Copier le code Le code est le suivant :

//Recommander

$('.container').children()

5. Gardez le code aussi simple que possible.

Copier le code Le code est le suivant :

//Non recommandé

si (longueur arr. > 0){}

Copier le code Le code est le suivant :

//Recommandé 

si(arr.longueur){}

6. Fusionnez les fonctions autant que possible.

Copier le code Le code est le suivant :

//Non recommandé

$f.on("clic", function(){

$(this).css('border','1px solid red');

$(this).css('color','blue');

});

Copier le code Le code est le suivant :

//Recommander

$f.on("clic", function(){

$(this).css({

         'border':'1px rouge uni',

         'couleur' : 'bleu'

});

});

7. Utilisez autant que possible les opérations en chaîne.

Copier le code Le code est le suivant :

//Non recommandé

$ele.html();

$ele.on("clic",function(){});

$ele.fadeIn('lent');

Copier le code Le code est le suivant :

//Recommander

$ele.on("clic",function(){

}).fadeIn('slow').animate({height:'12px'},500);

8. Effectuez un grand nombre d'opérations sur les éléments DOM, séparez-les d'abord puis ajoutez-les

Copier le code Le code est le suivant :

//Non recommandé

var $container = $('#somecontainer');

var $ele = $container.first();

.....Une série d'opérations complexes

Copier le code Le code est le suivant :

//Recommander

var $container = $('#somecontainer');

var $ele = $container.first().detach();

.....Une série d'opérations complexes

$container.append($ele);