Share
Som redaktör för Nettuts + får jag läsa en hel del kod från handledningssändningar. Trots det faktum att jQuery har varit tillgängligt i flera år finns det fortfarande ett vanligt misstag att jag ser mer än något annat.
Tänk på följande bit kod:
Accentsconagua
$ ('. nav a'). klicka (funktion () $ (detta) .hide (); $ (detta) .css ("färg", "rött"); $ (detta). ('något annat'); $ (this) .hide (); return false;); Koden ovan är alltför komplicerad av olika skäl. Oroa dig inte över vad koden faktiskt gör (det är gibberish). Istället vill jag att du ska titta på alla dessa referenser till $ (Detta).
Tänk på DOM som en pool.
Tänk på DOM som en pool. Kom ihåg när du var barn och skulle dyka in i poolen för mynt, medan dina föräldrar handlade som de tittade på? Det kommer att bli vår verkliga jämförelse.
Varje gång du använder $ ('. SomeClass), jQuery hoppar in i poolen (DOM) och söker efter det myntet (eller noderna). Så när du refererar det flera gånger till en funktion, det är mycket dykning. Eller, för att skära jämförelsen i verkligheten är det slösigt och onödigt. Varför ringa till jQuery om du inte behöver det? Du borde utföra det vi kallar? Caching.?
$ ('.nav a'). klicka (funktion (e) var ankar = $ (detta); ankare .hide () .css ('färg', 'röd') .show (); alert '); anchor.hide (); e.preventDefault ();); Detta är mycket renare. Medan moderna webbläsarmotorer är otroligt snabba dessa dagar och kommer att kompensera för din stackars kodning så bra som möjligt, borde du fortfarande sträva efter att skriva effektiv kod, och håll dig för att slösa bort all den energi som hoppar i poolen. Tekniskt, om du passerar jQuery en DOM-nod, gillar du detta, det frågar inte DOM igen. Det returnerar helt enkelt ett jQuery-objekt.
Bara för att prestationsskillnaden mellan de två kommer att vara försumbar, skriver vi ren kod för oss själva.
Låt oss överväga ett lite mer komplicerat exempel: flikar.
$ ('. flikar li'). css ('position', 'relativ'); $ ('. tabs li'). Klicka på (funktion () $ ('.flikar li'). removeClass ('aktiv'); $ (detta) .addClass ('aktiv'); $ (detta). 'someHref', funktion () ); // exempel $ (detta) .css ('top', '1px');); Denna kod är överallt. Det är fult och ineffektivt. Fix nummer ett är att bli av med all den CSS. Du skulle bara placera styling i JavaScript om värdena skapades dynamiskt. Om du till exempel behöver beräkna den exakta platsen bör ett element vara på skärmen, du kan använda .css ('left', calculatedValue). I det här fallet kan det alla exporteras till ett externt stilark. Det lämnar oss med:
$ ('tabs li'). Klicka på (funktion () $ ('flikar li'). removeClass ('aktiv'); $ (this) .load ('someHref', funktion () ); / exempel $ (detta) .addClass ('aktivt');); Nästa, igen, varför fortsätter vi att fråga DOM för .flikar li och $ (Detta)? Sluta hoppa i poolen. Låt oss cache? platsen för .flikar li.
var flikar = $ ('. flikar li'); tabs.click (funktion () tabs.removeClass ('aktiv'); $ (detta) .load ('someHref', funktion () ); // exempel $ (detta) .addClass ('aktivt'); ); Bättre, men vi ringer fortfarande $ (Detta) två gånger, vilket inte är en stor sak. Men från mina erfarenheter, om du inte nypa det i knoppen tidigt, ökar detta nummer snabbt.
var flikar = $ ('. flikar li'); tabs.click (funktion () var flik = $ (detta); tabs.removeClass ('aktiv'); tab.addClass ('aktiv') .load ('someHref', funktion () ); // exempel ); Ett annat alternativ (något mindre optimerat) skulle vara att använda filtrering.
var flikar = $ ('. flikar li'); tabs.click (funktion () tabs.removeClass ('aktiv') .filter (detta) .addClass ('aktiv') .load ('someHref', funktion () ); // exempel); Skillnaden i det här fallet är det, snarare än att referera $ (Detta), vi använder filtrera() metod för att minska samlingen av listobjekten till bara den som klickades.
Ja, världen kommer inte sluta om du refererar $ ('. Flikar) flera gånger inom en funktion. JavaScript-motorer är super snabba dessa dagar. Om du skulle testa resultatet av att göra det tusentals gånger, kan skillnaden i utförande vara ett par hundra millisekunder. Men fortfarande är frågan kvar: varför skulle du?
Ibland, när vi använder massiva abstraktioner som jQuery, glömmer det enkelt $ ('. Flikarna) är en faktisk funktion som kör en bra bit av kod. Det bör också noteras att dessa begrepp gäller för JavaScript i allmänhet - inte bara jQuery.
Använd caching tekniker som beskrivs ovan för att skriva renare kod? för dig själv.
