Lærthe Absolute Beginner’ S Guide to CoffeeScript

CoffeeScript har blitt stadig mer populært de siste par årene på grunn av Sin adopsjon Av Noden.js og Rails samfunn. La oss ta en titt på hvorfor det er blitt go-to språk når folk ønsker å skrive JavaScript i sine apps.

Hva Er CoffeeScript?

CoffeeScript Er et språk som blir kompilert Til JavaScript. Kode inn .kaffe filer blir ikke tolket under kjøring, som JavaScript, men er kompilert inn .js-filer.

Enten du skriver For JavaScript For Noden.js eller en gitt nettleser implementering, Kan CoffeeScript skrives for alle smaker Av JavaScript.

Hvorfor CoffeeScript?

Tidligere Har JavaScript ikke hatt den mest fremragende omdømmet på grunn av kopi-og-lim-mentaliteten på 90-tallet og tidlig på 2000-tallet, det virket som om bare noen få hadde noen ide om hva som foregikk. Det ble sett ned på som et ikke så «seriøst» språk. JavaScript som språk har imidlertid mye å tilby og har noen superfunksjoner.CoffeeScript benytter seg av De kraftige Funksjonene I JavaScript uten å lære De mindre kjente funksjonene I JavaScript ved å legge til «syntaktisk sukker» Til JavaScript. CoffeeScript har ikke semi-kolon og krøllete bukseseler, lignende syntaks til slike Som Python og Ruby.

Dette betyr at du kan skrive mindre kode og gjøre ting raskere. Det gjør det også lettere å lese og vedlikeholde.På grunn av optimaliseringer CoffeeScript bruker, når det er kompilert ned, den resulterende JavaScript er like performant eller i noen tilfeller er det enda mer performant over håndskrevet kode.

du kan lære mye Om JavaScript ved å se På JavaScript Som CoffeeScript kompilerer ned til. Hvis det er noe nytt som du ser der, forskning det og se hvorfor CoffeScript kompilerer på den måten i stedet for hva du er vant til å se.

Installere CoffeeScript

la oss installere CoffeeScript slik at du kan følge med. CoffeeScript er En Node.js pakke. Så det avhenger Av Node.js og pakkebehandleren (npm).

PÅ OS x

Node.js kan installeres ved Hjelp Av Homebrew, en åpen kildekode Pakkebehandling FOR OS X. du kan se gjennom installasjonsprosessen Av Homebrew her.

Pass På At Homebrew er oppdatert ved å skrive brew update i terminalen din.

Homebrew-formelen for Node.js er node. Så for å installere Node.js du skriver inn brew install node i terminalen din. Følg eventuelle tilleggsinstruksjoner som vises hvis du må endre PATH s eller noe sånt.

skriv deretter npm install -g coffee-script for å installere det globalt.

På Windows

Besøk Node.js ‘nettsted og trykk på» Installer » – knappen. Det bør automatisk oppdage smaken Av Windows du bruker, og et installasjonsprogram vil begynne å laste ned.

Gå gjennom installasjonsprosessen.

når den er installert, åpner Du Kommandoprompt og skriver npm install -g coffee-script for å installere den globalt.

Og til slutt

Skriv coffee -v i kommandolinjen for å se at den er riktig installert.

Kommandolinjebruk

coffee kompilatoren kan brukes på flere måter. Her er et par for å se hva som er tilgjengelig.

Kjør og Kompilere

følgende kommando vil kompilere alle dine .coffee filer i en mappe som heter coffeescripts til .js filer i en parallell trestruktur i javascripts mappe.

coffee -o javascripts/ -c coffeescripts/

Advarsel

alternativet-c betyr å kompilere og-o betyr utdatamappen. Legg merke til at bestillingen er utdata og deretter kompilere. Dette er fordi hvis du bytter rekkefølgen det ikke fungerer!

Watcher

Kjører kommandoen ovenfor hver gang du vil kompilere CoffeeScript-filer, så det er et annet praktisk alternativ å bruke, -w.

coffee -w -o javascripts/ -c coffeescripts/

watcher lytter til endringer i filene icoffeescripts mappen og kompilerer dem på fly.

Hvis du legger til en ny fil icoffeescripts mappen skal kompilere, men hvis du legger til en ny mappe og En CoffeeScript fil inne at det ikke vil bli kompilert. Dette kan endres i senere versjoner.

Bli Med Filer

du kan også kompilere alle dine .coffee filer ned til En Enkelt JavaScript-fil. Dette vil redusere ANTALL HTTP-forespørsler en nettleser må lage og forbedre ytelsen. For å gjøre dette bruk-j alternativet slik:

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

