Share
Poiché JavaScript sta lentamente uscendo dal browser, sono emersi diversi strumenti che migliorano significativamente la robustezza di JavaScript.
Uno di questi strumenti si chiama Underscore.js e questo è quello che daremo un'occhiata oggi. Iniziamo!
Quindi cosa fa esattamente Underscore?
Underscore è una libreria di utility-belt per JavaScript che fornisce un sacco di supporto per la programmazione funzionale che ti aspetteresti in Prototype.js (o Ruby), ma senza estendere nessuno degli oggetti JavaScript incorporati.
Una delle cose più belle del lavorare in Python o Ruby sono i costrutti di fantasia come carta geografica che rendono la vita molto più facile. La versione attuale di JavaScript, purtroppo, è abbastanza scalfita quando si tratta di utilità di basso livello.
Come hai letto sopra, Underscore.js è una piccola libreria JavaScript che offre una ridicola quantità di funzionalità a soli 4kb.
"Basta parlare della biblioteca", posso sentirti dire. Hai ragione! Diamo un'occhiata a Underscore in azione prima di riprendere il mio japping.
Supponiamo che tu abbia una serie casuale di punteggi dei test e hai bisogno di un elenco di quelli con punteggio 90+. Di solito scrivi qualcosa del genere:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; per (i = 0; i<=scores.length; i++) if (scores[i]>scoreLimit) topScorers.push (punteggi [i]); console.log (topScorers);
È piuttosto semplice e anche con l'ottimizzazione, è abbastanza dettagliato per quello che stiamo cercando di fare.
Diamo un'occhiata a cosa possiamo ottenere con Underscore next.
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (punteggi, funzione (punteggio) punteggio di ritorno> punteggioLimit;); console.log (Marcatori);
Non so voi ma ho appena avuto un nerdgasm. Questo è incredibilmente conciso e codice leggibile proprio lì.
Bene, tutto dipende da cosa stai cercando di fare. Se il tuo uso di JavaScript è limitato a giocare semplicemente con il DOM, allora la risposta è in gran parte no dal momento che jQuery fa la maggior parte di ciò che vorresti fare.
sì.
D'altra parte, se hai a che fare con codici non DOM o anche complessi, pensa MVC, front end code, Underscore è un vantaggio assoluto.
Mentre alcune delle funzionalità esposte dalla libreria si stanno lentamente facendo strada nelle specifiche ECMA, non sono disponibili in tutti i browser e far funzionare il tuo codice in cross browser è un altro incubo a se stante. Underscore ti fornisce una bella serie di astrazioni che funzionano ovunque.
E se sei una persona orientata al rendimento, come dovresti essere, Underscore torna alle implementazioni native, se disponibili, per assicurarti che le prestazioni siano il più ottimali possibile.
Basta prendere la fonte qui, includerla nella tua pagina e sei a posto.
Se ti aspettavi un grosso processo di allestimento, sarai profondamente deluso. Basta prendere la fonte qui, includerla nella tua pagina e sei a posto.
Underscore crea ed espone tutte le sue funzionalità tramite un singolo oggetto, nell'ambito globale. Questo oggetto è il carattere di sottolineatura del titolo, _.
Se ti stai chiedendo, sì, questo è abbastanza simile a come jQuery funziona con il simbolo $ [$]. E proprio come jQuery, puoi rimappare questo personaggio in caso di conflitti. O se sei come me e hai un amore irrazionale per la tilde.
Mentre il blurb ufficiale di marketing per la biblioteca afferma che aggiunge supporto alla programmazione funzionale, c'è in realtà un altro modo di fare le cose.
Prendiamo il nostro codice precedente come esempio:
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _.select (punteggi, funzione (punteggio) punteggio di ritorno> punteggioLimit;); console.log (Marcatori);
Questo metodo sopra è l'approccio funzionale o procedurale. Puoi anche usare un approccio orientato agli oggetti più diretto, probabilmente più evidente.
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90; topScorers = _ (scores) .select (function (score) return score> scoreLimit;); console.log (Marcatori);
Non esiste un vero modo "giusto" di fare le cose, ma tieni presente che puoi concatenare il metodo jQuery-esque con quest'ultimo metodo.
Underscore fornisce un po 'più di 60 funzioni che abbracciano un certo numero di funzionalità. Nel loro nucleo, possono essere classificati in gruppi di funzioni che operano su:
Diamo un'occhiata a ciò che ciascuno fa e, se applicabile, uno o due dei miei preferiti da ciascuna sezione.
Una raccolta può essere un array o un oggetto, un array associato in JavaScript se devo essere semanticamente corretto.
Underscore fornisce molti metodi che operano sulle raccolte. Abbiamo visto il selezionare metodo prima. Qui ci sono alcuni più incredibilmente utili.
Supponiamo che tu abbia un piccolo array contenente coppie di valori chiave e desideri estrarre solo una proprietà specifica da ciascuna. Con Underscore, è un gioco da ragazzi.
var Tuts = [nome: 'NetTuts', nicchia: 'Sviluppo Web', nome: 'WPTuts', nicchia: 'WordPress', nome: 'PSDTuts', nicchia: 'PhotoShop', nome: 'AeTuts', di nicchia: 'After Effects']; var niches = _.pluck (Tuts, 'niche'); console.log (nicchie); // ["Sviluppo Web", "WordPress", "PhotoShop", "After Effects"]
utilizzando coraggio è semplicemente come passare nell'oggetto o nell'array di destinazione, nonché quale proprietà scegliere. Qui, sto semplicemente estraendo la nicchia per ogni sito.
Map crea una matrice da una collezione in cui ogni elemento può essere mutato o altrimenti modificato attraverso una funzione.
Prendiamo l'esempio precedente e lo estendiamo un po '.
Accentsconagua
var Tuts = [nome: 'NetTuts', nicchia: 'Sviluppo Web', nome: 'WPTuts', nicchia: 'WordPress', nome: 'PSDTuts', nicchia: 'PhotoShop', nome: 'AeTuts', di nicchia: 'After Effects']; var names = _ (Tuts) .pluck ('name'). map (function (value) return value + '+'); console.log (nomi); // ["NetTuts +", "WPTuts +", "PSDTuts +", "AeTuts +"] Poiché ho notato che i nomi mancano del segno più alla fine, li sto aggiungendo nell'array estratto.
Non sei limitato alla semplice concatenazione qui. Sei libero di modificare il valore passato per i desideri del tuo cuore.
tutti è utile se è necessario controllare ogni valore in una raccolta passa un determinato criterio. Per verificare se uno studente è passato in ogni materia, per esempio.
var Scores = [95, 82, 98, 78, 65]; var hasPassed = _ (Scores) .all (function (value) return value> 50;); console.log (hasPassed); // vero
Underscore ha un sacco di funzioni che funzionano esclusivamente su array, il che è molto gradito dato che, rispetto ad altri linguaggi, JavaScript offre pochissimi metodi che trattano gli array.
Questo metodo fondamentalmente analizza un array e rimuove tutti gli elementi duplicati fornendo solo elementi univoci.
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]
Questo è estremamente utile quando stai analizzando enormi set di dati e devi eliminare i duplicati. Tieni presente che viene conteggiata solo la prima istanza di un elemento, in modo che l'ordine originale venga mantenuto.
Un metodo estremamente utile che ti consente di creare un 'intervallo' o un elenco di numeri. Diamo un'occhiata a un esempio super veloce.
var tens = _.range (0, 100, 10); console.log (decine); // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
I parametri del metodo sono, in ordine, valore iniziale, valore finale e valore di passo. Se ti stai chiedendo, l'uso di un valore di passo negativo porta a un intervallo decrescente.
Questo metodo confronta due array tra loro e restituisce l'elenco di elementi che si trovano in tutti gli array passati, vale a dire un'intersezione nella teoria degli insiemi.
Estendiamo l'esempio precedente per vedere come funziona.
var tens = _.range (0, 100, 10), eights = _.range (0, 100, 8), fives = _.range (0, 100, 5); var common = _.intersection (decine, otto, cinque); console.log (comune); // [0, 40, 80]
Facile, giusto? Basta passare nella lista degli array da confrontare e Underscore fa il resto.
Oltre alle abbastanza prevedibili è
Ecco alcuni dei miei preferiti.
Hai un oggetto enorme dove hai bisogno solo delle chiavi o solo dei valori? È così facile con Underscore.
var Tuts = NetTuts: 'Sviluppo Web', WPTuts: 'WordPress', PSDTuts: 'PhotoShop', AeTuts: 'After Effects'; var keys = _.keys (Tuts), values = _.values (Tuts); console.log (chiavi + valori); // NetTuts, WPTuts, PSDTuts, AeTutsWeb Development, WordPress, PhotoShop, After Effects
Questo metodo è molto utile quando è necessario creare oggetti con valori predefiniti sensibili quando non è possibile utilizzarli durante la creazione.
var tuts = NetTuts: 'Sviluppo Web'; var defaults = NetTuts: 'Sviluppo Web', nicchia: 'Istruzione'; _.defaults (tuts, defaults); console.log (Tuts); // Object NetTuts = "Sviluppo Web", nicchia = "Istruzione"
Per quanto possa sembrare fastidioso, Underscore ha funzioni che funzionano sulle funzioni. Molte delle funzioni tendono a essere abbastanza complicate da spiegare qui, quindi daremo un'occhiata al più semplice.
Questo è una parte elusiva di JavaScript e tende a lasciare un sacco di sviluppatori davvero confusi. Questo metodo cerca di renderlo un po 'più facile da affrontare.
var o = greeting: "Howdy", f = function (name) return this.greeting + "" + name; ; var greet = _.bind (f, o); saluto ( "Jess")
È un po 'confuso quindi resta con me qui. Le funzioni di bind ti consentono fondamentalmente di mantenere il valore di Questo quando e dove viene chiamata la funzione.
Questo è particolarmente utile quando si lavora con gestori di eventi dove Questo è dirottato.
E per addolcire ulteriormente l'accordo, Underscore offre un sacco di funzioni di utilità. Dal momento che siamo abbastanza fuori tempo, guardiamo solo il biggie.
Esistono già un sacco di soluzioni per i modelli, ma Underscore rende la sua soluzione degna di essere considerata abbastanza piccola nella sua implementazione pur essendo abbastanza potente.
Diamo un'occhiata a un esempio veloce.
var data = site: 'NetTuts', template = 'Benvenuto! Sei a <%= site %>'; var parsedTemplate = _.template (template, data); console.log (parsedTemplate); // Benvenuto! Sei su NetTuts
Per prima cosa, creiamo i dati per popolare il modello seguito dal modello stesso. Per impostazione predefinita, Underscore utilizza delimitatori di stile ERB sebbene sia completamente personalizzabile.
Con quelli in atto, possiamo semplicemente chiamare il modello passando il nostro modello e i dati. Archiviamo il risultato in una stringa separata da utilizzare successivamente per aggiornare il contenuto, in base alle esigenze.
Tieni presente che questa è una dimostrazione estremamente semplice dei modelli di Underscore. Puoi trovare l'uso di qualsiasi codice JavaScript all'interno del modello usando il Delimitatori. Quando devi eseguire iterazioni su oggetti complessi, ad esempio fonti JSON, puoi abbinare le eccellenti funzioni di raccolta di Underscore per creare rapidamente i modelli.
jQuery e Underscore vanno di pari passo.
No, no, hai sbagliato tutto! Se mai, jQuery e Underscore si completano a vicenda e vanno di pari passo. Veramente!
Vedi, jQuery fa alcune cose estremamente bene. La manipolazione e l'animazione del DOM sono tra i principali. Non si occupa di nulla ai livelli più alti o più bassi. Se framework come Backbone o Knockout affrontano i problemi di livello più elevato, Underscore affronta tutti quelli relativamente metal.
Per una prospettiva ancora più ampia, jQuery ha poco scopo al di fuori del browser poiché la maggior parte delle sue funzionalità riguarda il DOM. Underscore, d'altra parte, può essere utilizzato sul browser o sul lato server senza problemi. Infatti, Underscore ha il maggior numero di moduli Node che dipendono da esso.
Bene, questo è tutto per oggi. Considerando lo scopo di Underscore, abbiamo appena scalfito la superficie qui. Assicurati di controllare più della biblioteca e fammi sapere se hai domande nei commenti qui sotto. Grazie mille per la lettura!
