Share
Anche se CoffeeScript è una nuova lingua, lo imparerai molto rapidamente. Dovresti, dato che è solo l'esibizione di JavaScript con alcuni abiti appariscenti, dopotutto. Si legge come Ruby o Python, ma si compila su JavaScript puro e non-lanuginoso. Oggi daremo un'occhiata al perché tutti parlano di CoffeeScript.
Con l'avvento di potenti motori JavaScript, come V8, JavaScript ha perso il suo stigma di uno strumento flessibile per le interazioni giovanili e si è trasformato in una vera centrale elettrica. Ad esempio, è persino passato dalle applicazioni lato client al lato server, node.js. Il fatto che aderisca a un'ideologia piuttosto elegante e basata su prototipi non fa male neanche a questo. Non c'è dubbio che JavaScript è davvero un linguaggio critico ora e per il prossimo futuro.
Ma ho sempre sentito la sintassi stessa essere un po 'sfacciata. Dopo aver lavorato con un mix di Ruby e Python negli ultimi due anni, ho trovato la sintassi verbosa infusa da virgola semi, basata su parentesi, tra parentesi, per essere noiosa. E da quello che posso raccogliere, non sono il solo a sentirmi in questo modo. È qui che CoffeeScript viene in soccorso!
CoffeeScript si compila fino a JS non elaborato.
CoffeeScript è essenzialmente solo una riscrittura sintattica di JavaScript. Il linguaggio di base rimane lo stesso, con piccoli miglioramenti semantici. La sintassi viene modificata, modellata su Python e Ruby.
Ricorda che il compilatore CoffeeScript emette JavaScript pulito che non solo segue le migliori pratiche ed è eminentemente leggibile, ma passa anche JSLint. Ciò significa che non devi preoccuparti della compatibilità su tutta la linea. Nel peggiore dei casi in cui questo progetto muore, puoi semplicemente riprendere JS pristine che CoffeeScript genera e andare avanti con il tuo codice. Non sei bloccato in questo ambiente.
Questo può sembrare un concetto alieno ma sotto l'ombrello dello sviluppo web, abbiamo già visto la nostra giusta parte di questa ideologia. HAML è solo un nuovo modo di scrivere HTML mentre SASS fa lo stesso per i CSS. Tutti puliscono la struttura e la sintassi dei loro linguaggi rendendoli più facili da utilizzare e aumentando così la nostra produttività.
Probabilmente ti starai chiedendo come appare il codice stesso, quindi ecco una rapida occhiata:
index = (elenco, target) -> [basso, alto] = [0, list.length] mentre basso < high mid = (low + high) >> 1 val = list [mid] restituisce mid se val è target se val < target then low = mid + 1 else high = mid return -1
Questa è una rapida implementazione di una ricerca binaria. Non cercare di analizzare il codice stesso in questo momento. Basta provare a familiarizzare con la sintassi.
Di seguito è riportato il codice JavaScript generato da CoffeeScript:
indice var; index = function (list, target) var alto, basso, medio, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; mentre (basso < high) mid = (low + high) >> 1; val = list [mid]; se (val === target) return mid; if (val < target) low = mid + 1; else high = mid; return -1; ;
Ecco alcuni vantaggi e svantaggi nell'utilizzo di CoffeeScript. Questo non è completo in alcun modo, ma penso che questo sia sufficiente per ottenere una rapida panoramica del sistema.
Ci sono, naturalmente, numerosi altri punti tra cui miglioramenti semantici e sintattici.
I metodi ufficiali per iniziare includono un'utilità da riga di comando che gira sotto node.js e che semplicemente scarica l'origine e la installa. Non c'è molto da guidare qui. Ottieni l'utilità node.js e usala npm installa coffee-script [o per la fonte, installazione bin / cake] per installare e iniziare.
La situazione con Windows è leggermente più complicata. Non esiste un modo semplice per ottenere node.js o la fonte installata su Windows [al di fuori di Cygwin]. Ma non preoccuparti. Un numero di persone intraprendenti ha scritto compilatori che funzionano in modo nativo su Windows. Ne ho inclusi alcuni di seguito:
Nota che il compilatore, nel modulo JavaScript compilato, è anche in bundle con il sorgente, se sei interessato. È presente sotto il extra directory con un nome ovvio.
Con questo fuori, stiamo ora andando a dare un'occhiata a una manciata di cose che mostrano come CoffeeScript rende più facile usare JavaScript!
La prima cosa che devi sapere è come CoffeeScript utilizza gli spazi in modo efficace per semplificare la sintassi. Le persone con uno sfondo di Python troveranno questo banale, ma per gli altri, ecco una rapida spiegazione.
Per prima cosa, non è necessario terminare ogni riga con un punto e virgola. La fine di una riga viene automaticamente interpretata come la fine di tale affermazione. Ad esempio, questo ...
numbers = [0, 1, 2, 3] name = "NetTuts +"
... compila fino a questo:
nome var, numeri; numeri = [0, 1, 2, 3]; name = "NetTuts +";
Successivamente, sarai felice di sapere che puoi eliminare le parentesi graffe. Quelle numerose coppie per aprire e chiudere un blocco? Tutto è fuori. In CoffeeScript, usi indentazione Python-esque per indicare l'inizio e la fine di un blocco.
CoffeeScript non richiede parentesi non necessarie o parentesi graffe.
Ecco un rapido esempio. Ignora tutto tranne il rientro per ora. Arriveremo al resto poco dopo:
se chasedByCylons esegueForYourLife ()
... compila fino a
if (chasedByCylons) runForYourLife ();
Se sei ancora un po 'confuso, non preoccuparti. La sintassi inizierà ad avere più senso una volta che avremo imparato a conoscere meglio la lingua.
CoffeeScript fornisce una serie di alias per operatori e parole chiave per rendere il codice più leggibile e intuitivo. Diamo un'occhiata ad alcuni di loro ora.
Innanzitutto, gli operatori di confronto:
Accentsconagua
è mappe a === isnt compila a !== == e != compilare a === e !== rispettivamente [come una buona pratica]Vediamoli in azione rapidamente.
se il pantalone è onFire lookForWater () se game isnt good badMouth ();
... che compila per ...
if (pant === onFire) lookForWater (); if (game! == good) badMouth ();
Abbastanza facile da leggere, no? Ora, su come sono mappati gli operatori logici.
e mappe a && o è un alias per || non compila fino a ! Costruire sul nostro codice precedente:
se il pantalone è onFire e non aDream lookForWater () se il gioco non è buono o altezzosoDevs badMouth ();
... che compila per ...
if (pant === onFire &&! aDream) lookForWater (); if (game! == good || haughtyDevs) badMouth ();
Come hai già visto sopra, la base se altro costrutto si comporta come nel normale JavaScript, include parentesi e parentesi graffe. Vedremo alcune varianti di seguito.
se dormi stanco e annoiato () else jog () // Raw JS sotto se (stanco e annoiato) sleep (); else jog ();
Ed ecco come viene gestito l'operatore ternario:
attività = se domenica è isChilling else isWorking // Raw JS below activity = domenica? isChilling: isWorking;
Un ulteriore miglioramento semantico è con il salvo che parola chiave. Questo funziona come l'esatto opposto di Se.
keepRunning () a meno che non stanco di continuare a lavorare a meno che la messa a fuoco sia estremamente bassa
E il JavaScript compilato ...
se (! stanco) keepRunning (); if (focus! == estremamenteLow) keepWorking;
Le dichiarazioni degli switch possono essere un po 'ottuse in JavaScript. CoffeeScript offre un involucro intuitivo attorno a questo costrutto.
Inizia con il interruttore parola chiave, come previsto, seguita dalla variabile di cui stiamo verificando il valore. Ogni caso o valore possibile è preceduto dal quando parola chiave seguita dalle istruzioni da eseguire se si tratta di una corrispondenza.
Non c'è bisogno di aggiungere un
romperedichiarazione alla fine di ogni frase: CoffeeScript lo fa automaticamente per te.
passare il tempo quando 6.00 wakeUp () jotDownList () quando 9.00 poi startWorking () quando 13.00 poi eat () quando 23.00 finishUpWork () sleep () else doNothing ()
La sintassi dovrebbe essere abbastanza auto esplicativa se si conosce già l'equivalente in JavaScript. L'unico punto da notare qui è l'uso del poi parola chiave. È usato per separare la condizione dall'espressione senza iniziare una nuova riga. Puoi quindi utilizzare le altre istruzioni condizionali e anche i loop.
Ecco il JS che CoffeeScript genera per te:
switch (tempo) caso 6.00: wakeUp (); jotDownList (); rompere; caso 9.00: startWorking (); rompere; causa 13.00: eat (); rompere; caso 23.00: finishUpWork (); dormire(); rompere; default: doNothing ();
Looping è un altro costrutto essenziale per il tipico codice JavaScript. Che si tratti di eseguire il looping di numeri in un array o nodi nel DOM, hai sempre bisogno di scorrere le raccolte.
CoffeeScript offre una soluzione molto flessibile mentre loop che può essere modificato per funzionare come un generico per o fare mentre ciclo continuo.
while work> time then freakOut () while time> work relax () mozyAround () // Raw JS while (work> time) freakOut (); while (time> work) relax (); mozyAround ();
fino a è un altro miglioramento semantico ed è equivalente a mentre no. Un rapido esempio di seguito:
workOut () fino all'energia < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Andare in loop su array è piuttosto semplice. Dovrai usare il per ... in costruisci per passare attraverso l'array. Lascia che ti mostri come:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] per sito nel sito di avviso siti
Se preferisci che le dichiarazioni siano nella stessa riga:
sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] sito di allerta per sito nei siti
CoffeeScripts li compila come base per loop come così. Si noti che, in linea con le best practice, la lunghezza dell'array viene memorizzata in precedenza.
var sito, siti, _i, _len; sites = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; for (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Iterare su array associati [o hash o dizionari o coppie chiave-valore] è altrettanto facile con di parola chiave.
manager = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' per sito, manager di manager alert manager + "gestisce" + sito
Come previsto, quanto sopra compila in un ciclo di base come mostrato di seguito:
var manager, manager, sito; managers = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; for (site in managers) manager = manager [sito]; avviso (gestore + "gestisce" + sito);
Creare e usare le funzioni è estremamente semplice con CoffeeScript. Per definire una funzione, elencherai i parametri necessari e prosegui con il corpo della funzione. Ecco, lascia che ti mostri come:
playing = (console, game = "Mass Effect") -> alert "Riproduzione # gioco sul mio # console." giocando a 'Xbox 360', 'New Vegas'
Questa è la sintassi di base dietro la creazione e l'uso delle funzioni. Il valore predefinito per i parametri può essere definito in linea. CoffeeScript genera il codice per verificare se un valore è stato passato o meno.
Invocare una funzione è altrettanto facile. Non c'è bisogno di parentesi: passare i parametri uno dopo l'altro.
Come sempre, ecco il codice generato per il tuo riferimento:
gioco di varietà; playing = function (console, game) if (game == null) game = "Mass Effect"; avviso di ritorno ("Playing" + game + "sul mio" + console + "."); ; giocando ('Xbox 360', 'New Vegas'); A volte, non puoi avere altra scelta che usare JavaScript raw nel tuo codice CoffeeScript. Si spera che questi casi dovrebbero essere lontani tra loro, ma anche questo è stato preso in considerazione.
Puoi iniettare JS non elaborato nel tuo codice avvolgendolo con accenti gravi, anche noti come backquote o backtick. Tutto ciò che è passato in questo modo sarà completamente intatto dal compilatore CoffeeScript.
rawJS = 'function () return someSuperComplexThingie; '// che ti restituisce var rawJS; rawJS = function () return someSuperComplexThingie; ;
Non succede nulla a loro, possono rimanere esattamente dove sono. CoffeeScript funziona perfettamente con qualsiasi libreria di terze parti, grande o piccola, perché si compila semplicemente con JavaScript non elaborato. Dovrai semplicemente riformattare e / o ridefinire il tuo codice molto leggermente, ma a parte questo, le incompatibilità non dovrebbero essere motivo di preoccupazione.
Quindi, invece di scrivere questo:
$ (document) .ready (function () elemCollection = $ ('. collection'); per (i = 0; i<=elemCollection.length;i++) item = elemCollection[i]; // check for some random property here. I am skipping the check here colortoAdd = item.hasProperty()? yesColor : noColor; // I'm quite aware there are better ways to do this $(item).css ('background-color', colortoAdd); ); ... tu scrivi ...
$ (document) .ready -> elemCollection = $ ('. collection') per item in elemCollection colortoAdd = if item.hasProperty () then yesColor else noColor $ (item) .css 'background-color', colortoAdd E siamo arrivati alla fine. Non ho trattato un numero di argomenti di livello superiore, ad esempio le classi, perché sono ben oltre lo scopo di un articolo introduttivo. Cerca alcuni tutorial di CoffeeScript avanzati lungo la strada!
Penso che CoffeeScript abbia cambiato il modo in cui scrivo JavaScript e, dopo aver letto questo, spero che abbia cambiato anche il tuo. Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Felice codifica e grazie mille per la lettura!