* er en jokertegnoperatør.

REPL

hvis du skriver coffee uten noen alternativer åpnes et interaktivt skall. Dette ligner påirb I Ruby. Dette er et flott verktøy for ting ut i konsollen og utføre raske eksperimenter.

Tekstredigerer Utheving

hvis du skal kode I CoffeeScript, er det best å gjøre syntaksutheving.

TextMate

Jeremy Ashkenas, CoffeeScript oppfinner, laget en hendig TextMate bunt. For installasjonsinstruksjoner gå her.

Sublime Text 2

Sublime Text 2 har en plugin laget Av GitHub bruker Xavura. Du kan installere dette via Sublime Package Control, hvis du allerede har det.

De Gode Greiene aka Syntaksen

Variabler

Variabler i CoffeeScript krever ikke søkeordet var. Bare navn din variabel, et likhetstegn, og deretter verdien.

year = 1985speed = 88

Strenger

Strenger er deklarert med anførselstegn som på de fleste andre språk.

first_name = "Marty"

for å koble sammen eller sammenkjede strenger, kan du liste dem en etter en med et plussymbol i mellom, slik:

full_name = first_name + " McFly"

du kan også inkludere hash-symbolet (#), etterfulgt av krøllete braces, og innenfor de strengens grenser.variabel.

full_name = "#{first_name} McFly"

de ovennevnte to eksemplene vil skape strengen Marty McFly.

den sistnevnte typen strenginterpolering fungerer bare når du bruker doble anførselstegn. Hvis du bruker single-sitater teksten vises «som den er». Enkelt sitat strenger er bokstavelig strenger.

full_name = '#{first_name} McFly'

slik at ovennevnte vil være strengen av #{first_name} McFly. Dette speiler atferd.

Funksjoner

Funksjoner deklareres ved å navngi funksjonen, likhetstegnet og deretter et spesialfunksjonssymbol (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

vi har ikke brukt nøkkelordetreturn fordi hver funksjon i CoffeeScript returnerer resultatet av den siste kodelinjen.

Multi-lined funksjoner skrives på flere linjer med hver linje etter at erklæringen har litt hvit plass før den.

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

dette vil sette året til 1885 hver gang. Hvis vi vil at året skal være mye mer fleksibelt, men har en standard, kan vi ta det opp i metoden declaraion slik:

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

dette vil bety at vi kan kalle dette med en verdi av speedyear vil alltid standard til 1885.

 initialize_time_circuits(88)

du kan også ringe metoder uten å bruke parenteser. Ovennevnte kan også skrives som:

 initialize_time_circuits 88

Arrays

det er flere forskjellige måter å initialisere og erklære arrays i CoffeeScript. Du er sannsynligvis vant til å se arrays deklarert med firkantede parenteser og verdier skilt av kommaer.

 mcflys = 

du kan også deklarere arrays over flere linjer som dette:

 mcflys = 

du må ha hvit plass på hver linje.

Du kan Eventuelt fjerne det etterfølgende kommaet fra hver linje.

 mcflys = 

Du kan også bruke en kombinasjon av disse to deklarasjonsstilene.

følgende eksempel…

woah = 

…tilsvarer:

woah = 

som kan være mer eller mindre leselig avhengig av søknaden din. CoffeeScript lar deg gjøre det på en rekke måter som passer dine behov.

Objects

Objektlitteraler eller hashes kan deklareres som Deres JavaScript-kolleger og på noen andre funky måter.

Gitt FØLGENDE JSON…

…du kan slippe komma og krøllete braces:

så lenge du rykker inn med litt hvitt mellomrom, blir strukturen nestet som du forventer.

Områder

Områder er deklarert med to heltall adskilt av to perioder, innpakket i firkantede parenteser.

days = 

Områder er ikke en standard objekttype I Javascript, slik at de blir kompilert ned til arrays.

for å få en underdel av en matrise kan du passere i et område også. Ønsker du å få dager fra tuesday_to_friday hvor mandag er1 og søndag er7? Siden arrays er indeksert nullbasert, starter vi på 1 og slutter på 4.

days = tuesday_to_friday = days

du kan erstatte hele deler av arrays på en lignende måte også.

følgende…

days = 

Endrerdays matrisen skal være.

du kan også bruke områder til nedtelling for eksempel ville være10til0.

Splat

en splat er en praktisk måte å godta flere verdier som argumenter til metoder.

i følgende eksempel ønsker vi å tildele kudos poeng til en gruppe forumbrukere for antall innlegg i en gitt uke.

Den første personen får 10 poeng, den andre får 6, den tredje får 2 og alle andre får et enkelt poeng.

la oss lage en funksjon,giveKudos Medfirstsecond ogthird som parametere. For resten bruker du en splat, som er navnet på variabelen etterfulgt av 3 perioder. I giveKudos metoden la oss kalle en unimplementedaddKudosToUser som tar to parametere, brukeren og poengene som skal legges til. Vi kommer ikke til å bekymre deg for implementeringen, det er bare for illustrative formål.

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

Neste kan vi bruke en for intil sløyfe over rest.

Gitt vi har en rekke brukere:

users = 

Vi ønsker Pasan å få 10 poeng, Amit å få 6, Jim å få 2 og deretter resten for å få 1.

Vi må passere i brukere med perioder i til metoden for å riktig tildele matriseverdiene til parametrene som dette:

giveKudos users...

Uten disse periodene, users get er tildelt first parameter Og undefined til resten.

Klasser

Klasser kan deklareres trivielt i CoffeeScript som er en forfriskende kontrast til det mye mer verbose JavaScript.

skriv først søkeordet class, etterfulgt av navnet på klassen din.

Metoder, inkludert konstruktørmetoden, er skrevet med navnet på metoden etterfulgt av et kolon. Hvit plass er nødvendig før hvert metodenavn. Du kan deretter bruke funksjonsoperatøren (->).

class TimeMachine constructor: ->

for å starte en forekomst av et objekt, bruk nøkkelordetnew etterfulgt av klassenavnet.

time_machine = new TimeMachine

Instansvariabler

Instansvariabler starter med et@ symbol. Så vi kan ha en pilot

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

du kan også få tilgang til dem via dot notasjon.

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

i eksemplet ovenfor vil strengenH. G. Wells skrives ut på konsollen.

I Stedet for å sette @pilot = pilot du kan skrive det i stenografi som dette:

class TimeMachine constructor: (@pilot) ->

Klasse Arv

for å skrive en underklasse kan du brukeextends som dette:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

La oss siTimeMachine har en metodego med en parameter som blir logget ut når Tidsmaskinen er i ferd med å reise i tid.

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

la oss nå for hver maskin implementere gå og ringesuper – metoden.

så ringer go() på forekomster av begge tidsmaskiner vil skrive ut sin egen respektive lyd.

Generell Syntaks

Med CoffeeScript finner du koden din mer som en setning på engelsk:

light_bulbs() if switch is on

Som er det samme som:

light_bulbs() unless switch is not on

mens sistnevnte er vanskeligere å analysere enn den tidligere, viser den deg omfanget av det nye sukkeret.

Her er en tabell med ekvivalenter fra CoffeeScript-dokumentasjonssiden om Operatører og Aliaser.

= = =

Javascript
er
	!= =
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 (?).

La oss si om en user ikke har logget på og blitt satt ennå. Du vil at påloggingsfunksjonen skal kalles hvis user ikke er til stede, bruk Bare Den Eksistensielle Operatøren slik:

login() if not user?

du kan også angi standardverdier som så:

year ?= 1885

Du kan bruke Den Eksistensielle Operatøren på en lignende måte til en ternær operatør. Følgende eksempel vil sette hilsen til å være enten message, hvis ikke undefined eller strengen » Hei, Verden!».

greeting = message ? "Hello, World!"

Endelig er Det en tilbehørsvariant som du kan bruke absorber opp null referanser når du kjederegenskaper sammen.

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

så i stedet for å heve en TypeError vil dette returnere undefined.

Comprehensions

Comprehensions kan gjøre koden mer lesbar. I vårt kudos-eksempel hadde vi for loop går over to linjer, da vi kunne ha skrevet den på en linje som dette:En annen kul funksjon ved å looping over ting i CoffeeScript er at sløyfen returnerer en rekke resultater av den sløyfen. La oss si at jeg vil telle fra 0 til 100 i multipler på 10. Alt jeg gjør er å prepend min sløyfe med en variabel oppgave som så:

multiples = for num in num * 10

Legge til parenteser du kan ta det med på en linje også!

multiples = (num * 10 for num in )

Konklusjon

Woah! Det var mye å ta i, men som du kan se CoffeeScript er full av velsmakende sukkerholdig syntaks. Hvorfor ikke gi det en bash i ditt neste JavaScript-prosjekt og se hva det kompilerer ned til under hetten?

• nybegynner guide til coffeescript
• coffeescript
• lær programmering
• lag et nettsted