LearnThe Absolute Beginner’s Guide to CoffeeScript

CoffeeScript è diventato sempre più popolare negli ultimi anni a causa della sua adozione da parte del Nodo.js e Rails comunità. Diamo un’occhiata perché è diventato il go-to lingua quando le persone vogliono scrivere JavaScript nelle loro applicazioni.

Che cos’è CoffeeScript?

CoffeeScript è un linguaggio che viene compilato in JavaScript. Codice inserito .i file coffee non vengono interpretati in fase di esecuzione, come JavaScript, ma vengono compilati in .file js.

Se stai scrivendo per JavaScript per il Nodo.js o qualsiasi implementazione di un dato browser, CoffeeScript può essere scritto per tutti i tipi di JavaScript.

Perché CoffeeScript?

In passato, JavaScript non ha avuto la reputazione più stellare a causa della mentalità di copia e incolla degli anni ‘ 90 e dei primi anni 2000, sembrava che solo pochi avessero idea di cosa stesse succedendo. È stato considerato dall’alto in basso come un linguaggio non così “serio”. Tuttavia, JavaScript come lingua ha molto da offrire e ha alcune caratteristiche eccellenti.

CoffeeScript fa uso delle potenti funzionalità di JavaScript senza imparare le caratteristiche meno conosciute di JavaScript aggiungendo “zucchero sintattico” a JavaScript. CoffeeScript non ha i due punti e le parentesi graffe, sintassi simile a Python e Ruby.

Questo significa che puoi scrivere meno codice e fare le cose più velocemente. Rende anche più facile da leggere e mantenere.

A causa delle ottimizzazioni utilizzate da CoffeeScript, quando viene compilato, il JavaScript risultante è altrettanto performante o in alcuni casi è ancora più performante rispetto al codice scritto a mano.

Puoi imparare molto su JavaScript guardando il JavaScript che CoffeeScript compila. Se c’è qualcosa di nuovo che vedi lì, cercalo e scopri perché CoffeScript compila in questo modo piuttosto che quello che sei abituato a vedere.

Installazione di CoffeeScript

Installiamo CoffeeScript in modo da poter seguire. CoffeeScript è un Nodo.pacchetto js. Quindi dipende dal Nodo.js e il gestore di pacchetti (npm).

Su OS X

Nodo.js può essere installato utilizzando Homebrew, un gestore di pacchetti open source per OS X. È possibile rivedere il processo di installazione di Homebrew qui.

Assicurati che Homebrew sia aggiornato digitandobrew update nel tuo terminale.

La formula Homebrew per il nodo.js è node. Quindi per installare il nodo.js si digita brew install node nel terminale. Segui tutte le istruzioni aggiuntive che appaiono se hai bisogno di modificarePATHs o qualcosa del genere.

Quindi digitarenpm install -g coffee-script per installarlo globalmente.

Su Windows

Visita il nodo.js ‘e premere il pulsante” Installa”. Dovrebbe rilevare automaticamente il tuo sapore di Windows che stai usando e un programma di installazione inizierà a scaricare.

Passare attraverso il processo di installazione.

Una volta installato, apri il prompt dei comandi e digitanpm install -g coffee-script per installarlo globalmente.

E infine

Digitarecoffee -v nella riga di comando per vedere che è stato installato correttamente.

Uso della riga di comando

Ilcoffee compilatore può essere utilizzato in diversi modi. Ecco un paio per vedere cosa è disponibile.

Esegui e compila

Il seguente comando compilerà tutti i tuoi .coffee file in una cartella chiamata coffeescripts a .js file in una struttura ad albero parallela nel javascripts cartella.

coffee -o javascripts/ -c coffeescripts/

Warning

L’opzione -csignifica compilare e -o indica la cartella di output. Nota l’ordine viene emesso quindi compilato. Questo perché se cambi l’ordine non funziona!

Watcher

Eseguendo il comando precedente ogni volta che si desidera compilare i file CoffeeScript, quindi c’è un’altra comoda opzione da usare,-w.

coffee -w -o javascripts/ -c coffeescripts/

L’osservatore ascolta le modifiche ai file nella cartellacoffeescripts e le compila al volo.

Se aggiungi un nuovo file alla cartella coffeescripts, tuttavia se aggiungi una nuova cartella e un file CoffeeScript all’interno, non verrà compilato. Questo potrebbe cambiare nelle versioni successive.

Unire i file

È anche possibile compilare tutti i file.coffee in un singolo file JavaScript. Ciò ridurrà il numero di richieste HTTP che un browser deve effettuare e migliorerà le prestazioni. Per fare ciò utilizzare l’opzione-j in questo modo:

