Nutzen Sie JQuery effizienter

1. DOM-Durchquerung ist teuer, daher Cache-Variablen.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
var h = $('#ele').height();
$('#ele').css('height', h-20);

Code kopieren Der Code lautet wie folgt:

//Empfehlen
var $ele = $('#ele');
var h = $ele.height();
$ele.css('height',h-20);

2. Optimieren Sie die Selektoren.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
$('div#myid')

Code kopieren Der Code lautet wie folgt:

//Empfehlen
$('#myid')

3. Vermeiden Sie implizite Universalselektoren.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
$('.someclass :radio')

Code kopieren Der Code lautet wie folgt:

//Empfehlen
$('.someclass input:radio')

4. Vermeiden Sie Universalselektoren.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
$('.container > *')

Code kopieren Der Code lautet wie folgt:

//Empfehlen
$('.container').children()

5. Halten Sie den Code so einfach wie möglich.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
if(arr.length > 0){}

Code kopieren Der Code lautet wie folgt:

//Empfohlen
if(arr.length){}

6. Funktionen so weit wie möglich zusammenführen.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
$f.on("click", function(){
$(this).css('border','1px solid red');
$(this).css('color','blue');
});

Code kopieren Der Code lautet wie folgt:

//Empfehlen
$f.on("click", function(){
$(this).css({
         'border':'1px solid red',
'Farbe': 'blau'
});
});

7. Verwenden Sie so oft wie möglich Kettenoperationen.

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('slow');

Code kopieren Der Code lautet wie folgt:

//Empfehlen
$ele.on("click",function(){

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

8. Führen Sie eine große Anzahl von Operationen an DOM-Elementen durch, trennen Sie sie zuerst und hängen Sie sie dann an

Code kopieren Der Code lautet wie folgt:

//Nicht empfohlen
var $container = $('#somecontainer');
var $ele = $container.first();
.....Eine Reihe komplexer Operationen

Code kopieren Der Code lautet wie folgt:

//Empfehlen
var $container = $('#somecontainer');
var $ele = $container.first().detach();
.....Eine Reihe komplexer Operationen
$container.append($ele);