Share
Non ci sono due modi per farlo: il settore dello sviluppo web può essere incredibilmente difficile. È uno che ci impone di educarci continuamente durante le nostre carriere. Prenditi qualche anno di pausa e, all'improvviso, ti ritroverai sepolto da nuovi quadri, strumenti, best practice e pre-elaborazione. È vero, bimbi, se vuoi diventare uno sviluppatore web, è meglio che tu stia bene con l'idea che la tua istruzione non finirà mai (e non dovresti volerlo).
CoffeeScript.org dovrebbe essere la tua prima tappa, quando impari CoffeeScript. La sua documentazione è fantastica. Una volta che riconosciamo che una certa percentuale di ogni settimana dovrebbe essere spesa per mettere a punto le nostre capacità e apprendere nuove cose, determinare cosa, in particolare, investire il nostro tempo in diventa incredibilmente importante. Apparentemente ogni giorno, nuove librerie o strumenti vengono rilasciati al pubblico. Ma questo non significa che dovremmo mettere al vento cautela (e tempo) e abbracciarli tutti; Affatto. Certamente mantenere una mente curiosa, ma un sano livello di scetticismo è fondamentale.
Inevitabilmente, però, alcuni strumenti salgono rapidamente in cima alla lista "nuova e brillante".
Questi sono i tipi che hanno il potenziale per ridefinire il modo in cui costruiamo il web. jQuery ha ridefinito il modo in cui interrogiamo e lavoriamo con il DOM. Backbone.js aiuta gli sviluppatori a trasformare il loro codice spaghetti in moduli ben strutturati e manutenibili. E, forse, CoffeeScript reinventerà il modo in cui scriviamo fisicamente il nostro JavaScript.
C'è solo un problema: CoffeeScript non aggiunge nulla di nuovo al linguaggio JavaScript; offre semplicemente una sintassi migliorata (molti dire drasticamente migliorata), che viene infine compilata in JavaScript regolare. Quindi il nostro dilemma è: in un ambiente che già ci impone di imparare innumerevoli linguaggi, tecniche e schemi, vale davvero la pena investire nel tempo per imparare un altro preprocessore? Bene, mentre la risposta a questa domanda può certamente essere discussa, secondo l'opinione di chi scrive, dovresti assolutamente scavare!
È possibile che questo sia il primo che hai sentito di CoffeeScript. Se è così, non preoccuparti; solo ora sta iniziando a prendere veramente piede nella comunità di sviluppo.
Al suo interno, CoffeeScript, creato da Jeremy Ashkenas, trasforma ciò che alcuni chiamerebbero "brutto JavaScript" in codice pulito e succinto. Non estende la funzionalità del linguaggio JavaScript; si limita a sovrapporre una sintassi più bella.
Il modo migliore per dimostrare ciò che offre CoffeeScript è fare una passeggiata attraverso la sintassi.
La scheda "Prova CoffeeScript" di CoffeeScript.org offre una compilazione in tempo reale; è un modo eccellente per giocare con la sintassi.) Se desideri semplicemente giocare con la sintassi, visita CoffeeScript.org e fai clic sulla scheda "Prova CoffeeScript". D'altra parte, se vuoi installare localmente CoffeeScript, assicurati di avere copie aggiornate sia di Node.js che di Npm (Node Package Manager) installate sul tuo sistema. Non preoccuparti; è facile.
Successivamente, CoffeeScript può essere installato dalla riga di comando:
npm install -g coffee-script
Questo è tutto! Sei pronto per partire. A orologio un file, script.coffee, e compilarlo a script.js ogni volta che il file viene salvato, all'interno della riga di comando, vai alla root del progetto e digita:
caffè - orologio - script script.coffee
Inoltre, molti editor, come TextMate e Sublime Text 2, offrono pacchetti che trasformano questo processo di costruzione in un semplice colpo di chiave. Come opzione alternativa, fai riferimento alle app, come LiveReload e CodeKit, che gestiranno automaticamente l'attività "guarda e compila" automaticamente.
LiveReload automatizza il processo di visualizzazione e compilazione dei file CoffeeScript.) Considera il seguente frammento di codice:
var foo = 'bar'; var bar = 'baz';
In CoffeeScript, var non dovrebbe mai essere usato; infatti, il motore genera un errore se si tenta di farlo. Invece, tutte le variabili vengono automaticamente dichiarate nell'ambito corrente, il che significa che non dobbiamo più preoccuparci di creare accidentalmente variabili globali brutte.
Il codice sopra può essere riscritto come:
foo = 'bar' bar = 'baz'
Quando il codice viene infine compilato su JavaScript regolare, entrambi i nomi delle variabili verranno dichiarati nella parte superiore dell'ambito della funzione e quindi assegnati di conseguenza, in questo modo:
var bar, foo; foo = 'bar'; bar = 'baz';
Molti sviluppatori di JavaScript odiano il fatto che tutte le espressioni dovrebbero terminare con un punto e virgola.
var foo = 'bar';
Tecnicamente, scoprirai che, frequentemente, puoi farla franca lasciando il punto e virgola; ma, nondimeno, ci sono trucchi coinvolti in questo approccio, ed è stata ritenuta una best practice includerla sempre per la massima sicurezza.
In CoffeeScript, tuttavia, possiamo salutarli per sempre. Pertanto, lo snippet di codice precedente può essere modificato in:
foo = 'bar'
Prendendo ulteriori spunti da linguaggi come Ruby, in CoffeeScript, anche la parentesi può essere spesso omessa. Questo trasforma il JavaScript tradizionale, come ad esempio:
if (guess === 10) result = 'correct';
in:
se indovina == 10 risultato = 'corretto'
Ancora meglio, possiamo essere più sintetici utilizzando un modificatore di istruzioni:
risultato = 'corretto' se l'ipotesi == 10
Molto più pulito e leggibile, eh? "Impostato risultato per "correggere" se il indovina variabile è uguale a 10. "Eccellente!
Si prega di notare che CoffeeScript compila tutto
==nella versione rigorosa di uguaglianza,===, come raccomandato da strumenti come JS Lint.
Scoprirai rapidamente che, in CoffeeScript, lo stesso blocco di codice può essere riscritto in vari modi. Sebbene tu sia libero di ignorarli, gli alias consentono ulteriori confronti umani leggibili. I seguenti raggruppamenti sono identici sia nella funzionalità che nella compilazione.
// equality launch == 'go' launch è 'go' // disuguaglianza launch! = 'go' launch isnt 'go' // non restituisce false if! goForFlight restituisce false se non goForFlight restituisce false a meno che goForFlight // true return true return on return yes // false return false return off return no // e goForFlight && launch () goForFlight e launch () // o goForFlight || preparare () goForFlight o preparare ()
Le funzioni sono un'area chiave in cui la sintassi è notevolmente diversa da JavaScript. Una funzione tradizionale che determina se è giorno di paga o venerdì potrebbe essere simile a:
var payDay = function () return new Date (). getDay () === 5; // è venerdì?
Nel tentativo di ripulire la confusione, con CoffeeScript, questa funzione può essere riscritta come:
payday = -> new Date (). getDay () == 5
In alternativa, possiamo posizionare l'intero bit di codice su una singola riga.
payday = -> new Date (). getDay () == 5
Ci sono due cose fondamentali che vale la pena notare qui:
Accentsconagua
funzione() è stato sostituito con ->.ritorno parola chiave può essere rimosso in questo caso particolare.Qualsiasi argomento applicabile dovrebbe essere posto tra parentesi, prima del ->. Forse il giorno di paga è giovedì; se è così, la funzione può essere modificata per essere più flessibile.
payday = (giorno) -> nuova data (). getDay () == giorno
Ma, cosa succede se vogliamo assegnare un giorno di paga predefinito di venerdì (o 5)? Nel normale JavaScript, probabilmente faremo:
var payday = funzione (giorno) giorno || (giorno = 5); return new Date (). getDay () === giorno;
Con CoffeeScript, d'altra parte, possiamo accorciarlo notevolmente.
payDay = (day = 5) -> new Date (). getDay () == giorno
elegante!
Un tipico oggetto JavaScript può essere ripulito considerevolmente in CoffeeScript. Considera quanto segue:
var person = legs: 2, hands: 2, fingers: 10
CoffeeScript ci consente di rimuovere il var parola chiave, così come le parentesi graffe e le virgole. Su una singola riga, tuttavia, le virgole continuano ad essere richieste.
persona = gambe: 2, mani: 2, dita: 10
Tuttavia, se posizioniamo ciascuna proprietà sulla sua stessa riga, possono essere omesse. Lo stesso vale per gli array.
persona = gambe: 2 mani: 2 dita: 10
Importante: poiché CoffeeScript è dipendente dallo spazio bianco, anche una singola riga rientrata in modo errato può cambiare drasticamente il modo in cui il codice viene compilato in JavaScript.
Comprensione ci consente di trasformare facilmente dieci linee di codice in pochi. È essenzialmente un modo per creare espressioni per iterare su un set fornito di elementi in un array o oggetto.
Ad esempio, piuttosto che usare il tipico per dichiarazione - e il "caching" che va avanti con l'iterazione su un array - possiamo invece usare per dentro.
Immaginiamo di dover eseguire un'iterazione su una serie di caratteri. Con JavaScript tradizionale, potremmo fare:
var characters = ['Marty', 'Doc', 'Biff']; per (var i = 0, len = characters.length; i < len; i++ ) console.log("Get %s to the time machine", characters[i]); Non è certamente carino; ma, se usiamo invece CoffeeScript, può essere bello.
characters = ['Marty', 'Doc', 'Biff'] per persona nei caratteri console.log "Ottieni% s alla macchina del tempo", persona
Non è bello scrivere? Sicuramente, non posso essere l'unico!
Come scoprirai a breve, possiamo anche usare l'interpolazione delle stringhe per migliorare ulteriormente il codice, ma sto andando avanti da solo.
C'è un problema, però: abbiamo inavvertitamente diretto Biff sulla macchina del tempo, che non è una buona idea. Modifichiamo il codice per specificare che deve solo registrare la stringa nella console a condizione che la persona corrente nell'array non lo sia Biff. In CoffeeScript, se sfruttiamo i filtri, è un gioco da ragazzi.
characters = ['Marty', 'Doc', 'Biff'] per persona nei personaggi quando la persona non è "Biff" console.log "Ottieni% s alla macchina del tempo", persona
Sì; il rimedio richiedeva un totale di quattro parole leggibili dall'uomo.
Ora, se lo desideriamo, possiamo rendere questi loop più leggibili usando la comprensione delle liste. Per scorrere attraverso il personaggi array e registrare il nome di ciascuna persona nella console:
console.log persona per persona in caratteri
Oppure, come altro esempio, per recuperare tutti i tag di ancoraggio dalla pagina (usando jQuery carta geografica metodo), immagazzina ogni ancora href valore all'interno di una matrice, e infine loop attraverso quella matrice, e registrare i valori nella console, con JavaScript regolare, faremmo:
var links = $ ('a'). map (function () return this.href;); console.log (links.join (',')); Con CoffeeScript, tuttavia, abbiamo scelte migliori:
console.log (link per il collegamento in $ ('a'). map -> @href) .join ',' Come ultimo esempio, cosa accadrebbe se avessimo una serie di oggetti persona:
people = [nome: 'Jeffrey' età: 27, nome: 'John' età: 13, nome: 'Jan' età: 42]
Il nostro compito è creare un nuovo array, chiamato di età, e renderlo uguale a un elenco di soli oggetti, in cui l'età della persona è di 21 anni o più. Di nuovo, con il normale, vanilla JavaScript, potremmo fare:
var ofAge = []; per (var i = 0, len = people.length; i < len; i++ ) if ( people[i].age >= 21) ofAge.push (people [i]);
Sì, è abbastanza dettagliato per un compito così semplice. Con CoffeeScript, ridurlo a una singola riga, usando la comprensione.
ofAge = (p per p nelle persone quando p.age> = 21)
Bam! Racchiudendo tutto ciò che avviene dopo il segno di uguale tra parentesi, specifichiamo che il di età la variabile dovrebbe essere uguale ai risultati di quell'operazione, che sarà una matrice. Quindi la matrice sarà costruita e quindi assegnata a di età. Quando è confuso, leggi semplicemente l'espressione da sinistra a destra. "Spingi l'oggetto persona sul risultati array, per ciascuno persona nel persone array ... proprio come quello della persona età la proprietà è maggiore o uguale a 21. "The quando parola chiave è chiamato un filtro e può essere incredibilmente potente. Ammettilo: stai cominciando a sbavare.
Nella sezione precedente, abbiamo usato un metodo abbastanza tipico per associare una variabile a una stringa.
console.log "Ottieni% persona per la macchina del tempo", persona
Simile alle lingue, come Ruby, CoffeeScript offre un'interpolazione di stringhe, tramite il # sintassi. Questo codice può essere riscritto, in questo modo:
console.log "Ottieni # persona sulla macchina del tempo"
Si noti che, come la maggior parte delle lingue, per sfruttare l'interpolazione delle stringhe, è necessario utilizzare virgolette doppie, anziché singole.
Si consideri il compito abbastanza comune di memorizzare nella cache un riferimento a Questo, in questo modo, quando il contesto cambia, ad esempio all'interno del callback di un binding di eventi jQuery, possiamo ancora accedere al percorso memorizzato nella cache. Ecco un esempio:
var auto = questo; $ ('h1'). on ('click', function () // 'this' ora si riferisce all'ancora che è stata cliccata // usa self invece self.someMethod ();); CoffeeScript fornisce la "freccia grassa", o =>, che può essere di grande aiuto. Se cambiamo -> a =>, dietro le quinte, CoffeeScript memorizzerà un riferimento in cache Questo. Quindi, all'interno della funzione, tutti i riferimenti a Questo verrà sostituito dinamicamente con la versione cache.
Per illustrare questa idea, il seguente codice:
$ ('h1'). su 'clic', => this.someMethod () ... compilerà a:
var _this = this; $ ('h1'). on ('click', function () return _this.someMethod ();); CoffeeScript fornisce un utile classe sintassi, per coloro che preferiscono un approccio più classico alla strutturazione del loro codice. Ad esempio, semplicemente digitando classe Persona, CoffeeScript compilerà tale codice per:
var Persona; Person = (function () function Person () return Person;) ();
Notare come il Persona variabile è uguale a un'espressione di funzione auto-invocazione che restituisce l'interno Persona funzione. Dovremmo aver bisogno di eseguire un po 'di codice immediatamente dopo l'istanziazione, simile a quello di PHP __costruire metodo, possiamo mettere il nostro dentro codice all'interno del costruttore metodo del classe, così:
class Person constructor: (name, age) -> this.name = name this.age = age
Il costruttore il metodo non può essere chiamato esplicitamente; al contrario, viene attivato dinamicamente quando si crea un'istanza della classe. Questo codice può essere migliorato, tuttavia; CoffeeScript fornisce dello zucchero in più che può accorciarlo. In CoffeeScript, il @ il simbolo si riferirà sempre a Questo, o l'istanza di Persona. In quanto tale, piuttosto che this.age, possiamo invece usare @età, che gli sviluppatori di Ruby conoscono. Il codice sopra può essere riscritto come:
class Person constructor: (name, age) -> @name = name @age = age
Ancora meglio, però, possiamo fare un passo in più. Queste variabili di istanza possono essere impostate in un modo diverso:
costruttore di classe Person: (@name, @age) ->
Non male, eh? A questo punto, per estendere PersonaCon il suo prototipo con metodi aggiuntivi, creiamo semplicemente nuovi metodi, nello stesso modo in cui aggiungeremo metodi a un oggetto. Dietro le quinte, CoffeeScript allegherà il metodo al prototipo. Aggiungiamo un metodo che determina l'anno di nascita della persona.
class Person constructor: (@name, @age) -> getBirthYear: -> new Date (). getFullYear () - @age
Questo codice bello e pulito, una volta compilato in JavaScript, sarà:
var Persona; Persona = (funzione () funzione Persona (nome, età) this.name = nome; this.age = età; Person.prototype.getBirthYear = function () return new Date (). GetFullYear () - this. età;; return Person;) ();
Quindi, abbiamo effettivamente ridotto il numero di linee da sedici a quattro. Per creare un'istanza di questa nuova classe, possiamo scrivere:
man = new Person ('Jeffrey', 27) man.getBirthYear () # 1985 Ancora meglio, per creare classi figlio, che si estendono Persona, abbiamo solo bisogno di usare il estendere parola chiave:
la classe Child estende la persona
A questo punto, Bambino ora ha accesso a tutte le proprietà e i metodi da Persona classe, e può fare riferimento o sovrascriverli a volontà.
Nonostante tutto questo glorioso zucchero, ci rimane ancora la domanda: dovremmo usare CoffeeScript in produzione? Bene, John Q. Reader, questo dipende in gran parte da te. Ci sono argomenti validi a favore e contro di esso. I nay-sayers faranno riferimento al fatto che, poiché non si sta lavorando in modo specifico con JavaScript compilato, il debug può diventare potenzialmente un compito più difficile. Stai eseguendo il debug del codice che non hai scritto. Questo può essere una lotta.
"Penso che CoffeeScript sia un brillante esperimento. CoffeeScript prende le parti buone e mette una sintassi minima su di essa, che è bella. Non consiglio di usarlo in produzione, perché ha un suo mondo di problemi. - Douglas Crockford "
Si potrebbe anche sostenere che un'eccessiva dipendenza da astrazioni come questa può portare lo sviluppatore ad avere una minore comprensione di JavaScript, nel suo complesso. Dato che così tante best practice sono integrate nel compilatore, ciò semplifica il compito dello sviluppatore di memorizzare queste best practice, come ad esempio l'eliminazione delle variabili globali e le variabili di sollevamento. Che questo tipo di automazione sia o meno una buona cosa è in discussione.
"Una best practice che può essere applicata e generata da un compilatore è migliore di una best practice che deve essere ricordata e digitata manualmente ogni volta." - Jeremy Ashkenas
Per interpretare l'avvocato del diavolo, lo stesso si sarebbe potuto dire per jQuery. JQuery incoraggia una nuova generazione di sviluppatori che non impara mai veramente JavaScript in forma di vaniglia? Assolutamente no; semmai, ha notevolmente aiutato il risorgere del linguaggio JavaScript.
Mentre la sintassi di CoffeeScript potrebbe inizialmente essere più familiare e accogliente agli sviluppatori di Ruby e Python che hanno paura di JavaScript, si spera che li incoraggi a scavare più a fondo nella lingua sottostante.
Per raccogliere più opinioni di CoffeeScript da maestri JavaScript - su entrambi i lati della barriera - fai riferimento a "Dovresti imparare CoffeeScript", da Nettuts +. ) In definitiva, CoffeeScript è solo JavaScript. Offre una bellissima sintassi che si trova in cima alla lingua. I pro sono ovvi: il codice aderisce automaticamente alle best practice e diventa più breve, meno soggetto a errori e notevolmente più leggibile. Ma, di nuovo, il debugging, che può richiedere una notevole quantità di tempo nel flusso di lavoro di uno sviluppatore, è una preoccupazione.
La scelta dipende da te! Per quanto riguarda il tuo davvero, beh non posso immaginare di tornare indietro. Sono all in con CoffeeScript.
