LearnThe Absolute Beginner’ s Guide to CoffeeScript

CoffeeScript har blivit allt populärare under de senaste åren på grund av dess antagande av noden.js och Rails samhällen. Låt oss ta en titt varför det har blivit språket när människor vill skriva JavaScript i sina appar.

Vad är CoffeeScript?

CoffeeScript är ett språk som kompileras till JavaScript. Kod i .kaffe filer tolkas inte vid körning, som JavaScript, men sammanställs i .js-filer.

oavsett om du skriver för JavaScript för noden.js eller en viss webbläsares implementering, CoffeeScript kan skrivas för alla smaker av JavaScript.

varför CoffeeScript?

tidigare har JavaScript inte haft det mest fantastiska rykte på grund av copy-and-paste-mentaliteten på 90-talet och början av 2000-talet, det verkade som om bara några hade någon aning om vad som hände. Det sågs ner på som ett inte så ”allvarligt” språk. JavaScript som språk har dock mycket att erbjuda och har några superfunktioner.

CoffeeScript använder sig av de kraftfulla funktionerna i JavaScript utan att lära sig de mindre kända funktionerna i JavaScript genom att lägga till ”syntaktiskt socker” till JavaScript. CoffeeScript har inte halvkolon och lockiga hängslen, liknande syntax som Python och Ruby.

det betyder att du kan skriva mindre kod och göra saker snabbare. Det gör det också lättare att läsa och underhålla.

på grund av optimeringar CoffeeScript använder, när det sammanställs ner, den resulterande JavaScript är lika performant eller i vissa fall är det ännu mer performant över handskriven kod.

Du kan lära dig mycket om JavaScript genom att titta på JavaScript som CoffeeScript sammanställer till. Om det finns något nytt som du ser där, undersök det och se varför CoffeScript sammanställer det sättet snarare än vad du är van vid att se.

installera CoffeeScript

Låt oss installera CoffeeScript så att du kan följa med. CoffeeScript är en nod.js paket. Så det beror på nod.js och pakethanteraren (npm).

på OS X

nod.js kan installeras med Homebrew, en öppen källkodspakethanterare för OS X. Du kan granska installationsprocessen för Homebrew här.

se till att du är Homebrew är uppdaterad genom att skriva brew update I din terminal.

homebrew-formeln för nod.js är node. Så för att installera nod.js du skriver in brew install node I din terminal. Följ eventuella ytterligare instruktioner som visas om du behöver ändra PATHs eller något liknande.

skriv sedan npm install -g coffee-script för att installera det globalt.

i Windows

besök nod.js hemsida och tryck på” Install ” – knappen. Det bör automatiskt upptäcka din smak av Windows du använder och ett installationsprogram börjar ladda ner.

gå igenom installationsprocessen.

När den är installerad öppnar du kommandotolken och skrivernpm install -g coffee-script för att installera den globalt.

och slutligen

skriv coffee -v I kommandoraden för att se att den har installerats korrekt.

Kommandoradsanvändning

coffee kompilatorn kan användas på flera sätt. Här är ett par för att se vad som finns tillgängligt.

kör och kompilera

följande kommando kompilerar alla dina .coffee filer i en mapp som heter coffeescripts till .js filer i en parallell trädstruktur i javascripts mapp.

coffee -o javascripts/ -c coffeescripts/

Varning

alternativet -c betyder kompilering och -o betyder utmatningsmappen. Observera att beställningen matas ut och kompilerar sedan. Detta beror på att om du byter ordning fungerar det inte!

Watcher

kör ovanstående kommando varje gång du vill kompilera CoffeeScript-filer så det finns ett annat praktiskt alternativ att använda,-w.

coffee -w -o javascripts/ -c coffeescripts/

watcher lyssnar på ändringar i filerna i mappencoffeescripts och sammanställer dem i farten.

om du lägger till en ny fil i mappencoffeescripts ska kompilera, men om du lägger till en ny mapp och en CoffeeScript-fil inuti så kommer den inte att kompileras. Detta kan ändras i senare versioner.

ansluta filer

Du kan också kompilera alla dina .coffee filer ner till en enda JavaScript-fil. Detta kommer att minska antalet HTTP-förfrågningar som en webbläsare måste göra och förbättra prestanda. För att göra detta använd -j alternativet Så här:

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

* är en jokerteckenoperatör.

REPL

