learn the Absolute Beginner’ s Guide to CoffeeScript

CoffeeScript er blevet mere og mere populært i løbet af de sidste par år på grund af dets vedtagelse af noden.JS og Rails fællesskaber. Lad os tage et kig på, hvorfor det er blevet go-to-sproget, når folk ønsker at skrive JavaScript i deres apps.

Hvad er CoffeeScript?

CoffeeScript er et sprog, der bliver kompileret til JavaScript. Kode ind .kaffefiler fortolkes ikke på kørselstid, som JavaScript, men kompileres til .JS filer.

uanset om du skriver til JavaScript for noden.CoffeeScript kan skrives til alle varianter af JavaScript.

hvorfor CoffeeScript?

tidligere har JavaScript ikke haft det mest fantastiske omdømme på grund af kopi-og-indsæt-mentaliteten i 90 ‘erne og begyndelsen af 2000’ erne, det så ud til, at kun få havde nogen ide om, hvad der foregik. Det blev set ned på som et ikke så “seriøst” sprog. JavaScript som sprog har dog meget at tilbyde og har nogle superfunktioner.CoffeeScript gør brug af de kraftfulde funktioner i JavaScript uden at lære de mindre kendte funktioner i JavaScript ved at tilføje “syntaktisk sukker” til JavaScript. CoffeeScript har ikke halvkolonner og krøllede seler, der ligner syntaks som Python og Ruby.

dette betyder, at du kan skrive mindre kode og gøre tingene hurtigere. Det gør det også lettere at læse og vedligeholde.

på grund af optimeringer CoffeeScript bruger, når det er kompileret ned, er det resulterende JavaScript lige så performant eller i nogle tilfælde er det endnu mere performant over håndskrevet kode.

Du kan lære meget om JavaScript ved at se på JavaScript, som CoffeeScript kompilerer ned til. Hvis der er noget nyt, du ser der, skal du undersøge det og se, hvorfor CoffeScript kompilerer på den måde snarere end hvad du er vant til at se.

installation af CoffeeScript

lad os installere CoffeeScript, så du kan følge med. CoffeeScript er en knude.JS pakke. Så det afhænger af Node.JS og package manager (npm).

på os

Node.js kan installeres ved hjælp af hjemmebryggeri, en open source-pakkehåndtering til OS.Du kan gennemgå installationsprocessen for hjemmebryggeri her.

sørg for, at du er hjemmebrygget er opdateret ved at skrive brew update i din terminal.

Hjemmebryggeformlen for Node.js er node. Så for at installere Node.js du skriver brew install node i din terminal. Følg eventuelle yderligere instruktioner, der vises, hvis du har brug for at ændre PATHs eller noget lignende.

skriv derefter npm install -g coffee-script for at installere det globalt.

på vinduer

besøg Node.js ‘hjemmeside og tryk på knappen” Installer”. Det bør automatisk registrere din smag af vinduer, du bruger, og en installatør vil begynde at hente.

gå gennem installationsprocessen.

når den er installeret, skal du åbne din kommandoprompt og skrivenpm install -g coffee-script for at installere den globalt.

og endelig

skrivcoffee -v i din kommandolinje for at se, at den er installeret korrekt.

Kommandolinjebrug

coffee compiler kan bruges på flere måder. Her er et par for at se, hvad der er tilgængeligt.

Kør og kompilere

følgende kommando vil kompilere alle dine.coffee filer i en mappe kaldetcoffeescripts til.js filer i en parallel træstruktur ijavascripts mappe.

coffee -o javascripts/ -c coffeescripts/

advarsel

indstillingen -c betyder at kompilere og -o betyder outputmappen. Bemærk ordren er output derefter kompilere. Dette skyldes, at hvis du skifter ordre, fungerer det ikke!

overvågning

kører ovenstående kommando hver gang du vil kompilere CoffeeScript-filer, så der er en anden praktisk mulighed at bruge,-w.

coffee -w -o javascripts/ -c coffeescripts/

vagteren lytter til ændringer i filerne i mappencoffeescripts og samler dem på farten.

Hvis du tilføjer en ny fil tilcoffeescripts mappen skal kompilere, men hvis du tilføjer en ny mappe og en CoffeeScript-fil inde, vil den ikke blive kompileret. Dette kan ændre sig i senere versioner.

tilslutning af filer

Du kan også kompilere alle dine.coffee filer ned til en enkelt JavaScript-fil. Dette vil reducere antallet af HTTP-anmodninger, som en bro.ser skal foretage, og forbedre ydeevnen. For at gøre dette skal du bruge -j som sådan:

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