coffee -j javascripts/app.js -c coffeescripts/*.coffee

* è un operatore jolly.

REPL

Se si digitacoffee senza alcuna opzione si apre una shell interattiva. Questo è simile airb in Ruby. Questo è un ottimo strumento per le cose fuori nella console e l’esecuzione di esperimenti rapidi.

Evidenziazione dell’editor di testo

Se hai intenzione di codificare in CoffeeScript, la cosa migliore da fare è avere l’evidenziazione della sintassi.

TextMate

Jeremy Ashkenas, inventore di CoffeeScript, ha creato un pratico pacchetto TextMate. Per le istruzioni di installazione andare qui.

Sublime Text 2

Sublime Text 2 ha un plugin creato dall’utente GitHub Xavura. Puoi installarlo tramite il controllo del pacchetto Sublime, se lo hai già.

Le cose buone, ovvero la sintassi

Variabili

Le variabili in CoffeeScript non richiedono la parola chiavevar. Basta nominare la variabile, un segno di uguale e quindi il valore.

year = 1985speed = 88

Stringhe

Le stringhe sono dichiarate con virgolette come nella maggior parte delle altre lingue.

first_name = "Marty"

Per unire o concatenare le stringhe, puoi elencarle una dopo l’altra con un simbolo più in mezzo, come questo:

full_name = first_name + " McFly"

Puoi anche includere il simbolo hash (#), seguito da parentesi graffe, e all’interno di esse la stringa variabile.

full_name = "#{first_name} McFly"

I due esempi precedenti creerebbero la stringaMarty McFly.

Quest’ultimo tipo di interpolazione delle stringhe funziona solo quando si usano virgolette doppie. Se si utilizzano virgolette singole, il testo viene visualizzato “così com’è”. Le stringhe di virgolette singole sono stringhe letterali.

full_name = '#{first_name} McFly'

Quindi quanto sopra sarà la stringa di#{first_name} McFly. Questo rispecchia il comportamento.

Funzioni

Le funzioni vengono dichiarate nominando la funzione, il segno di uguale e quindi un simbolo di funzione speciale (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Non abbiamo usato la parola chiavereturn perché ogni funzione in CoffeeScript restituisce il risultato dell’ultima riga di codice.

Le funzioni a più righe vengono scritte su più righe con ogni riga dopo la dichiarazione che ha uno spazio bianco prima di essa.

initialize_time_circuits = -> year = 1885 year * flux_capacitor_constant * speed

Questo imposterebbe l’anno a1885 ogni volta. Se vogliamo che l’anno di essere molto più flessibile, ma hanno un valore predefinito siamo in grado di portare in il metodo declaraion come questo:

initialize_time_circuits = (speed, year = 1885) -> year * flux_capacitor_constant * speed

Questo significa che si può chiamare a questo, con un valore di speedyear sarà sempre per impostazione predefinita 1885.

 initialize_time_circuits(88)

Puoi anche chiamare metodi senza usare parentesi. Quanto sopra può anche essere scritto come:

 initialize_time_circuits 88

Array

Esistono diversi modi per inizializzare e dichiarare gli array in CoffeeScript. Probabilmente sei abituato a vedere gli array dichiarati con parentesi quadre e valori separati da virgole.

 mcflys = 

Puoi anche dichiarare array su più righe in questo modo:

 mcflys = 

Devi avere uno spazio bianco su ogni riga.

Opzionalmente, è possibile rimuovere la virgola finale da ogni riga.

 mcflys = 

È anche possibile utilizzare una combinazione di questi due stili di dichiarazione.

Il seguente esempio equivalent

woah = 

equivalent è l’equivalente di:

woah = 

Che può essere più o meno leggibile a seconda dell’applicazione. CoffeeScript consente di farlo in una varietà di modi per soddisfare le vostre esigenze.

Oggetti

Oggetti letterali o hash possono essere dichiarati come le loro controparti JavaScript e in altri modi funky.

Dato il seguente JSON

can è possibile eliminare le virgole e le parentesi graffe:

Finché si indenta con uno spazio bianco, la struttura viene annidata come ci si aspetterebbe.

Intervalli

Gli intervalli sono dichiarati da due interi separati da due periodi, racchiusi tra parentesi quadre.

days = 

Gli intervalli non sono un tipo di oggetto standard in Javascript, quindi vengono compilati in array.

Per ottenere una sottosezione di un array puoi passare anche in un intervallo. Vuoi ottenere giorni da tuesday_to_friday dove lunedì è 1e domenica è7? Poiché gli array sono indicizzati a base zero, inizieremmo da 1 e finiremmo da 4.

days = tuesday_to_friday = days

È anche possibile sostituire intere sezioni di array in modo simile.

Il seguente id

days = 

Modifica l’arraydayscome.

È possibile utilizzare intervalli di conto alla rovescia troppo per esempio sarebbe10a0.

Splat

Uno splat è un modo conveniente per accettare più valori come argomenti ai metodi.

Nel seguente esempio vogliamo assegnare punti kudos a un gruppo di utenti del forum per il numero di post in una determinata settimana.

La prima persona ottiene 10 punti, la seconda ottiene 6, la terza ottiene 2 e ogni altro otterrà un singolo punto.

Creiamo una funzione,giveKudos Confirstsecond ethird come parametri. Per il resto usa bene uno splat, che è il nome della variabile seguito da 3 periodi. All’interno del metodo giveKudos chiamiamo un non implementato addKudosToUser che accetta due parametri, l’utente e i punti da aggiungere. Non ci preoccuperemo dell’implementazione, è solo a scopo illustrativo.

giveKudos = (first, second, third, rest...) -> addKudosToUser first, 10 addKudosToUser second, 6 addKudosToUser third, 2

Successivamente possiamo usare unfor inper eseguire il loop surest.

Dato che abbiamo una serie di utenti:

users = 

Vogliamo Pasan per ottenere 10 punti, Amit per ottenere 6, Jim per ottenere 2 e poi il resto per ottenere 1.

Dobbiamo passare gli utenti con i periodi in al metodo per assegnare correttamente i valori della matrice di parametri come:

giveKudos users...

Senza questi periodi, users ottenere assegnata al first parametro e undefined per il resto.

Classi

Le classi possono essere dichiarate banalmente in CoffeeScript che è un contrasto rinfrescante al JavaScript molto più dettagliato.

Prima scrivi la parola chiaveclass, seguita dal nome della tua classe.

I metodi, incluso il metodo del costruttore, sono scritti con il nome del metodo seguito da due punti. Lo spazio bianco è necessario prima di ogni nome di metodo. È quindi possibile utilizzare l’operatore funzione (->).

class TimeMachine constructor: ->

Per istanziare un’istanza di un oggetto, utilizzare la parola chiavenew seguita dal nome della classe.

time_machine = new TimeMachine

Variabili di istanza

Le variabili di istanza iniziano con un simbolo @. Quindi possiamo avere un pilota

class TimeMachine constructor: (pilot) -> @pilot = pilot

Puoi accedervi anche tramite notazione dot.

class TimeMachine constructor: (pilot) -> @pilot = pilot time_machine = new TimeMachine "H. G. Wells"console.log time_machine.pilot

Nell’esempio precedente la stringaH. G. Wells verrebbe stampata sulla console.

Invece di impostare@pilot = pilot puoi scriverlo in stenografia in questo modo:

class TimeMachine constructor: (@pilot) ->

Ereditarietà di classe

Per scrivere una sottoclasse puoi usare extends in questo modo:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

Diciamo che TimeMachineha un metodo go con un parametro che viene disconnesso quando la Macchina del tempo sta per viaggiare nel tempo.

class TimeMachine constructor: (@pilot) -> go: (noise) -> console.log noise

Ora facciamo per ogni time machine implementare andare e chiamare ilsuper metodo.

Quindi chiamare go() sulle istanze di entrambe le macchine del tempo stamperà il suo rispettivo suono.

Sintassi generale

Con CoffeeScript troverai il tuo codice più simile a una frase in inglese:

light_bulbs() if switch is on

Che è lo stesso di:

light_bulbs() unless switch is not on

Mentre quest’ultimo è più difficile da analizzare rispetto al primo, mostra lo scopo del nuovo zucchero.

Ecco una tabella di equivalenti dalla pagina di documentazione CoffeeScript su operatori e alias.

CoffeeScript	JavaScript
si	===
no	!= =
non	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

Existential Operator

CoffeeScript brings another cool operator to the table called the Existential Operator, which is a question mark (?).

Diciamo se unuser non ha effettuato l’accesso ed è stato ancora impostato. Si desidera che la funzione di login di essere chiamato se il user non è presente, quindi basta usare l’Operatore Esistenziale in questo modo:

login() if not user?

È anche possibile impostare i valori di default, in questo modo:

year ?= 1885

È possibile utilizzare l’Operatore Esistenziale in un modo simile a un operatore ternario. L’esempio seguente imposta il saluto come message, se non undefined o la stringa ” Hello, World!”.

greeting = message ? "Hello, World!"

Infine c’è una variante di accesso che è possibile utilizzare absorb up null riferimenti quando si concatenano le proprietà insieme.

ip = securitySystem.lastUser?().remoteSystem?.ipAddress

Quindi invece di generare un TypeErrorquesto restituirebbe undefined.

Comprensioni

Comprensioni possono rendere il codice più leggibile. Nel nostro esempio di complimenti abbiamo avuto il ciclofor che andava su due righe, quando avremmo potuto scriverlo su una riga come questa:

Un’altra caratteristica interessante del ciclo su cose in CoffeeScript è che il ciclo restituisce un array dei risultati di quel ciclo. Diciamo che voglio contare da 0 a 100 in multipli di 10. Tutto quello che faccio è anteporre il mio ciclo con un’assegnazione variabile in questo modo:

multiples = for num in num * 10

Aggiungendo parentesi puoi portarlo anche su una riga!

multiples = (num * 10 for num in )

Conclusione

Woah! Era molto da prendere, ma come puoi vedere CoffeeScript è pieno di una gustosa sintassi zuccherina. Perché non dargli una bash nel tuo prossimo progetto JavaScript e vedere cosa compila sotto il cofano?

• guida per principianti a coffeescript
• coffeescript
• impara a programmare
• crea un sito web