om du skriver coffee utan några alternativ öppnas ett interaktivt skal. Detta liknar irb I Ruby. Detta är ett bra verktyg för saker i konsolen och utför snabba experiment.

textredigerare som markerar

Om du ska koda i CoffeeScript är det bästa att göra syntaxmarkering.

TextMate

Jeremy Ashkenas, coffeescripts uppfinnare, skapade en praktisk TextMate-bunt. För installationsanvisningar gå hit.

Sublime Text 2

Sublime Text 2 har ett plugin skapat av GitHub-användaren Xavura. Du kan installera detta via Sublime Package Control, om du redan har det.

de bra grejerna aka syntaxen

variabler

variabler i CoffeeScript kräver inte nyckelordetvar. Namnge bara din variabel, ett likhetstecken och sedan värdet.

year = 1985speed = 88

strängar

strängar deklareras med citat som på de flesta andra språk.

first_name = "Marty"

för att gå med eller sammanfoga strängar kan du lista dem efter varandra med en plussymbol däremellan, så här:

full_name = first_name + " McFly"

Du kan också inkludera hashsymbolen (#), följt av lockiga hängslen, och inom dem strängen variabel.

full_name = "#{first_name} McFly"

ovanstående två exempel skulle skapa strängen Marty McFly.

den senare typen av stränginterpolering fungerar bara när du använder dubbla citat. Om du använder enkla citat visas texten”som den är”. Enkla citatsträngar är bokstavliga strängar.

full_name = '#{first_name} McFly'

så ovanstående kommer att vara strängen av #{first_name} McFly. Detta speglar beteende.

funktioner

funktioner deklareras genom att namnge funktionen, likhetstecken och sedan en speciell funktionssymbol (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Vi har inte använt nyckelordet return eftersom varje funktion i CoffeeScript returnerar resultatet av den sista raden av kod.

multi-fodrade funktioner skrivs på flera rader med varje rad efter att deklarationen har något vitt utrymme före den.

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

detta skulle ställa in året till 1885 varje gång. Om vi vill att året ska vara mycket mer flexibelt men har en standard kan vi ta upp det i metoddeklarationen så här:

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

detta betyder att vi då kan ringa detta med ett värde av speedyear kommer alltid att vara standard till 1885.

 initialize_time_circuits(88)

Du kan också ringa metoder utan att använda parenteser. Ovanstående kan också skrivas som:

 initialize_time_circuits 88

Arrays

det finns flera olika sätt att initiera och deklarera arrays i CoffeeScript. Du är förmodligen van vid att se arrayer deklarerade med fyrkantiga parenteser och värden separerade med kommatecken.

 mcflys = 

Du kan också deklarera matriser över flera rader så här:

 mcflys = 

Du måste ha vitt utrymme på varje rad.

Alternativt kan du ta bort det efterföljande kommatecken från varje rad.

 mcflys = 

Du kan också använda en kombination av dessa två deklarationsstilar.

följande exempel …

woah = 

…motsvarar:

woah = 

vilket kan vara mer eller mindre läsbart beroende på din ansökan. CoffeeScript låter dig göra det på olika sätt för att passa dina behov.

objekt

Objektbokstavar eller hashar kan deklareras som deras JavaScript-motsvarigheter och på några andra funky sätt.

Med tanke på följande JSON…

…kan du släppa kommatecken och lockiga hängslen:

så länge du indrag med lite vitt utrymme blir strukturen kapslad som du förväntar dig.

intervall

intervall deklareras med två heltal åtskilda av två perioder, insvept i hakparenteser.

days = 

intervall är inte en standardobjekttyp i Javascript så de kompileras ner till arrayer.

för att få en underavdelning av en array kan du också passera i ett intervall. Vill du få dagar från tuesday_to_friday där måndag är 1 och söndag är 7? Eftersom arrays är indexerade nollbaserade, skulle vi börja vid 1 och sluta vid 4.

days = tuesday_to_friday = days

Du kan också ersätta hela sektioner av arrayer på liknande sätt.

följande …

days = 

ändrar days array för att vara .

Du kan använda intervall för att nedräkning också till exempel skulle vara 10 till 0.

Splat

en splat är ett bekvämt sätt att acceptera flera värden som argument till metoder.

i följande exempel vill vi tilldela kudos-poäng till en grupp forumanvändare för antalet inlägg under en viss vecka.

den första personen får 10 poäng, den andra får 6, den tredje får 2 och alla andra får en enda poäng.

Låt oss skapa en funktion, giveKudos med firstsecond och third som parametrar. För resten använder du en splat, vilket är namnet på variabeln följt av 3 perioder. Inom metoden giveKudos låt oss kalla en icke implementerad addKudosToUser som tar två parametrar, Användaren och de punkter som ska läggas till. Vi kommer inte att oroa oss för genomförandet, det är bara för illustrativa ändamål.

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

nästa kan vi använda ett for in för att slinga över rest.

Med tanke på att vi har en rad användare:

users = 

Vi vill att Pasan ska få 10 poäng, Amit för att få 6, Jim för att få 2 och sedan resten för att få 1.

Vi måste skicka in användare med perioderna i metoden för att korrekt tilldela arrayvärdena till parametrarna så här:

giveKudos users...

utan dessa perioder, users get tilldelas first parameter och undefined till resten.

klasser

klasser kan förklaras trivialt i CoffeeScript vilket är en Uppfriskande kontrast till det mycket mer detaljerade JavaScript.

skriv först nyckelordet class, följt av namnet på din klass.

metoder, inklusive konstruktormetoden, skrivs med namnet på metoden följt av ett kolon. Vitt utrymme behövs före varje metodnamn. Du kan sedan använda funktionen operator (->).

class TimeMachine constructor: ->

för att initiera en instans av ett objekt, använd nyckelordet new följt av klassnamnet.

time_machine = new TimeMachine

instansvariabler

instansvariabler börjar med en @ symbol. Så vi kan ha en pilot

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

Du kan komma åt dem via punktnotation också.

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

i ovanstående exempel strängen H. G. Wells skulle skrivas ut till konsolen.

istället för att ställa in @pilot = pilot kan du skriva det i stenografi så här:

class TimeMachine constructor: (@pilot) ->

Klassarv

för att skriva en underklass kan du använda extends så här:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

Låt oss säga TimeMachine har en metod go med en parameter som loggas ut när Tidsmaskinen håller på att resa i tid.

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

låt oss nu för varje Time machine-implementering gå och ringa super – metoden.

så ringer go() på instanser av båda tidsmaskinerna kommer att skriva ut det egna respektive ljudet.

allmän Syntax

med CoffeeScript hittar du din kod som ser mer ut som en mening på engelska:

light_bulbs() if switch is on

vilket är detsamma som:

light_bulbs() unless switch is not on

medan den senare är svårare att tolka än den tidigare, visar det dig omfattningen av det nya sockret.

här är en tabell med ekvivalenter från CoffeeScript-dokumentationssidan om operatörer och Alias.

CoffeeScript	JavaScript
är	===
är inte	!= =
inte	!
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 (?).

låt oss säga om ett user inte har loggat in och ställts in ännu. Du vill att inloggningsfunktionen ska anropas om user inte finns, använd bara den existentiella operatören så här:

login() if not user?

Du kan också ställa in standardvärden så här:

year ?= 1885

Du kan använda den existentiella operatören på ett liknande sätt till en ternär operatör. Följande exempel skulle ställa hälsning vara antingen message, om inte undefined eller strängen ` ” Hej, världen!”.

greeting = message ? "Hello, World!"

slutligen finns det en accessor variant som du kan använda absorbera upp null referenser när du kedja egenskaper tillsammans.

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

så istället för att höja ett TypeError skulle detta returnera undefined.

förståelser

förståelser kan göra din kod mer läsbar. I vårt kudos-exempel hade vi for – slingan som gick över två rader, när vi kunde ha skrivit den på en rad så här:

en annan cool funktion av looping över saker i CoffeeScript är att slingan returnerar en array av resultaten av den slingan. Låt oss säga att jag vill räkna från 0 till 100 i multiplar av 10. Allt jag gör är att lägga till min slinga med en variabel uppgift så här:

multiples = for num in num * 10

lägga till parenteser du kan ta med den till en rad också!

multiples = (num * 10 for num in )

slutsats

Woah! Det var mycket att ta in men som du kan se är CoffeeScript full av välsmakande sugary syntax. Varför inte ge det en bash i ditt nästa JavaScript-projekt och se vad det sammanställer till under huven?

• nybörjarguide till coffeescript
• coffeescript
• lär dig programmering
• skapa en webbplats