Share
Pe măsură ce JavaScript se retrage încet din browser, au apărut mai multe instrumente care îmbunătățesc semnificativ robustețea JavaScript.
Un astfel de instrument este numit Underscore.js și asta este ceea ce vom privi astăzi. Să începem!
Deci, ce face exact Underscore?
Underscore este o bibliotecă de centură utilitară pentru JavaScript care oferă o mulțime de suport pentru programarea funcțională pe care v-ați aștepta în Prototype.js (sau Ruby), dar fără a extinde niciunul dintre obiectele încorporate în JavaScript.
Unul dintre lucrurile mai frumoase despre lucrul în Python sau Ruby sunt construcțiile fantastice de genul Hartă care fac viața mult mai ușoară. Versiunea curentă a JavaScript, din păcate, este destul de pură atunci când vine vorba de utilități de nivel scăzut.
După cum ați citit mai sus, Underscore.js este o minunată bibliotecă JavaScript care aduce într-o cantitate ridicolă de funcționalitate la doar 4kb.
"Ajunge destul de bine la bibliotecă", te pot auzi spunând. Ai dreptate! Să aruncăm o privire mai întâi la Underscore în acțiune înainte de a-mi relua sarcina.
Să presupunem că aveți o gamă aleatoare de scoruri de testare și că aveți nevoie de o listă a celor cu scorul de peste 90+. Ați scrie, de obicei, ceva de genul:
scorurile var = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; pentru (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (scoruri [i]); console.log (topScorers);
Este destul de simplu și chiar și cu optimizare, este destul de verbose pentru ceea ce încercăm să facem.
Să ne uităm la ceea ce putem realiza cu Underscore următor.
scorurile var = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (scoruri, funcții (punctaj) scor de întoarcere> scoreLimit;); console.log (topScorers);
Nu știu despre tine, dar am avut un nebun. E ceva incredibil de concis și care poate fi citit chiar acolo.
Ei bine, totul depinde de ce încerci să faci. Dacă utilizarea JavaScript-ului este limitată doar la jocul cu DOM, atunci răspunsul este în majoritate nu, deoarece jQuery face cea mai mare parte din ceea ce doriți să faceți.
da.
Pe de altă parte, dacă aveți de-a face cu cod non-DOM sau chiar complex, cred că MVC, codul frontal, Underscore este un avantaj absolut.
În timp ce o parte din funcționalitatea expusă de bibliotecă se transformă lent în specificațiile ECMA, nu este disponibilă în toate browserele și face ca codul tău să lucreze în browser încrucișat este un alt coșmar pe cont propriu. Underscore vă oferă un set frumos de abstracții care funcționează peste tot.
Și dacă sunteți o persoană orientată spre performanță, cum ar trebui să fie, Underscore revine la implementările native, dacă este disponibilă, pentru a vă asigura că performanța este cât mai optimă posibil.
Luați sursa aici, includeți-o în pagina dvs. și ești bine să plecați.
Dacă v-ați aștepta la un proces mare de înființare, veți fi foarte dezamăgit. Luați sursa aici, includeți-o în pagina dvs. și ești bine să plecați.
Underscore creează și expune toate funcționalitățile sale printr-un singur obiect, în sfera globală. Acest obiect este caracterul de subliniere titular, _.
Dacă vă întrebați, da, acest lucru este destul de similar cu modul în care jQuery funcționează cu simbolul dolar [$]. Și la fel ca jQuery, poți să reaprovizionați acest personaj în cazul în care vă confruntați cu conflicte. Sau dacă ești ca mine și ai o dragoste irațională pentru tilda.
În timp ce blurul oficial de marketing al bibliotecii afirmă că adaugă suport funcțional de programare, există într-adevăr un alt mod de a face lucrurile.
Să luăm codul nostru anterior ca exemplu:
scorurile var = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (scoruri, funcții (punctaj) scor de întoarcere> scoreLimit;); console.log (topScorers);
Această metodă de mai sus este abordarea funcțională sau procedurală. Puteți utiliza, de asemenea, o abordare mai directă, probabil mai evidentă, orientată spre obiect.
scorurile var = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _ (scoruri) .select (functie (scor) scor returnare> scoreLimit;); console.log (topScorers);
Nu există nici o cale reală "corectă" de a face lucrurile, dar rețineți că puteți lega metoda jQuery-esque cu metoda din urmă.
Underscore oferă mai mult de 60 de funcții care acoperă o serie de funcționalități. La baza lor, ele pot fi clasificate în grupuri de funcții care funcționează pe:
Să aruncăm o privire la ceea ce face fiecare și dacă este cazul unul sau două dintre preferatele mele din fiecare secțiune.
O colecție poate fi o matrice sau un obiect, o matrice asociată în JavaScript, dacă trebuie să fiu corect din punct de vedere semantic.
Underscore oferă o mulțime de metode care funcționează în colecții. Am văzut Selectați mai devreme. Iată câteva mai utile.
Să presupunem că aveți o matrice frumoasă care conține perechi de valori cheie și doriți să extrageți doar o anumită proprietate din fiecare. Cu Underscore, este un cinch.
var : nume: 'NetTuts', nișă: 'Web Development', name: 'WPTuts', nișă: 'WordPress', name: 'PSDTuts' 'AeTuts', nișă: 'After Effects']; var niches = _.pluck (Tuts, 'nișă'); console.log (nișe); // ["Dezvoltare Web", "WordPress", "PhotoShop", "After Effects"]
Utilizarea potroace este la fel de simplu ca și trecerea în obiectul țintă sau în matrice, precum și proprietatea pe care o alegem. Aici, eu doar extrag nișa pentru fiecare site.
Harta creează o matrice dintr-o colecție în care fiecare element poate fi mutat sau altfel schimbat printr-o funcție.
Să luăm exemplul anterior și să îl extindem puțin.
Accentsconagua
var : nume: 'NetTuts', nișă: 'Web Development', name: 'WPTuts', nișă: 'WordPress', name: 'PSDTuts' 'AeTuts', nișă: 'After Effects']; var nume = = (Tuts) .pluck ('nume'). hartă (funcție (valoare) valoare inversă + '+'); console.log (nume); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Deoarece am observat că numele lipsesc semnul plus la sfârșit, le adaug în matricea extrasă.
Nu vă limitați la concatenarea simplă aici. Esti liber sa modifici valoarea transferata in dorintele inimii tale.
toate este util dacă trebuie să verificați dacă fiecare valoare dintr-o colecție depășește anumite criterii. Pentru a verifica dacă un student a trecut în fiecare subiect, de exemplu.
var Scoruri = [95, 82, 98, 78, 65]; var hasPassed = _ (Scoruri) .all (funcție (valoare) valoarea returnată> 50;); console.log (hasPassed); // Adevărat
Underscore are o mulțime de funcții care funcționează exclusiv pe arrays, ceea ce este binevenit deoarece, în comparație cu alte limbi, JavaScript oferă câteva metode extrem de puține care se ocupă de matrice.
Această metodă analizează în mod esențial o matrice și elimină toate elementele duplicate care vă oferă numai elemente unice.
var uniqTest = _.uniq ([1,5,4,4,5,2,1,1,3,2,2,3,4,1]); console.log (uniqTest); // [1, 5, 4, 2, 3]
Acest lucru vine extrem de la îndemână atunci când parcurgeți seturi de date uriașe și trebuie să eliminați duplicatele. Rețineți că numai prima instanță a unui element este contorizată, astfel încât ordinea originală este păstrată.
O metodă extrem de utilă, care vă permite să creați o "gamă" sau o listă de numere. Să ne uităm la un exemplu foarte rapid.
var tens = _ranjamentul (0, 100, 10); console.log (zeci); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
Parametrii metodei sunt, în ordine, valoarea inițială, valoarea finală și valoarea pasului. Dacă vă întrebați, folosirea unei valori negative a pasului duce la un interval de decrementare.
Această metodă compară două matrice între ele și returnează lista de elemente care se găsesc în toate matricele date, adică o intersecție în teoria seturilor.
Să extindem exemplul anterior pentru a vedea cum funcționează acest lucru.
(0, 100, 10), optzeci (0, 100, 8), cinci (5, 100, 5); var common = intersecția (zeci, opt, cinci); console.log (comun); // [0, 40, 80]
Ușor, nu? Treceți doar în lista de tabele pentru a compara și Underscore face restul.
În plus față de destul de așteptat este
Iată câteva dintre preferatele mele.
Aveți un obiect masiv în care aveți nevoie doar de chei sau numai de valori? E atât de ușor cu Underscore.
var Tuts = NetTuts: "Dezvoltare Web", WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; butoanele var = _.keys (Tuts), values = _.values (Tuts); console.log (chei + valori); // NetTuts, WPTuts, PSDTuts, Dezvoltare AeTutsWeb, WordPress, PhotoShop, After Effects
Această metodă este destul de utilă atunci când trebuie să creați obiecte cu valori implicite atunci când nu le puteți folosi atunci când le creați.
var tuts = NetTuts: "Dezvoltare Web"; var defaults = NetTuts: "Dezvoltare Web", nișă: "Educație"; _.defaults (tuts, implicit); console.log (Tuts); // Obiect NetTuts = "Dezvoltare Web", nișă = "Educație"
Cât de repede se pare, Underscore are funcții care funcționează pe funcții. Cele mai multe funcții tind să fie destul de complicate pentru a explica aici, așa că vom arunca o privire la cele mai simple.
acest este o parte evazivă a JavaScript și tinde să lase o mulțime de dezvoltatori într-adevăr confuz. Această metodă încearcă să facă un pic mai ușor de abordat.
var o = salut: "Cum", f = functie (nume) return this.greeting + "" + nume; ; var greet = _bind (f, o); salut ( "Jess")
E un pic confuz, așa că stați cu mine aici. Funcțiile de legare vă permit, în principiu, să păstrați valoarea acest oriunde și oriunde se numește funcția.
Acest lucru este deosebit de util atunci când lucrați cu agenții de gestionare a evenimentelor acest este deturnat.
Și pentru a îndulci afacerea, Underscore oferă o mulțime de funcții de utilitate. De vreme ce suntem destul de târziu, să ne uităm la biggie.
Există deja o mulțime de soluții templante acolo, dar Underscore face ca soluția să merite un aspect fiind destul de mică în implementarea sa, în timp ce este destul de puternică.
Să aruncăm o privire la un exemplu rapid.
var data = site: 'NetTuts', template = 'Bun venit! Esti la <%= site %>„; var parsedTemplate = _.template (șablon, date); console.log (parsedTemplate); // Bine ati venit! Sunteți la NetTuts
În primul rând, vom crea datele pentru a popula șablonul urmat de șablonul în sine. În mod implicit, Underscore utilizează delimitatori de stil ERB, deși acest lucru este complet personalizabil.
Cu cei în loc, putem numi pur și simplu șablon trecând în șablonul nostru și datele. Stocăm rezultatul într-un șir separat pentru a fi utilizat mai târziu pentru a actualiza conținutul, după cum este necesar.
Rețineți că aceasta este o demonstrație extrem de simplă a templatirii lui Underscore. Puteți găsi orice cod JavaScript în interiorul șablonului folosind delimitatori. Când trebuie să repetați obiecte complexe, spuneți surse JSON, puteți să împerecheați funcțiile de colectare excelente ale Underscore pentru a crea șabloane rapid.
jQuery și Underscore merg mână în mână.
Nu, nu, ai greșit! Dacă nu, jQuery și Underscore se completează reciproc bine și merg mână în mână. Într-adevăr!
Vezi, jQuery face câteva lucruri foarte bine. Manipularea și animația DOM sunt printre cele mai importante. Nu se ocupă de nimic din nivelurile superioare sau inferioare. Dacă cadre ca Backbone sau Knockout se ocupă de problemele de nivel superior, Underscore abordează toate cele relativ goale de metal.
Pentru o perspectivă și mai mare, jQuery are puțin scop în afara browserului, deoarece cea mai mare parte a funcționalității sale se ocupă de DOM. Subverscore, pe de altă parte, pot fi utilizate în browser sau pe server fără probleme. De fapt, Underscore are cel mai mare număr de module de nod care depind de acesta.
Ei bine, asta e pentru ziua de azi. Având în vedere domeniul Underscore, abia am zgâriat suprafața aici. Asigurați-vă că ați verificat mai multe din bibliotecă și spuneți-mi dacă aveți întrebări în comentariile de mai jos. Vă mulțumesc foarte mult pentru lectură!
