Learnde Absolute Beginner’ s Guide to CoffeeScript

CoffeeScript is de laatste jaren steeds populairder geworden vanwege de adoptie door de Node.JS en Rails gemeenschappen. Laten we eens kijken waarom het is uitgegroeid tot de go-to Taal wanneer mensen willen JavaScript te schrijven in hun apps.

Wat is CoffeeScript?

CoffeeScript is een taal die gecompileerd wordt naar JavaScript. Code in .koffie bestanden worden niet geà nterpreteerd tijdens runtime, zoals JavaScript, maar worden gecompileerd in .js bestanden.

of u voor JavaScript schrijft voor het knooppunt.js of een bepaalde browser implementatie, CoffeeScript kan worden geschreven voor alle smaken van JavaScript.

waarom CoffeeScript?

in het verleden, JavaScript heeft niet de meest stellaire van reputaties als gevolg van de copy-and-paste mentaliteit van de jaren 90 en begin 2000, het leek erop dat slechts een paar hadden enig idee wat er gaande was. Het werd beschouwd als een niet zo” serieuze ” taal. Echter, JavaScript als taal heeft veel te bieden en heeft een aantal super functies.

CoffeeScript maakt gebruik van de krachtige functies van JavaScript zonder de minder bekende functies van JavaScript te leren door “syntactische suiker” toe te voegen aan JavaScript. CoffeeScript heeft niet de semi-dubbele punten en krullende beugels, vergelijkbaar met de syntaxis van Python en Ruby.

Dit betekent dat u minder code kunt schrijven en dingen sneller kunt doen. Het maakt het ook makkelijker om te lezen en te onderhouden.

door optimalisaties gebruikt CoffeeScript, wanneer het gecompileerd is, is het resulterende JavaScript net zo performant of in sommige gevallen zelfs performanter dan handgeschreven code.

U kunt veel over JavaScript leren door te kijken naar het JavaScript dat CoffeeScript compileert. Als er iets nieuws is dat je daar ziet, onderzoek het dan en zie waarom CoffeScript op die manier compileert in plaats van wat je gewend bent te zien.

CoffeeScript installeren

laten we CoffeeScript installeren zodat u kunt volgen. CoffeeScript is een knooppunt.js pakket. Dus het hangt af van Node.js en de package manager (npm).

op OS X

knooppunt.js kan worden geà nstalleerd met Homebrew, een open source Package Manager voor OS X. U kunt het installatieproces van Homebrew hier bekijken.

zorg ervoor dat uw Homebrew up-to-date is door brew update in uw terminal te typen.

De Homebrew-formule voor knooppunt.js is node. Dus om Node te installeren.js u typt brew install node in uw terminal. Volg alle aanvullende instructies die verschijnen als u PATHs of iets dergelijks moet wijzigen.

Typ dan npm install -g coffee-script om het globaal te installeren.

op Windows

bezoek knooppunt.js ‘website en druk op de” Installeren ” knop. Het moet automatisch detecteren uw smaak van Windows die u gebruikt en een installateur zal beginnen te downloaden.

ga door het installatieproces.

zodra het is geïnstalleerd, open uw opdrachtprompt en typ npm install -g coffee-script om het globaal te installeren.

en tenslotte

Typ coffee -v in uw opdrachtregel om te zien of het correct is geïnstalleerd.

Commandoregelgebruik

decoffee compiler kan op verschillende manieren worden gebruikt. Hier is een paar om te zien wat er beschikbaar is.

Start en compileer

het volgende commando zal al uw .coffee bestanden compileren in een map genaamd coffeescripts naar .js bestanden in een parallelle boomstructuur in de javascripts map.

coffee -o javascripts/ -c coffeescripts/

waarschuwing

de optie -c betekent compileren en -o betekent de uitvoermap. Merk op dat de volgorde wordt uitgevoerd en vervolgens gecompileerd. Dit komt omdat als je de bestelling verwisselt het niet werkt!

Watcher

voert het bovenstaande commando uit elke keer dat u CoffeeScript-bestanden wilt compileren, dus er is nog een handige optie om te gebruiken, -w.

coffee -w -o javascripts/ -c coffeescripts/

de watcher luistert naar wijzigingen in de bestanden in de coffeescripts map en compileert ze meteen.

Als u een nieuw bestand toevoegt aan de coffeescripts map moet compileren, maar als u een nieuwe map en een CoffeeScript-bestand toevoegt, zal het niet gecompileerd worden. Dit kan veranderen in latere versies.

samenvoegen van bestanden

U kunt ook al uw .coffee bestanden compileren tot een enkel JavaScript-bestand. Dit vermindert het aantal HTTP-verzoeken dat een browser moet maken en verbetert de prestaties. Gebruik hiervoor de optie -j als volgt:

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

de * is een joker.

REPL

