Share
Siden JavaScript beveger seg langsomt ut av nettleseren, har det kommet flere verktøy som forbedrer JavaScripts robusthet betydelig.
Et slikt verktøy kalles Underscore.js, og det er det vi skal se på i dag. La oss komme i gang!
Så hva gjør Underscore nøyaktig?
Underscore er et verktøybelt bibliotek for JavaScript som gir mye funksjonell programmeringsstøtte som du forventer i Prototype.js (eller Ruby), men uten å utvide noen av de innebygde JavaScript-objektene.
En av de finere tingene om å jobbe i Python eller Ruby er de fancy konstruksjonene som kart som gjør livet enklere. Den nåværende versjonen av JavaScript, dessverre, er ganske barebones når det gjelder lavt nivå verktøy.
Som du leser over, er Underscore.js et nifty lite JavaScript-bibliotek som bringer inn en latterlig mengde funksjonalitet på bare 4kb.
"Nok å snakke om biblioteket", jeg kan høre deg si. Du har rett! La oss ta en titt på Underscore i action først før jeg fortsetter min yapping.
La oss anta at du har et tilfeldig utvalg av testresultater, og du trenger en liste over dem med 90+ poeng. Du vil vanligvis skrive opp noe slikt:
var score = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], toppScorers = [], scoreLimit = 90; for (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (score [i]); console.log (topScorers);
Det er ganske enkelt og selv med optimalisering, det er ganske ordentlig for det vi prøver å gjøre.
La oss se på hva vi kan oppnå med Underscore neste.
var score = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], toppScorers = [], scoreLimit = 90; topScorers = _.select (score, funksjon (score) retur score> scoreLimit;); console.log (topScorers);
Jeg vet ikke om deg, men jeg hadde bare en nerdgasm. Det er noe utrolig kortfattet og lesbar kode der.
Vel, alt avhenger av hva du prøver å gjøre. Hvis din bruk av JavaScript er begrenset til bare å leke med DOM, er svaret stort sett ikke siden jQuery gjør det meste av det du vil gjøre.
Ja.
På den annen side, hvis du har å gjøre med ikke-DOM-kode eller kompleks, tenk MVC, front-end-kode, Underscore, en absolutt boon.
Mens noen av funksjonaliteten utsatt av biblioteket sakte tar seg inn i ECMA-spesifikasjonene, er den ikke tilgjengelig i alle nettlesere, og kodenes arbeid er kryssbrowser. Det er et annet mareritt alene. Underscore gir deg et fint sett av abstraksjoner som fungerer overalt.
Og hvis du er en prestasjonsorientert person, faller Underscore tilbake til innfødte implementeringer, hvis tilgjengelig, for å sikre at ytelsen er så optimal som mulig..
Bare ta tak i kilden her, ta den med på siden din, og du er god til å gå.
Hvis du forventet en stor oppstartsprosess, vil du bli svært skuffet. Bare ta tak i kilden her, ta den med på siden din, og du er god til å gå.
Underscore oppretter og avslører all dens funksjonalitet via et enkelt objekt, i global omfang. Dette objektet er titulært understrekings tegn, _.
Hvis du lurer på, ja, dette ligner ganske godt hvordan jQuery fungerer med dollar [$] symbolet. Og akkurat som jQuery, kan du omforme denne karakteren hvis du kommer inn i konflikter. Eller hvis du er som meg og har en irrasjonell kjærlighet til tilde.
Mens den offisielle markedsføringsbloggen for biblioteket sier at den legger til funksjonell programmeringsstøtte, er det faktisk en annen måte å gjøre ting på.
La oss ta vår tidligere kode som et eksempel:
var score = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], toppScorers = [], scoreLimit = 90; topScorers = _.select (score, funksjon (score) retur score> scoreLimit;); console.log (topScorers);
Denne metoden ovenfor er funksjonell eller prosessorisk tilnærming. Du kan også bruke en mer rettferdig, sannsynligvis mer åpenbar, objektorientert tilnærming.
var score = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], toppScorers = [], scoreLimit = 90; topScorers = _ (score) .select (funksjon (score) retur score> scoreLimit;); console.log (topScorers);
Det er ingen ekte 'riktig' måte å gjøre ting på, men husk at du kan jQuery-esque metodekjede med sistnevnte metode.
Underscore gir litt mer enn 60 funksjoner som spenner over en rekke funksjoner. Kjernen kan de klassifiseres i grupper av funksjoner som opererer på:
La oss ta en titt på hva hver gjør og hvis det er relevant, en eller to av mine favoritter fra hver seksjon.
En samling kan enten være en matrise eller et objekt, en tilknyttet matrise i JavaScript hvis jeg skal være semantisk korrekt.
Underscore gir mange metoder som opererer på samlinger. Vi så å velge metode tidligere. Her er noen flere utrolig nyttige.
La oss si at du har et fint lite utvalg som inneholder nøkkelverdier, og du vil bare trekke ut en bestemt egenskap fra hver. Med Underscore er det en cinch.
Var Tuts = [navn: 'NetTuts', nisje: 'Web Development', navn: 'WPTuts', nisje: 'WordPress', navn: 'PSDTuts', nisje: 'PhotoShop', navn: 'AeTuts', nisje: 'After Effects']; var niches = _.pluck (Tuts, 'nisje'); console.log (nisjer); // ["Webutvikling", "WordPress", "PhotoShop", "After Effects"]
Ved hjelp av plukke er like enkelt som å passere i målobjektet eller -arrangementet, samt hvilken egenskap som skal utelukkes. Her utvider jeg bare nisje for hvert nettsted.
Kart oppretter en matrise fra en samling hvor hvert element kan bli mutert eller på annen måte endret gjennom en funksjon.
La oss ta det tidligere eksemplet og utvide det litt.
Accentsconagua
Var Tuts = [navn: 'NetTuts', nisje: 'Web Development', navn: 'WPTuts', nisje: 'WordPress', navn: 'PSDTuts', nisje: 'PhotoShop', navn: 'AeTuts', nisje: 'After Effects']; varnavn = _ (Tuts) .pluck ('navn'). kart (funksjon (verdi) returverdi + '+'); console.log (navn); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Siden jeg la merke til at navnene manglet plustegnet på slutten, legger jeg dem i det ekstraherte arrayet.
Du er ikke begrenset til enkel sammenkobling her. Du er fri til å endre den bestått verdien til hjertets ønsker.
alle er nyttig hvis du må sjekke hver verdi i en samling, passerer et bestemt kriterium. For å kontrollere om en student har bestått i hvert emne, for eksempel.
Var Scores = [95, 82, 98, 78, 65]; var hasPassed = _ (Scores) .all (funksjon (verdi) returverdi> 50;); console.log (hasPassed); // true
Underscore har en rekke funksjoner som bare fungerer på arrays som er svært velkommen siden, i forhold til andre språk, gir JavaScript svært få metoder som omhandler arrayer.
Denne metoden analyserer i utgangspunktet en matrise og fjerner alle dupliserte elementer som gir deg bare unike elementer.
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]
Dette kommer veldig praktisk når du analyserer store datasett og trenger å luke ut duplikatene. Husk at bare første forekomst av et element tælles slik at den opprinnelige bestillingen holdes.
En ekstremt praktisk metode som lar deg lage et "utvalg" eller en liste over tall. La oss se på et super raskt eksempel.
var tiene = _.range (0, 100, 10); console.log (tiere); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
Metodens parametere er, i rekkefølge, startverdi, sluttverdien og trinnverdien. Hvis du lurer på, kan du bruke en negativ trinnverdi til et dekrementeringsområde.
Denne metoden sammenligner to arrays til hverandre og returnerer listen over elementer som er funnet i alle de gjennomførte arrays, dvs. et skjæringspunkt i settteori.
La oss forlenge det tidligere eksemplet for å se hvordan dette fungerer.
var tiene = _.range (0, 100, 10), eights = _.range (0, 100, 8), fives = _.range (0, 100, 5); var vanlig = _.interseksjon (tiere, åtter, fiver); console.log (felles); // [0, 40, 80]
Enkelt, ikke sant? Du passerer bare i listen over arrays for å sammenligne og Underscore gjør resten.
I tillegg til de ganske forventede er
Her er noen av mine favoritter.
Har du et massivt objekt hvor du bare trenger nøklene eller bare verdiene? Det er så darn enkelt med Underscore.
var Tuts = NetTuts: 'Webutvikling', WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; var keys = _.keys (Tuts), values = _.values (Tuts); console.log (nøkler + verdier); // NetTuts, WPTuts, PSDTuts, AeTutsWeb Development, WordPress, PhotoShop, After Effects
Denne metoden er ganske nyttig når du må opprette objekter med fornuftige standardverdier når man ikke kan brukes når du lager den.
var tuts = NetTuts: 'Webutvikling'; var standard = NetTuts: 'Webutvikling', nisje: 'Utdanning'; _.defaults (tuts, standard); console.log (tuts); // Objekt NetTuts = "Webutvikling", nisje = "Utdanning"
Så uklart som det høres, har Underscore funksjoner som fungerer på funksjoner. De fleste funksjonene pleier å være ganske kompliserte å forklare her, så vi tar en titt på det enkleste.
dette er en unnvikende del av JavaScript og har en tendens til å forlate mange utviklere virkelig forvirret. Denne metoden søker å gjøre det litt enklere å takle.
var o = hilsen: "Howdy", f = funksjon (navn) return this.greeting + "" + name; ; var greet = _.bind (f, o); ønske ( "Jess")
Det er litt forvirrende, så vær med meg her. Bindingsfunksjonene lar deg i utgangspunktet holde verdien av dette når og hvor funksjonen heter.
Dette er spesielt nyttig når du jobber med hendelseshåndterere hvor dette er kapret.
Og for ytterligere å suge avtalen, gir Underscore massevis av bruksfunksjoner. Siden vi er ganske ute av tid, la oss bare se på biggie.
Det er allerede massevis av templerende løsninger der ute, men Underscore gjør at løsningen er verdt en titt ved å være ganske liten i implementeringen samtidig som den er ganske kraftig.
La oss ta en titt på et raskt eksempel.
var data = nettsted: 'NetTuts', mal = 'Velkommen! Du er på <%= site %>'; var parsedTemplate = _.template (template, data); console.log (parsedTemplate); // Velkommen! Du er hos NetTuts
Først oppretter vi dataene for å fylle ut malen etterfulgt av selve malen. Som standard bruker Underscore ERB-stilavgrensere, selv om dette er helt tilpassbart.
Med de på plass, kan vi bare ringe mal passerer i vår mal og dataene. Vi lagrer resultatet i en separat streng som skal brukes senere for å oppdatere innhold, etter behov.
Husk at dette er en ekstremt enkel demonstrasjon av Underscore's templating. Du kan finne bruk av noen JavaScript-kode i malen ved hjelp av skilletegn. Når du trenger å iterere over komplekse objekter, sier JSON-kilder, kan du koble sammen med Underscores utmerkede samlingsfunksjoner for å lage maler raskt.
jQuery og Underscore går hånd i hånd.
Nei, nei, du har det galt! Hvis noe, jQuery og Underscore utfyller hverandre godt og går hånd i hånd. Egentlig!
Se, jQuery gjør noen ting veldig bra. DOM manipulasjon og animasjon er sjef blant dem. Det handler ikke om noe i høyere eller lavere nivåer. Hvis rammebetingelser som Backbone eller Knockout omhandler problemene på høyere nivå, takler Underscore alle de relativt blanke metallene.
For enda mer perspektiv har jQuery lite formål utenfor nettleseren, da hoveddelen av funksjonaliteten omhandler DOM. Underscore, derimot, kan brukes på nettleseren eller på server siden uten problemer. Faktisk har Underscore det meste antall Node-moduler avhengig av det.
Vel, det handler om det for i dag. Med tanke på omfanget av Underscore, har vi knapt riper overflaten her. Pass på å sjekke ut flere av biblioteket og gi meg beskjed hvis du har spørsmål i kommentarene nedenfor. Takk så mye for å lese!
