Share
Come editor di Nettuts +, riesco a rivedere un sacco di codice dalle presentazioni dei tutorial. Nonostante il fatto che jQuery sia disponibile da anni, c'è ancora un errore frequente che vedo più di ogni altra cosa.
Considera il seguente bit di codice:
Accentsconagua
$ ('. nav a'). click (function () $ (this) .hide (); $ (this) .css ('color', 'red'); $ (this) .show (); alert ('qualcos'altro'); $ (this) .hide (); return false;); Il codice sopra è troppo complicato per una serie di motivi. Non preoccuparti di ciò che effettivamente fa il codice (non ha senso). Invece, voglio che tu guardi tutti quei riferimenti a $ (This).
Pensa al DOM come a una piscina.
Pensa al DOM come a una piscina. Ricorda quando eri un bambino e ti tuffavi in piscina per le monete, mentre i tuoi genitori si comportavano come se stessero guardando? Quello sarà il nostro confronto con il mondo reale.
Ogni volta che usi $ ('. SomeClass'), jQuery salta nel pool (DOM) e cerca quella moneta (o i nodi). Quindi, quando lo fai riferimento più volte all'interno di una funzione, questo è un sacco di immersioni. Oppure, per ridurre il confronto nel mondo reale, è inutile e inutile. Perché chiamare jQuery se non lo richiedete? Dovresti eseguire ciò che chiamiamo "cache".?
$ ('. nav a'). click (funzione (e) var anchor = $ (this); anchor .hide () .css ('color', 'red') .show (); alert ('qualcos'altro '); anchor.hide (); e.preventDefault ();); Questo è molto più pulito. Mentre i moderni motori di browser sono incredibilmente veloci in questi giorni, e recupereranno il tuo scarso codice nel miglior modo possibile, dovresti comunque sforzarti di scrivere codice efficiente e non sprecare tutta l'energia che salta nella piscina. Ora, tecnicamente, se passi a jQuery un nodo DOM, ad esempio Questo, non ri-interrogare il DOM. Restituisce semplicemente un oggetto jQuery.
Solo perché la differenza di prestazioni tra i due sarà onestamente trascurabile, scriviamo codice pulito per noi stessi.
Consideriamo un esempio un po 'più complicato: schede.
$ ('. tabs li'). css ('position', 'relative'); $ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .addClass ('active'); $ (this) .load ( 'someHref', function () ); // example $ (this) .css ('top', '1px');); Questo codice è dappertutto. È brutto e inefficiente. La soluzione numero uno è di eliminare tutto ciò che è CSS. Metterai lo styling nel tuo JavaScript solo se i valori sono stati creati dinamicamente. Ad esempio, se è necessario calcolare la posizione precisa di un elemento sullo schermo, è possibile utilizzarlo .css ('left', calcolatoValue). In questo caso, può essere esportato su un foglio di stile esterno. Questo ci lascia con:
$ ('. tabs li'). click (function () $ ('. tabs li'). removeClass ('active'); $ (this) .load ('someHref', function () ); / / example $ (this) .addClass ('active');); Quindi, di nuovo, perché continuiamo a interrogare il DOM per .schede li e $ (This)? Smetti di saltare in piscina. Let's? Cache? la posizione di .schede li.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (this) .load ('someHref', function () ); // example $ (this) .addClass ('active'); ); Meglio, ma stiamo ancora chiamando $ (This) due volte, che non è un grosso problema. Ma, dalle mie esperienze, se non lo stroncate sul nascere presto, questo numero aumenta rapidamente.
var tabs = $ ('. tabs li'); tabs.click (function () var tab = $ (this); tabs.removeClass ('active'); tab.addClass ('active') .load ('someHref', function () ); // esempio ); Un'altra opzione (leggermente meno ottimizzata) sarebbe quella di utilizzare il filtro.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active') .filter (this) .addClass ('active') .load ('someHref', function () ); // example); La differenza in questo caso è quella, piuttosto che il riferimento $ (This), stiamo usando il filtro() metodo per ridurre la raccolta di voci di elenco solo a quella su cui è stato fatto clic.
Sì, il mondo non finirà se tu fai riferimento $ ('. Schede) più volte all'interno di una funzione. I motori JavaScript sono super veloci in questi giorni. Se dovessi testare la performance di farlo migliaia di volte, la differenza nell'esecuzione potrebbe essere di un paio di centinaia di millisecondi. Ma ancora, la domanda rimane: perché vorresti?
A volte, quando usiamo astrazioni massive come jQuery, è facile dimenticarlo $ ('. Tabs') è una funzione reale che esegue un bel po 'di codice. Va anche notato che questi concetti si applicano a JavaScript in generale, non solo a jQuery.
Utilizzare il caching tecniche sopra descritte per scrivere codice più pulito? per te.