* er en jokertegnoperator.

REPL

Hvis du skrivercoffee uden nogen muligheder åbnes en interaktiv skal. Dette svarer til irb i Ruby. Dette er et godt værktøj til ting ude i konsollen og udføre hurtige eksperimenter.

teksteditor fremhævning

Hvis du skal kode i CoffeeScript, er det bedste at gøre syntaksfremhævning.

Tekstkammerat

Jeremy Ashkenas, CoffeeScript ‘ s opfinder, skabte et praktisk tekstkammerbundt. For installationsvejledning gå her.

Sublim tekst 2

Sublim tekst 2 har et plugin oprettet af GitHub-bruger. Du kan installere dette via Sublime Package Control, hvis du allerede har det.

de gode ting aka syntaksen

variabler

variabler i CoffeeScript kræver ikke nøgleordetvar. Du skal blot navngive din variabel, et lighedstegn og derefter værdien.

year = 1985speed = 88

strenge

strenge erklæres med citater som på de fleste andre sprog.

first_name = "Marty"

for at slutte sig til eller sammenkæde strenge kan du liste dem efter hinanden med et plussymbol imellem, som dette:

full_name = first_name + " McFly"

Du kan også inkludere hash-symbolet (#), efterfulgt af krøllede seler, og inden for dem kan strengen variabel.

full_name = "#{first_name} McFly"

ovenstående to eksempler ville skabe strengenMarty McFly.

sidstnævnte type strenginterpolation fungerer kun, når du bruger dobbelt citater. Hvis du bruger single-citater, vises teksten”som den er”. Enkelt citat strenge er bogstavelige strenge.

full_name = '#{first_name} McFly'

så ovenstående vil være strengen af#{first_name} McFly. Dette afspejler adfærd.

funktioner

funktioner erklæres ved at navngive funktionen, lighedstegn og derefter et specielt funktionssymbol (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Vi har ikke brugt søgeordetreturn fordi hver funktion i CoffeeScript returnerer resultatet af den sidste kodelinje.

Multi-foret funktioner skrives på flere linjer med hver linje efter erklæringen har nogle hvide mellemrum før det.

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

dette ville sætte året til 1885 hver gang. Hvis vi ønsker, at året skal være meget mere fleksibelt, men har en standard, kan vi bringe det op i metodedeklarationen som denne:

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

dette vil betyde, at vi derefter kan kalde dette med en værdi af speedyear vil altid være standard til 1885.

 initialize_time_circuits(88)

Du kan også ringe metoder uden at bruge parenteser. Ovenstående kan også skrives som:

 initialize_time_circuits 88

Arrays

Der er flere forskellige måder at initialisere og erklære arrays i CoffeeScript. Du er sandsynligvis vant til at se arrays erklæret med firkantede parenteser og værdier adskilt af kommaer.

 mcflys = 

Du kan også erklære arrays over flere linjer som denne:

 mcflys = 

Du skal have hvidt mellemrum på hver linje.

Valgfrit kan du fjerne det efterfølgende komma fra hver linje.

 mcflys = 

Du kan også bruge en kombination af disse to deklarationsformater.

følgende eksempel …

woah = 

…svarer til:

woah = 

hvilket kan være mere eller mindre læseligt afhængigt af din applikation. CoffeeScript giver dig mulighed for at gøre det på en række forskellige måder, der passer til dine behov.

objekter

Objektlitteraler eller hashes kan erklæres som deres JavaScript-kolleger og på nogle andre funky måder.

i betragtning af følgende JSON…

…kan du slippe kommaerne og krøllede seler:

så længe du indrykker med noget hvidt mellemrum, bliver strukturen indlejret som du ville forvente.

intervaller

intervaller deklareres med to heltal adskilt af to perioder, indpakket i firkantede parenteser.

days = 

intervaller er ikke en standard objekttype i Javascript, så de bliver kompileret ned til arrays.

for at få et underafsnit af et array kan du også passere i et interval. Ønsker at få dage fra tuesday_to_friday hvor mandag er 1 og søndag er 7? Da arrays er indekseret nulbaseret, starter vi ved 1 og slutter ved 4.

days = tuesday_to_friday = days

Du kan også erstatte hele sektioner af arrays på en lignende måde.

følgende…

days = 

ændrerdaysarray til at være.

Du kan også bruge intervaller til nedtælling for eksempel ville være10 til0.

Splat

en splat er en bekvem måde at acceptere flere værdier som argumenter til metoder.

i det følgende eksempel ønsker vi at tildele kudos-point til en gruppe forumbrugere for antallet af indlæg i en given uge.

den første person får 10 point, den anden får 6, den tredje får 2, og hver anden får et enkelt point.

lad os oprette en funktion, giveKudosmed firstsecondog third som parametre. For resten skal du bruge en splat, som er navnet på variablen efterfulgt af 3 perioder. Inden for giveKudos metode lad os kalde en uimplementeret addKudosToUser som tager to parametre, Brugeren og de punkter, der skal tilføjes. Vi vil ikke bekymre os om implementeringen, det er bare til illustrative formål.

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

næste kan vi bruge enfor intil loop overrest.

da vi har en række brugere:

users = 

Vi ønsker, at Pasan får 10 point, Amit får 6, Jim får 2 og derefter resten får 1.

Vi er nødt til at videregive brugere med perioderne til metoden til korrekt tildeling af arrayværdierne til parametrene som denne:

giveKudos users...

uden disse perioder users get er tildelt first parameter og undefined til resten.

klasser

klasser kan deklareres trivielt i CoffeeScript, hvilket er en Forfriskende kontrast til det meget mere detaljerede JavaScript.

skriv først nøgleordetclass, efterfulgt af navnet på din klasse.

metoder, herunder konstruktørmetoden, er skrevet med navnet på metoden efterfulgt af et kolon. Hvid plads er nødvendig før hver metode navn. Du kan derefter bruge funktionsoperatøren (->).

class TimeMachine constructor: ->

for at instantiere en forekomst af et objekt skal du bruge nøgleordet new efterfulgt af klassenavnet.

time_machine = new TimeMachine

instansvariabler

instansvariabler starter med et@ symbol. Så vi kan have en pilot

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

Du kan også få adgang til dem via dot notation.

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

i ovenstående eksempel strengen H. G. Wells ville blive udskrevet til konsollen.

i stedet for at indstille @pilot = pilot du kan skrive det i stenografi som denne:

class TimeMachine constructor: (@pilot) ->

klasse arv

for at skrive en underklasse kan du bruge extends som denne:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

lad os sigeTimeMachinehar en metodego med en parameter, der bliver logget ud, når tidsmaskinen er ved at rejse i tide.

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

lad os nu for hver gang maskine implementere gå og kaldesuper metode.

så ringer go() på forekomster af begge tidsmaskiner vil udskrive sin egen respektive lyd.

generel syntaks

Med CoffeeScript finder du din kode mere som en sætning på engelsk:

light_bulbs() if switch is on

hvilket er det samme som:

light_bulbs() unless switch is not on

mens sidstnævnte er sværere at analysere end førstnævnte, viser det dig omfanget af det nye sukker.

Her er en tabel med ækvivalenter fra CoffeeScript-dokumentationssiden om operatører og aliaser.

CoffeeScript	JavaScript
er	= = =
isnt	!= =
ikke	!
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 (?).

lad os sige, hvis auser ikke er logget ind og er indstillet endnu. Du vil have login-funktionen til at blive kaldt, hvis user ikke er til stede, så brug bare den eksistentielle operatør som sådan:

login() if not user?

Du kan også indstille standardværdier som sådan:

year ?= 1885

Du kan bruge den eksistentielle operatør på en lignende måde til en ternær operatør. Følgende eksempel ville sætte hilsen til at være enten message, hvis ikke undefined eller strengen ` ” Hej, Verden!”.

greeting = message ? "Hello, World!"

endelig er der en accessorvariant, som du kan bruge absorberenull referencer, når du sammenkæder egenskaber.

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

så i stedet for at hæve enTypeErrordette ville vende tilbageundefined.

forståelser

forståelser kan gøre din kode mere læsbar. I vores Kudos eksempel havde vifor loop går over to linjer, når vi kunne have skrevet det på en linje som denne:

en anden cool funktion ved looping over ting i CoffeeScript er, at sløjfen returnerer en række af resultaterne af Den sløjfe. Lad os sige, at jeg vil tælle fra 0 til 100 i multipla af 10. Alt jeg gør er at forberede min loop med en variabel opgave som sådan:

multiples = for num in num * 10

tilføjelse af parenteser du kan også bringe den videre til en linje!

multiples = (num * 10 for num in )

konklusion

vah! Det var meget at tage i, men som du kan se CoffeeScript er fuld af velsmagende sukkerholdige syntaks. Hvorfor ikke give det en bash i dit næste JavaScript-projekt og se, hvad det kompilerer ned til under hætten?

• Begyndervejledning til coffeescript
• coffeescript
• Lær Programmering
• lav en hjemmeside