Share
Som redaktør av Nettuts +, får jeg se mye kode fra opplæringen. Til tross for at jQuery har vært tilgjengelig i mange år, er det fortsatt en hyppig feil at jeg ser mer enn noe annet.
Vurder følgende bit kode:
Accentsconagua
$ ('. nav a'). klikk (funksjon () $ (dette) .hide (); $ (dette) .css ('farge', 'rødt'); $ (dette) .show ('noe annet'); $ (dette) .hide (); return false;); Koden ovenfor er altfor komplisert av en rekke årsaker. Ikke bekymre deg for hva koden egentlig gjør (det er gibberish). I stedet vil jeg at du skal se på alle disse referansene til $ (Denne).
Tenk på DOM som et basseng.
Tenk på DOM som et basseng. Husk når du var barn, og ville dykke inn i bassenget for mynter, mens foreldrene dine oppførte seg som de så på? Det vil bli vår ekte verdenskompisisjon.
Hver gang du bruker $ ('. SomeClass'), jQuery hopper inn i bassenget (DOM), og søker etter den mynten (eller noder). Så, når du refererer det flere ganger i en funksjon, det er mye dykking. Eller for å kutte sammenligningen i sanntid, er det sløsing og unødvendig. Hvorfor ringe på jQuery hvis du ikke trenger det? Du bør utføre det vi kaller? Caching.?
$ ('.nav a'). klikk (funksjon (e) varanker = $ (dette); anker .hide () .css ('farge', 'rødt') .show (); '); anchor.hide (); e.preventDefault ();); Dette er mye renere. Mens moderne nettlesermotorer er utrolig raske i disse dager, og vil gjøre opp for dårlig koding så best som mulig, bør du likevel streve etter å skrive effektiv kode, og ikke kast bort all den energien som hopper i bassenget. Nå, teknisk, hvis du sender jQuery en DOM node, liker dette, det spør ikke om DOM. Den returnerer bare et jQuery-objekt.
Bare fordi ytelsesforskjellen mellom de to vil være ubetydelig, skriver vi ren kode for oss selv.
La oss vurdere et litt mer komplisert eksempel: faner.
$ ('. tabs li'). css ('posisjon', 'relativ'); $ ('. tabs li'). Klikk (funksjon () $ ('.labs li'). removeClass ('aktiv'); $ (dette) .addClass ('aktiv'); $ (dette). 'someHref', funksjon () ); // eksempel $ (dette) .css ('topp', '1px');); Denne koden er over alt. Det er styggt og ineffektivt. Fix nummer én er å kvitte seg med alt det CSS. Du vil bare plassere styling i JavaScript hvis verdiene ble opprettet dynamisk. Hvis du for eksempel trenger å beregne nøyaktig plassering, bør et element være på skjermen, du kan bruke .css ('left', calculatedValue). I dette tilfellet kan alt eksporteres til et eksternt stilark. Det etterlater oss med:
$ ('tabs li'). klikk (funksjon () $ ('.labs li'). removeClass ('aktiv'); $ (dette) .load ('someHref', funksjon () ); / eksempel $ (dette) .addClass ('aktivt');); Deretter igjen, hvorfor fortsetter vi å spørre DOM for .faner li og $ (Denne)? Stopp hopping i bassenget. La oss? Cache? plasseringen av .faner li.
var-faner = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (dette) .load ('someHref', funksjon () ); // eksempel $ (dette) .addClass ('aktiv'); ); Bedre, men vi ringer fortsatt $ (Denne) to ganger, som ikke er en stor avtale. Men fra mine erfaringer, hvis du ikke nipper det i knoppen tidlig, øker dette nummeret raskt.
var-faner = $ ('. tabs li'); tabs.click (function () var tab = $ (dette); tabs.removeClass ('active'); tab.addClass ('aktiv') .load ('someHref', funksjon () ); // eksempel ); Et annet (litt mindre optimalisert) alternativ ville være å bruke filtrering.
var-faner = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active') .filter (dette) .addClass ('aktiv') .load ('someHref', funksjon () ); // eksempel); Forskjellen i dette tilfellet er det, heller enn å referere $ (Denne), vi bruker filter() metode for å redusere samlingen av listeposter ned til bare den som ble klikket.
Ja, verden vil ikke ende hvis du refererer $ ('. Tabs) flere ganger i en funksjon. JavaScript-motorer er super raske i disse dager. Hvis du skulle teste ytelsen til å gjøre det tusenvis av ganger, kan forskjellen i utførelse være et par hundre millisekunder. Men fortsatt er spørsmålet fortsatt: hvorfor ville du?
Noen ganger, når vi bruker massive abstraksjoner som jQuery, er det lett å glemme det $ ('. Fanene) er en faktisk funksjon som kjører en god del kode. Det bør også bemerkes at disse begrepene gjelder for JavaScript generelt - ikke bare jQuery.
Bruke caching teknikker beskrevet ovenfor for å skrive renere kode? for deg selv.
