Share
În calitate de editor al Nettuts +, ajung să revizuiesc o mulțime de coduri din prezentările tutorialului. În ciuda faptului că jQuery a fost disponibil de ani de zile, există încă o greșeală frecventă pe care o văd mai mult decât orice altceva.
Luați în considerare următorul fragment de cod:
Accentsconagua
$ (this) .css ('color', 'red'); $ (this) .show (); alert ("altceva"); $ (this) .hide (); return false;); Codul de mai sus este prea complicat din mai multe motive. Nu vă faceți griji cu privire la ceea ce face codul de fapt (este gibberish). În schimb, vreau să te uiți la toate aceste referințe $ (Aceasta).
Gândiți-vă la DOM ca piscină.
Gândiți-vă la DOM ca piscină. Îți amintești când erai copil și te scufunda în piscină pentru monede, în timp ce părinții tăi acționau ca și cum ar fi urmărit? Aceasta va fi comparația noastră reală.
De fiecare dată când utilizați $ (“. SomeClass'), jQuery sare în piscină (DOM) și caută acea monedă (sau noduri). Deci, când o referi de mai multe ori în cadrul unei funcții, este o mulțime de scufundări. Sau, pentru a reduce comparația în lumea reală, este risipitor și inutil. De ce să solicitați jQuery dacă nu aveți nevoie de ea? Ar trebui să efectuați ceea ce numim? Caching.?
$ ('' nav ''), faceți clic pe (funcția (e) var anchor = $ (this), anchor .hide () .css (' '); anchor.hide (); e.preventDefault ();); Acest lucru este mult mai curat. În timp ce motoarele de browser moderne sunt incredibil de repede în aceste zile și vă vor compensa codarea slabă cât mai bine posibil, trebuie să încercați să scrieți coduri eficiente și să nu pierdeți tot ceea ce energia sărind în piscină. Acum, din punct de vedere tehnic, dacă treceți jQuery un nod DOM, cum ar fi acest, nu re-interoghează DOM. Pur și simplu returnează un obiect jQuery.
Doar pentru că diferența de performanță dintre cele două va fi sincer neglijabilă, vom scrie un cod curat pentru noi înșine.
Să luăm în considerare un exemplu ușor mai complicat: filele.
$ ('' tabs li ') css (' poziție ',' relativă '); $ (this) .addClass ('active'); $ (this) .load () () 'someHref', funcția () ); // exemplu $ (acest) .css ('top', '1px');); Acest cod este peste tot. Este urât și ineficient. Fixați numărul unu este să scăpați de tot ce CSS. În cazul în care valorile au fost create dinamic, ați plasa stilul în JavaScript. De exemplu, dacă trebuie să calculați locația exactă, ar trebui să fie folosit un element pe ecran .css ("stânga", valoare calculată). În acest caz, toate pot fi exportate către o foaie de stil externă. Asta ne lasa cu:
$ (this) .load ('someHref', function () ); / (' / exemplu $ (acest) .addClass ("activ");); Apoi, din nou, de ce continuăm să întrebăm DOM .filele li și $ (Aceasta)? Opriți săriți în piscină. Să terminăm? locația .filele li.
var tabs = $ ('. tabs li'); tabs.click (functie () tabs.removeClass ('activ'); $ (aceasta) .load ('someHref', function () ); // exemplu $ (acest) .addClass ('activ'); ); Mai bine, dar încă sunăm $ (Aceasta) de două ori, ceea ce nu este o afacere uriașă. Dar, din experientele mele, daca nu o scapi prea devreme, acest numar creste rapid.
var tabs = $ ('. tabs li'); tabs.addClass ('activ') .load ('someHref', functie () ); // exemplu tab.click (function () var tab = $ (aceasta); ); O altă opțiune (puțin mai puțin optimizată) ar fi utilizarea filtrării.
var tabs = $ ('. tabs li'); tabs.click (funcția () tabs.removeClass ('activ') .filter (aceasta) .addClass ('activ') .load ('someHref', function () ); Diferența în acest caz este mai degrabă decât referirea $ (Aceasta), noi folosim filtru() metodă pentru a reduce colectarea elementelor din listă numai până la cea pe care a fost făcut clic.
Da, lumea nu se va termina dacă menționați $ (“. File) de mai multe ori în cadrul unei funcții. Motoarele JavaScript sunt foarte rapide în aceste zile. Dacă ați încerca performanța de a face acest lucru de mii de ori, diferența de execuție ar putea fi de câteva sute de milisecunde. Dar totuși, întrebarea rămâne: de ce ai fi?
Uneori, când folosim abstracțiuni masive precum jQuery, este ușor să uiți asta $ (“. File) este o funcție reală care rulează un pic bun de cod. De asemenea, trebuie remarcat faptul că aceste concepte se aplică JavaScript în general - nu doar jQuery.
Folosește cache tehnicile descrise mai sus pentru a scrie codul mai curat? pentru tine.
