Il modo più efficiente per riutilizzare gli elementi selezionati da jQuery

Question

Posso immaginare la risposta corretta a questa in base alla teoria, ma sto solo cercando una conferma. Mi chiedo quale sia il modo più efficiente per riutilizzare un elemento selezionato da jQuery. Per esempio:

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

vs.

myDiv = $('#my_div'); 
myDiv.css('background','red'); 
//some other code 
myDiv.attr('name','Red Div'); 

Suppongo che il secondo esempio è più efficiente perché l'elemento #my_div non deve ottenere trovato più di una volta. È corretto?

Analogamente, è più efficiente salvare prima $ (questo) in un oggetto visibile, come 'obj', e quindi riutilizzare 'obj' piuttosto che usare $ (this) più e più volte? In questo caso, jQuery non è costretto a trovare un elemento più e più volte, ma è costretto a convertirlo in un oggetto jQuery [$ (questo)]. Quindi, come regola generale, un oggetto jQuery dovrebbe essere SEMPRE memorizzato in una variabile se verrà usato più di una volta?

Answer 1

se si utilizza il selettore jQuery (like $('#element')), quindi sì, è necessario memorizzare sempre i risultati.

se si utilizza l'oggetto e lo si avvolge in jQuery (come $(this)), non è necessario, perché jQuery non ha bisogno di cercare nuovamente quell'elemento.

Answer 2

Si dovrebbe scrivere il codice in modo tale da limitare il numero di attraversamenti DOM.

quando si scrive qualcosa di simile:

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

si sta trovando #my_div due volte, che è inefficiente.

si può migliorare questa sia assegnando il risultato di un selettore (cioè var x = $('.something')) e manipolare la variabile x, oppure è possibile catena tuo metodo chiama in questo modo:

$('#my_div').css('background','red').attr('name','Red Div'); 

vedrete la il codice sopra riportato è molto usato perché stai trovando l'elemento una volta. Il metodo css() applicherà uno stile CSS e restituirà il risultato effettivo di $('#my_div'), quindi è possibile richiamare un altro metodo, in questo caso attr().

Il mio modo preferito di gestire il riutilizzo dei selettori è archiviarli come variabili e avvolgere le mie cose in una chiusura.

Answer 3

Questo vale anche per l'applicazione della funzione jQuery agli elementi restituiti in un gestore eventi. Cerca di evitare di applicare $ (...) troppe volte, perché questo è lento. Invece crea una variabile che contiene il risultato di $ (...). È buona norma avviare la variabile con $, che fornisce un suggerimento sull'oggetto jQuery all'interno della variabile.

$('a').click(function(){ 
    var $this = $(this); 
    $this.addClass("clicked"); 
    $this.attr("clicked", true); 
}); 

Answer 4

Una cosa che ho trovato è generalmente trascurato è quanto sia potente catene jQuery sono. Potrebbe non essere così evidente, ma dal momento che jQuery memorizza nella cache gli elementi avvolti all'interno di una catena, puoi modificare elementi, andare in un sottoinsieme più specifico, modificare, quindi tornare indietro in un superset generale senza troppo sovraccarico.

mi aspetto qualcosa di simile (pardon l'esempio)

$('#myDiv') 
    .addClass('processing') 
    .find('#myInput') 
    .hide('slow') 
    .end() 
    .removeClass('processing') 
    ; 

essere migliore performance-saggio rispetto anche

var $myDiv = $('#myDiv').addClass('processing'); 
var $myInput = $('#myDiv #myInput').hide('slow'); 
    $myDiv.removeClass('processing');