Share
Als redacteur van Nettuts + kan ik veel code uit tutorial-inzendingen bekijken. Ondanks het feit dat jQuery al jaren beschikbaar is, is er nog steeds één veelgemaakte fout die ik meer dan iets anders zie.
Beschouw het volgende stukje code:
Accentsconagua
$ ('. nav a'). klik (functie () $ (this) .hide (); $ (this) .css ('color', 'red'); $ (this) .show (); alert ('iets anders'); $ (this) .hide (); return false;); De bovenstaande code is om verschillende redenen te gecompliceerd. Maak je geen zorgen over wat de code eigenlijk doet (het is wartaal). In plaats daarvan wil ik dat je naar al die referenties kijkt $ (This).
Denk aan de DOM als een zwembad.
Denk aan de DOM als een zwembad. Weet je nog toen je een kind was, en in het zwembad zou duiken voor munten, terwijl je ouders zich gedroegen alsof ze toekeken? Dat is onze vergelijking in de echte wereld.
Elke keer dat je gebruikt $ ('. SomeClass'), jQuery springt in de pool (DOM) en zoekt naar die munt (of knooppunten). Dus wanneer je er meerdere keren naar verwijst binnen een functie, dan is dat heel wat duiken. Of, om de real-world vergelijking te snijden, het is verspilling en onnodig. Waarom een beroep doen op jQuery als u dit niet nodig hebt? Je zou moeten doen wat we noemen? Caching.?
$ ('. nav a'). klik (functie (e) var anchor = $ (this); anchor .hide () .css ('color', 'red') .show (); alert ('something else '); anchor.hide (); e.preventDefault ();); Dit is veel schoner. Hoewel moderne browser-engines tegenwoordig ongelooflijk snel zijn en je slechte codering zo goed mogelijk zullen goedmaken, moet je er toch naar streven om efficiënte code te schrijven en te voorkomen dat je al die energie verspilt door in het zwembad te springen. Technisch gezien, als je jQuery een DOM-knooppunt doorgeeft, zoals deze, hij ondervraagt de DOM niet opnieuw. Het retourneert eenvoudigweg een jQuery-object.
Alleen omdat het verschil in prestaties tussen de twee eerlijk te verwaarlozen is, schrijven we schone code voor onszelf.
Laten we een iets ingewikkelder voorbeeld overwegen: tabbladen.
$ ('. tabs li'). css ('positie', 'relatief'); $ ('. tabs li'). klik (functie () $ ('. tabs li'). removeClass ('active'); $ (this) .addClass ('active'); $ (this) .load ( 'someHref', function () ); // voorbeeld $ (this) .css ('top', '1px');); Deze code is helemaal over de plaats. Het is lelijk en inefficiënt. Nummer nummer één is om al die CSS kwijt te raken. U zou alleen styling in uw JavaScript plaatsen als de waarden dynamisch zijn gemaakt. Als u bijvoorbeeld de precieze locatie wilt berekenen, moet er een element op het scherm staan dat u zou kunnen gebruiken .css ('left', calculatedValue). In dit geval kan het allemaal worden geëxporteerd naar een externe stylesheet. Dat laat ons achter:
$ ('. tabs li'). klik (functie () $ ('. tabs li'). removeClass ('active'); $ (this) .load ('someHref', function () ); / / example $ (this) .addClass ('active');); Maar nogmaals, waarom blijven we de DOM bevragen voor .tabbladen li en $ (This)? Stop met springen in het zwembad. Laten we? Cache? de locatie van .tabbladen li.
var tabs = $ ('. tabs li'); tabs.click (function () tabs.removeClass ('active'); $ (this) .load ('someHref', function () ); // example $ (this) .addClass ('active'); ); Beter, maar we bellen nog steeds $ (This) twee keer, wat geen groot probleem is. Maar vanuit mijn ervaringen, als je het niet vroeg in de kiem smoort, neemt dit aantal snel toe.
var tabs = $ ('. tabs li'); tabs.click (functie () var tab = $ (this); tabs.removeClass ('active'); tab.addClass ('active') .load ('someHref', function () ); // voorbeeld ); Een andere (iets minder geoptimaliseerde) optie zou zijn om filteren te gebruiken.
var tabs = $ ('. tabs li'); tabs.klik (functie () tabs.removeClass ('actief') .filter (this) .addClass ('active') .load ('someHref', function () ); // example); Het verschil in dit geval is dat, in plaats van verwijzen $ (This), we gebruiken de filter() methode om het verzamelen van lijstitems te beperken tot alleen degene waarop is geklikt.
Ja, de wereld zal niet eindigen als je verwijst $ ('. Tabs) meerdere keren binnen een functie. JavaScript-engines zijn tegenwoordig supersnel. Als je de prestaties duizend keer zou testen, zou het verschil in uitvoering een paar honderd milliseconden kunnen zijn. Maar toch blijft de vraag: waarom zou je?
Soms, wanneer we massale abstracties zoals jQuery gebruiken, is dat gemakkelijk vergeten $ ('. Tabs') is een echte functie die een goed stuk code uitvoert. Er moet ook worden opgemerkt dat deze concepten van toepassing zijn op JavaScript in het algemeen, niet alleen op jQuery.
Gebruik de caching technieken hierboven beschreven om schonere code te schrijven? voor jezelf.