als u coffee typt zonder opties opent een interactieve shell. Dit is vergelijkbaar met irb in Ruby. Dit is een geweldig hulpmiddel voor dingen in de console en het uitvoeren van snelle experimenten.

Teksteditoraccentuering

Als u in CoffeeScript gaat coderen, kunt u het beste syntaxisaccentuering gebruiken.

TextMate

Jeremy Ashkenas, de uitvinder van CoffeeScript, creëerde een handige TextMate-bundel. Voor installatie-instructies ga hier.

Sublime Text 2

Sublime Text 2 heeft een plugin gemaakt door GitHub gebruiker Xavura. Je kunt dit installeren via de Sublime Package Control, als je dat al hebt.

The Good Stuff a. k. a.de syntaxis

variabelen

variabelen in CoffeeScript vereisen niet het trefwoord var. Geef je variabele een naam, een gelijk-teken, en dan de waarde.

year = 1985speed = 88

Strings

Strings worden gedeclareerd met aanhalingstekens zoals in de meeste andere talen.

first_name = "Marty"

om tekenreeksen samen te voegen of samen te voegen, kunt u ze één voor één weergeven met een plusteken ertussen, zoals dit:

full_name = first_name + " McFly"

u kunt ook het hash-symbool (#), gevolgd door accolades, en daarin de stringvariabele.

full_name = "#{first_name} McFly"

de bovenstaande twee voorbeelden zouden de tekenreeks Marty McFlycreëren.

Het Laatste Type string interpolatie werkt alleen als u dubbele aanhalingstekens gebruikt. Als u enkele aanhalingstekens gebruikt, wordt de tekst weergegeven “as is”. Enkele aanhalingstekens zijn letterlijke strings.

full_name = '#{first_name} McFly'

dus het bovenstaande zal de tekenreeks zijn van #{first_name} McFly. Dit weerspiegelt gedrag.

functies

functies worden gedeclareerd door de functie te benoemen, is gelijk aan teken, en vervolgens een speciaal functiesymbool (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

we hebben het trefwoord return niet gebruikt omdat elke functie in CoffeeScript het resultaat van de laatste regel code retourneert.

Multi-lined functies zijn writen op meerdere regels met elke regel na de declaratie met enige witruimte ervoor.

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

Dit zou het jaar instellen op 1885 elke keer. Als we het jaar veel flexibeler willen maken maar een standaard hebben, kunnen we het als volgt in de declaraion-methode brengen:

Dit betekent dat we dit kunnen aanroepen met één waarde van speed de year zal altijd standaard 1885.

 initialize_time_circuits(88)

u kunt ook methoden aanroepen zonder haakjes te gebruiken. Het bovenstaande kan ook geschreven worden als:

 initialize_time_circuits 88

Arrays

Er zijn verschillende manieren om arrays te initialiseren en te declareren in CoffeeScript. Je bent waarschijnlijk gewend om arrays gedeclareerd te zien met vierkante haakjes en waarden gescheiden door komma ‘ s.

 mcflys = 

u kunt ook arrays over meerdere regels als volgt declareren:

 mcflys = 

u moet witruimte hebben op elke regel.

Optioneel kunt u de achterliggende komma uit elke regel verwijderen.

 mcflys = 

U kunt ook een combinatie van deze twee declaratiestijlen gebruiken.

het volgende voorbeeld …

woah = 

…is het equivalent van:

woah = 

die min of meer leesbaar kan zijn afhankelijk van uw toepassing. Met CoffeeScript kunt u dit op verschillende manieren doen om aan uw behoeften te voldoen.

objecten

Objectletters of hashes kunnen worden gedeclareerd zoals hun JavaScript-tegenhangers en op een aantal andere funky manieren.

gegeven het volgende JSON …

…kunt u de komma ‘ s en accolades laten vallen:

zolang u inspringt met wat witruimte, wordt de structuur genest zoals u zou verwachten.

bereiken

bereiken worden gedeclareerd door twee gehele getallen, gescheiden door twee perioden, omwikkeld met vierkante haakjes.

days = 

bereiken zijn geen standaard objecttype in Javascript, dus ze worden gecompileerd tot arrays.

om een sub-sectie van een array te krijgen kunt u ook binnen een bereik passeren. Wilt u dagen ophalen van tuesday_to_friday waarbij maandag 1 is en zondag 7? Omdat arrays zijn geïndexeerd op nul gebaseerd, zouden we beginnen bij 1 en eindigen bij 4.

days = tuesday_to_friday = days

u kunt ook hele secties van arrays op dezelfde manier vervangen.

de volgende …

days = 

wijzigt de days array om te worden.

u kunt ook bereiken gebruiken om af te tellen, bijvoorbeeld zou 10 to 0zijn.

Splat

een splat is een handige manier om meerdere waarden als argumenten voor methoden te accepteren.

in het volgende voorbeeld willen we kudos-punten toekennen aan een groep forumgebruikers voor het aantal berichten in een bepaalde week.

de eerste persoon krijgt 10 punten, de tweede krijgt 6, de derde krijgt 2 en ieder ander krijgt een enkel punt.

laten we een functie aanmaken, giveKudos met firstsecond, en third als parameters. Voor de rest goed gebruik maken van een splat, dat is de naam van de variabele gevolgd door 3 perioden. Binnen degiveKudos methode noemen we een niet-geà mplementeerdeaddKudosToUser die twee parameters neemt, de gebruiker en de punten die moeten worden toegevoegd. We gaan ons geen zorgen maken over de implementatie, het is alleen voor illustratieve doeleinden.

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

vervolgens kunnen we een for in gebruiken om de restte herhalen.

gegeven dat we een reeks gebruikers hebben:

users = 

we willen dat Pasan 10 punten krijgt, Amit 6, Jim 2 en de rest 1.

We moeten gebruikers met de perioden doorgeven aan de methode om de array waarden correct toe te wijzen aan de parameters zoals deze:

giveKudos users...

zonder deze perioden, users get ‘ s toegewezen aan de first parameter en undefined voor de rest.

klassen

klassen kunnen triviaal gedeclareerd worden in CoffeeScript, wat een Verfrissend contrast is met het veel uitgebreidere JavaScript.

schrijf eerst het trefwoord class, gevolgd door de naam van uw klasse.

methoden, inclusief de constructormethode, worden geschreven met de naam van de methode gevolgd door een dubbele punt. Er is witruimte nodig voor elke methodenaam. U kunt dan de functieoperator gebruiken (->).

class TimeMachine constructor: ->

gebruik het trefwoord new gevolgd door de klassenaam.

time_machine = new TimeMachine

Instance variabelen

Instance variabelen beginnen met een @ symbool. Dus we kunnen een pilot

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

u kunt ze ook benaderen via dot notatie.

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

in het bovenstaande voorbeeld wordt de tekenreeks H. G. Wells afgedrukt op de console.

in plaats van @pilot = pilot kunt u het als volgt opschrijven:

class TimeMachine constructor: (@pilot) ->

Klasse overerving

om een subklasse te schrijven kunt u extends zoals dit gebruiken:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

laten we zeggen TimeMachine heeft een methode go met één parameter die wordt uitgelogd wanneer de tijdmachine op het punt staat in de tijd te reizen.

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

laten we nu voor elke time machine gaan implementeren en de super methode aanroepen.

het aanroepen van go() op instanties van beide tijdmachines zal het eigen respectievelijke geluid afdrukken.

algemene syntaxis

met CoffeeScript ziet uw code er meer uit als een zin in het Engels:

light_bulbs() if switch is on

wat hetzelfde is als:

light_bulbs() unless switch is not on

hoewel de laatste moeilijker te ontleden is dan de eerste, toont het wel de reikwijdte van de nieuwe suiker.

Hier is een tabel met equivalenten van de CoffeeScript documentatiepagina over Operators en aliassen.

CoffeeScript	JavaScript
is	===
geen	!= =
niet	!
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 (?).

stel dat een user nog niet is ingelogd en is ingesteld. U wilt dat de login functie wordt aangeroepen als de user niet aanwezig is, gebruik dan gewoon de existentiële Operator als volgt:

login() if not user?

u kunt de standaardwaarden ook zo instellen:

year ?= 1885

U kunt de existentiële Operator op een vergelijkbare manier gebruiken als een ternary centrale. Het volgende voorbeeld stelt begroeting in op ofwel message, zo niet undefined of de tekenreeks ‘” Hello, World!”.

greeting = message ? "Hello, World!"

tot slot is er een accessorvariant die u kunt gebruiken absorbeer up null referenties wanneer u eigenschappen aan elkaar koppelt.

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

dus in plaats van het verhogen van een TypeError geeft dit undefinedterug.

bevattingsvermogen

bevattingsvermogen kan uw code leesbaarder maken. In ons kudos voorbeeld hadden we de for lus die over twee regels ging, terwijl we het op één regel als deze hadden kunnen schrijven:

een andere leuke eigenschap van het over dingen lusenin CoffeeScript is dat de lus een array van de resultaten van die lus retourneert. Laten we zeggen dat ik van 0 tot 100 wil tellen in veelvouden van 10. Het enige wat ik doe is mijn lus voorvoegen met een variabele toewijzing zoals deze:

multiples = for num in num * 10

haakjes toevoegen Je kunt het ook op één regel zetten!

multiples = (num * 10 for num in )

conclusie

Woah! Dat was veel om in te nemen, maar zoals je kunt zien staat CoffeeScript vol met smakelijke suikerhoudende syntaxis. Waarom niet geef het een bash in uw volgende JavaScript-project en zie wat het compileert tot onder de motorkap?

• beginnersgids voor coffeescript
• coffeescript
• leren programmeren
• Maak een website