Share
Omdat JavaScript langzaam uit de browser verdwijnt, zijn verschillende hulpprogramma's ontstaan die de robuustheid van JavaScript aanzienlijk verbeteren.
Eén zo'n tool heet Underscore.js en dat is wat we vandaag gaan bekijken. Laten we beginnen!
Dus wat doet Underscore precies?
Underscore is een hulpprogramma-bibliotheek voor JavaScript die veel functionele programmeerondersteuning biedt die u zou verwachten in Prototype.js (of Ruby), maar zonder uitbreiding van de ingebouwde JavaScript-objecten.
Een van de leukere dingen over werken in Python of Ruby zijn de mooie constructen zoals kaart dat maakt het leven een stuk eenvoudiger. De huidige versie van JavaScript is helaas vrij barebones als het gaat om low-level hulpprogramma's.
Zoals je hierboven al hebt gelezen, is Underscore.js een handige kleine JavaScript-bibliotheek die een belachelijke hoeveelheid functionaliteit met zich meebrengt op slechts 4 kb.
"Genoeg gekerm over de bibliotheek", kan ik je horen zeggen. Je hebt gelijk! Laten we eens kijken naar Underscore in actie voordat ik weer aan het kicken ben.
Laten we aannemen dat je een willekeurige reeks testscores hebt en dat je een lijst nodig hebt van mensen met 90+ scores. Normaal schrijf je zoiets als:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], score Limit = 90; voor (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (scores [i]); console.log (topScorers);
Het is vrij eenvoudig en zelfs met optimalisatie is het vrij uitgebreid voor wat we proberen te doen.
Laten we eens kijken naar wat we kunnen bereiken met Underscore next.
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], score Limit = 90; topScorers = _.select (scores, functie (score) return score> scoreLimit;); console.log (Topscorers);
Ik weet het niet van je, maar ik heb net een nerdgasm gehad. Dat is een aantal ongelooflijk beknopt en leesbare code daar.
Nou, het hangt allemaal af van wat je probeert te doen. Als uw gebruik van JavaScript zich beperkt tot alleen maar spelen met de DOM, is het antwoord meestal nee, omdat jQuery het meeste doet wat u zou willen doen.
Ja.
Aan de andere kant, als je te maken hebt met niet-DOM-code of zelfs complex, denk dan aan MVC, front-end code, Underscore is een absolute zegen.
Hoewel een deel van de functionaliteit die door de bibliotheek aan het licht komt langzaam zijn weg vindt naar de ECMA-specificaties, is deze niet beschikbaar in alle browsers en is het werken met een browser een andere nachtmerrie. Underscore biedt je een mooie set abstracties die overal werken.
En als u een prestatiegerichte persoon bent, zoals het hoort, valt Underscore terug op native implementaties, indien beschikbaar, om te zorgen dat de prestaties zo optimaal mogelijk zijn.
Pak gewoon de bron hier, voeg deze toe aan je pagina en je bent klaar om te gaan.
Als je een groot opzetproces verwachtte, zul je heel teleurgesteld zijn. Pak gewoon de bron hier, voeg deze toe aan je pagina en je bent klaar om te gaan.
Underscore maakt en stelt al haar functionaliteit beschikbaar via een enkel object, wereldwijd. Dit object is het titulaire onderstrepingsteken, _.
Als je je afvraagt, ja, dit is vrij gelijkaardig aan hoe jQuery werkt met het dollar [$] -symbool. En net als jQuery, kun je dit personage opnieuw toewijzen in het geval je tegen een conflict aanloopt. Of als je bent zoals ik en een irrationele liefde voor de tilde hebt.
Hoewel de officiële marketing-blurb voor de bibliotheek aangeeft dat het functionele programmeerondersteuning toevoegt, is er eigenlijk een andere manier om dingen te doen.
Laten we onze eerdere code als voorbeeld nemen:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], score Limit = 90; topScorers = _.select (scores, functie (score) return score> scoreLimit;); console.log (Topscorers);
Deze methode hierboven is de functionele of procedurele aanpak. Je kunt ook een meer rechtlijnige, waarschijnlijk duidelijker, objectgerichte benadering gebruiken.
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], score Limit = 90; topScorers = _ (scores) .select (functie (score) return score> scoreLimit;); console.log (Topscorers);
Er is geen echte 'juiste' manier om dingen te doen, maar onthoud dat je jQuery-esque method chaining kunt uitvoeren met de laatste methode.
Underscore biedt iets meer dan 60 functies die een aantal functionaliteiten omvatten. In de kern kunnen ze worden ingedeeld in groepen van functies die werken op:
Laten we eens kijken naar wat elk doet en, indien van toepassing, een of twee van mijn favorieten uit elke sectie.
Een verzameling kan een array of een object zijn, een associate array in JavaScript als ik semantisch correct wil zijn.
Underscore biedt veel methoden die op verzamelingen werken. We hebben de kiezen methode eerder. Hier zijn een paar meer ongelooflijk handige degenen.
Laten we zeggen dat u een mooie kleine array met sleutelwaardeparen hebt en dat u alleen een specifieke eigenschap uit elke reeks wilt halen. Met Underscore is het een makkie.
var Tuts = [name: 'NetTuts', niche: 'Web Development', name: 'WPTuts', niche: 'WordPress', name: 'PSDTuts', niche: 'PhotoShop', name: 'AeTuts', niche: 'After Effects']; var niches = _.pluck (Tuts, 'niche'); console.log (niches); // ["Webontwikkeling", "WordPress", "PhotoShop", "After Effects"]
Gebruik makend van plukken is net zo eenvoudig als het doorgeven van het doelobject of de array, alsook welke eigenschap moet worden gekozen. Hier haal ik alleen maar de niche uit voor elke site.
Map maakt een array uit een verzameling waarin elk element kan worden gemuteerd of op een andere manier via een functie kan worden gewijzigd.
Laten we het eerdere voorbeeld nemen en het een beetje uitbreiden.
Accentsconagua
var Tuts = [name: 'NetTuts', niche: 'Web Development', name: 'WPTuts', niche: 'WordPress', name: 'PSDTuts', niche: 'PhotoShop', name: 'AeTuts', niche: 'After Effects']; var names = _ (Tuts) .pluck ('name'). map (functie (waarde) retourwaarde + '+'); console.log (namen); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Omdat ik aan het einde de namen zag die het plusteken missen, voeg ik ze toe aan de uitgepakte array.
U bent hier niet beperkt tot eenvoudige aaneenschakeling. Je bent vrij om de doorgegeven waarde aan te passen aan de verlangens van je hart.
allemaal is handig als u wilt controleren of elke waarde in een verzameling voldoet aan een bepaald criterium. Om bijvoorbeeld te controleren of een student geslaagd is in elk onderwerp.
var Scores = [95, 82, 98, 78, 65]; var hasPassed = _ (Scores) .all (functie (waarde) retourwaarde> 50;); console.log (hasPassed); // waar
Underscore heeft een aantal functies die uitsluitend op arrays werken, wat zeer welkom is, omdat JavaScript, vergeleken met andere talen, erg weinig methoden biedt voor het maken van arrays.
Deze methode analyseert in principe een array en verwijdert alle dubbele elementen, waardoor u alleen unieke elementen krijgt.
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]
Dit komt vooral van pas bij het parseren van enorme datasets en het verwijderen van de duplicaten. Houd er rekening mee dat alleen het eerste exemplaar van een element wordt geteld, zodat de oorspronkelijke volgorde wordt bewaard.
Een uiterst handige methode waarmee u een 'bereik' of een lijst met nummers kunt maken. Laten we eens kijken naar een super snel voorbeeld.
var tens = _.range (0, 100, 10); console.log (tientallen); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
De parameters van de methode zijn, in volgorde, beginwaarde, eindwaarde en stapwaarde. Als je je afvraagt, leidt het gebruik van een negatieve stapwaarde tot een afnemend bereik.
Deze methode vergelijkt twee arrays met elkaar en retourneert de lijst met elementen die worden gevonden in alle doorgegeven arrays, dus een snijpunt in de settheorie..
Laten we het eerdere voorbeeld uitbreiden om te zien hoe dit werkt.
var tens = _.range (0, 100, 10), achten = _.range (0, 100, 8), fives = _.range (0, 100, 5); var common = _.intersection (tientallen, achten, vijf); console.log (vaak); // [0, 40, 80]
Makkelijk, toch? Je geeft gewoon de lijst met arrays door om te vergelijken en Underscore doet de rest.
In aanvulling op de redelijk verwacht is
Hier zijn een paar van mijn favorieten.
Heb je een enorm object waar je alleen de sleutels of alleen de waarden nodig hebt? Het is zo eenvoudig met Underscore.
var Tuts = NetTuts: 'Web Development', WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; var keys = _.keys (Tuts), values = _.values (Tuts); console.log (toetsen + waarden); // NetTuts, WPTuts, PSDTuts, AeTutsWeb Development, WordPress, PhotoShop, After Effects
Deze methode is best handig wanneer u objecten met verstandige standaardinstellingen moet maken wanneer u deze niet gebruikt bij het maken ervan.
var tuts = NetTuts: 'Web Development'; var defaults = NetTuts: 'Web Development', niche: 'Education'; _.defaults (tuts, defaults); console.log (tuts); // Object NetTuts = "Web Development", niche = "Education"
Hoe onfatsoenlijk het ook klinkt, Underscore heeft functies die werken op functies. De meeste functies zijn vrij ingewikkeld om hier uit te leggen, dus we zullen de eenvoudigste bekijken.
deze is een ongrijpbaar onderdeel van JavaScript en heeft de neiging om veel ontwikkelaars in de war te laten. Deze methode probeert het een beetje makkelijker aan te pakken.
var o = greeting: "Howdy", f = function (name) return this.greeting + "" + naam; ; var greet = _.bind (f, o); greet ( "Jess")
Het is een beetje verwarrend dus blijf hier bij mij. Met de bindfuncties kunt u in principe de waarde van behouden deze waar en wanneer de functie ook wordt genoemd.
Dit is met name handig wanneer u met event handlers werkt waar deze is gekaapt.
En om de deal verder te verfijnen, biedt Underscore een groot aantal hulpprogramma's. Omdat we redelijk uit de tijd zijn, laten we eens kijken naar de biggie.
Er zijn al een hoop sjabloonoplossingen beschikbaar, maar Underscore maakt de oplossing de moeite van het bekijken waard door vrij klein te zijn in de implementatie terwijl ze behoorlijk krachtig is.
Laten we een vluggertje bekijken.
var data = site: 'NetTuts', template = 'Welkom! Je bent er <%= site %>'; var parsedTemplate = _.template (sjabloon, gegevens); console.log (parsedTemplate); // Welkom! U bent bij NetTuts
Eerst maken we de gegevens om de sjabloon te vullen, gevolgd door de sjabloon zelf. Standaard gebruikt Underscore ERB-stijlscheidingstekens, hoewel dit volledig aanpasbaar is.
Met die op zijn plaats, kunnen we gewoon de sjabloon het doorgeven van onze sjabloon en de gegevens. We slaan het resultaat op in een aparte reeks om later te worden gebruikt om de inhoud bij te werken, indien nodig.
Houd in gedachten dat dit een uiterst eenvoudige demonstratie is van het sjabloneren van Underscore. U kunt elke JavaScript-code in de sjabloon gebruiken met behulp van de scheidingstekens. Wanneer u complexe objecten moet herhalen, bijvoorbeeld JSON-bronnen, kunt u koppelen aan de uitstekende verzamelfuncties van Underscore om snel sjablonen te maken.
jQuery en Underscore gaan hand in hand.
Nee, nee, je hebt het helemaal verkeerd! Als er iets is, vullen jQuery en Underscore elkaar goed aan en gaan ze hand in hand. Werkelijk!
Kijk, jQuery doet een paar dingen heel goed. DOM-manipulatie en -animatie zijn de belangrijkste daarvan. Het behandelt niets op het hogere of lagere niveau. Als frameworks zoals Backbone of Knockout omgaan met problemen van een hoger niveau, pakt Underscore alle relatief blote metalen aan.
Voor nog meer perspectief heeft jQuery weinig nut buiten de browser omdat het grootste deel van de functionaliteit met de DOM te maken heeft. Het onderstrepingsteken kan echter zonder problemen worden gebruikt op de browser of aan de serverzijde. In feite heeft Underscore het meeste aantal knooppuntmodules ervan afhankelijk.
Nou, dat is het ongeveer voor vandaag. Gezien het bereik van Underscore, hebben we hier nauwelijks de oppervlakte bekrast. Zorg ervoor dat u meer van de bibliotheek bekijkt en laat het me weten als u vragen hebt in de onderstaande opmerkingen. Heel erg bedankt voor het lezen!
