LearnThe Absolute Beginner’ s Guide to CoffeeScript

CoffeeScript on tullut parin viime vuoden aikana yhä suositummaksi solmun omaksuttua sen.js – ja Rails-yhteisöt. Katsotaanpa katsomaan miksi se on tullut go-to kieli, kun ihmiset haluavat kirjoittaa JavaScript niiden sovellukset.

mikä on CoffeeScript?

CoffeeScript on kieli, joka käännetään JavaScriptiksi. Koodi .coffee-tiedostoja ei tulkita ajon aikana, kuten JavaScriptiä, vaan ne kootaan .js-tiedostot.

Kirjoitatko JavaScriptille solmua varten.JS tai minkä tahansa selaimen toteutus, CoffeeScript voidaan kirjoittaa tahansa ja kaikki makuja JavaScript.

miksi CoffeeScript?

aiemmin Javascriptillä ei ole ollut kovin loisteliasta mainetta 90-luvun ja 2000-luvun alun kopiointi-ja paste-mentaliteetin takia, näytti siltä, että vain harvoilla oli aavistustakaan, mitä oli tekeillä. Sitä halveksittiin vähemmän ”vakavana” kielenä. Kuitenkin, JavaScript kielenä on paljon tarjottavaa ja on joitakin super ominaisuuksia.

CoffeeScript hyödyntää JavaScriptin tehokkaita ominaisuuksia oppimatta JavaScriptin vähemmän tunnettuja ominaisuuksia lisäämällä Javascriptiin ”syntaktista sokeria”. Coffeescriptissä ei ole puolihuulia eikä kiharaisia henkseleitä, jotka muistuttavat Pythonin ja Rubyn kaltaisia syntaksia.

tämä tarkoittaa, että voit kirjoittaa vähemmän koodia ja tehdä asioita nopeammin. Se myös helpottaa lukemista ja ylläpitoa.

johtuen Optimoinneista CoffeeScript käyttää, kun se on käännetty alas, tuloksena JavaScript on aivan yhtä performant tai joissakin tapauksissa se on jopa enemmän performant yli käsin kirjoitettu koodi.

JavaScriptistä voi oppia paljon katsomalla JavaScriptin kokoamaa JavaScriptiä. Jos on jotain uutta, että näet siellä, tutkia sitä ja nähdä, miksi CoffeScript compiles tällä tavalla eikä mitä olet tottunut näkemään.

asennetaan CoffeeScript

asennetaan CoffeeScript, jotta voit seurata mukana. CoffeeScript on solmu.js-paketti. Joten se riippuu solmu.js ja paketinhallinta (npm).

OS X: ssä

solmussa.js voidaan asentaa OS X: n avoimen lähdekoodin Paketinhallintaohjelmalla Homebrew.voit tarkastella Homebrew: n asennusprosessia täällä.

varmista, että Homebrew on ajan tasalla kirjoittamalla brew update päätteeseesi.

solmun Homebrew-kaava.js on node. Joten asentaa solmu.js kirjoitat brew install node päätteeseesi. Noudata mahdollisia lisäohjeita, jos haluat muuttaa PATHs tai muuta vastaavaa.

kirjoita sitten npm install -g coffee-script asentaaksesi sen globaalisti.

Windowsissa

käy solmussa.js: n verkkosivuilla ja paina ”Asenna” – painiketta. Sen pitäisi automaattisesti tunnistaa maku Windows käytät ja asentaja alkaa ladata.

käy läpi asennusprosessi.

kun se on asennettu, avaa komentokehote ja kirjoita npm install -g coffee-script asentaaksesi sen globaalisti.

ja lopuksi

Type coffee -v komentorivillä nähdäksesi, että se on asennettu oikein.

komentorivin käyttö

coffee kääntäjää voidaan käyttää useilla tavoilla. Tässä pari katsomaan, mitä on tarjolla.

Suorita ja käännä

seuraava komento kokoaa kaikki .coffee tiedostot kansioon coffeescripts to .js tiedostot rinnakkaiseen puurakenteeseen javascripts – kansio.

coffee -o javascripts/ -c coffeescripts/

Varoitus

vaihtoehto -c tarkoittaa kääntämistä ja -o tarkoittaa tulostekansiota. Huomaa tilaus on lähtö sitten kääntää. Tämä johtuu siitä, että jos vaihdat järjestystä se ei toimi!

valvoja

suorittaa yllä olevan komennon aina, kun haluat kääntää CoffeeScript-tiedostoja, joten on toinenkin kätevä vaihtoehto, -w.

coffee -w -o javascripts/ -c coffeescripts/

valvoja kuuntelee muutoksia coffeescripts – kansion tiedostoihin ja kokoaa ne lennossa.

Jos lisäät uuden tiedoston coffeescripts kansio pitäisi kääntää, mutta jos lisäät uuden kansion ja CoffeeScript-tiedoston sisälle, että sitä ei käännetä. Tämä saattaa muuttua myöhemmissä versioissa.

Joining Files

Voit myös koota kaikki .coffee tiedostot yhteen JavaScript-tiedostoon. Tämä vähentää HTTP-pyynnön määrää selaimen on tehtävä ja parantaa suorituskykyä. Tätä varten käytetään -j vaihtoehto näin:

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

* on jokerimerkkioperaattori.

REPL

Jos kirjoitat coffee ilman vaihtoehtoja interaktiivinen komentotulkki avautuu. Tämä vastaa irb Rubyssa. Tämä on hyvä työkalu asioita konsolissa ja suorittaa nopeita kokeiluja.

tekstieditorin korostus

Jos aiot koodata Coffeescriptissä, on parasta käyttää syntaksikorostusta.

TextMate

Coffeescriptin keksijä Jeremy Ashkenas loi kätevän TextMate-paketin. Asennusohjeet löytyvät täältä.

Sublime Text 2

Sublime Text 2 on GitHub-käyttäjä Xavuran luoma liitännäinen. Voit asentaa tämän kautta Sublime Package Control, jos sinulla on, että jo.

hyvät jutut eli syntaksi

muuttujat

muuttujat Coffeescriptissä eivät vaadi avainsanaa var. Yksinkertaisesti nimetä muuttuja, yhtä suuri merkki, ja sitten arvo.

year = 1985speed = 88

merkkijonot

merkkijonot julistetaan lainausmerkeillä kuten useimmissa muissakin kielissä.

first_name = "Marty"

liittääksesi tai yhdistääksesi merkkijonoja, voit luetella ne yksi toisensa jälkeen plusmerkillä niiden välissä, näin:

full_name = first_name + " McFly"

voit myös sisällyttää hash-symbolin (#), jota seuraa kihara henkselit, ja niiden sisällä merkkijono muuttuja.

full_name = "#{first_name} McFly"

edellä mainituista kahdesta esimerkistä syntyisi merkkijono Marty McFly.

jälkimmäinen merkkijonojen interpolointityyppi toimii vain, kun käytetään kaksoislainauksia. Jos käytät yhden lainausmerkit teksti näkyy ”sellaisenaan”. Yhden sitaatin merkkijonot ovat kirjaimellisia merkkijonoja.

full_name = '#{first_name} McFly'

joten edellä oleva on #{first_name} McFly. Tämä peilaa käyttäytymistä.

funktiot

funktiot ilmoitetaan nimeämällä funktio, joka on yhtä kuin merkki, ja sitten erikoisfunktiotunnus (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

Emme ole käyttäneet avainsanaa return, koska jokainen funktio Coffeescriptissä palauttaa viimeisen koodirivin tuloksen.

Monivuoraiset funktiot kirjoitetaan useille riveille siten, että jokaisella lausekkeen jälkeisellä rivillä on jonkin verran valkoista tilaa ennen sitä.

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

Tämä asettaisi vuoden 1885 joka kerta. Jos haluamme vuoden olevan paljon joustavampi, mutta meillä on oletus, voimme tuoda sen metodin deklaraatioon näin:

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

tämä tarkoittaa sitä, että voimme kutsua tätä yhdellä arvolla speedyear tulee aina oletusarvo 1885.

 initialize_time_circuits(88)

menetelmiä voi kutsua myös sulkuja käyttämättä. Yllä oleva voidaan kirjoittaa myös seuraavasti:

 initialize_time_circuits 88

array

array array

on useita eri tapoja alustaa ja julistaa array CoffeeScript. Olet luultavasti tottunut näkemään taulukoita, jotka on julistettu hakasulkeilla ja arvot erotettu pilkuilla.

 mcflys = 

voit myös julistaa rivit usealle riville näin:

 mcflys = 

jokaisella rivillä on oltava valkoinen tila.

valinnaisesti voit poistaa perään pilkun jokaiselta riviltä.

 mcflys = 

Voit myös käyttää näiden kahden julistustyylin yhdistelmää.

seuraava esimerkki…

woah = 

…vastaa:

woah = 

, joka voi olla enemmän tai vähemmän luettavissa hakemuksesta riippuen. CoffeeScript voit tehdä sen eri tavoin tarpeisiisi.

oliot

Object literals tai hashes voidaan julistaa kuten niiden JavaScript-vastineet ja joillakin muilla funky tavoilla.

kun otetaan huomioon seuraava JSON…

…voit pudottaa pilkut ja kihartimet:

kunhan sisennät jonkin verran valkoista tilaa, rakenne saa sisäkkäisiä kuten odottaa.

vaihteluväli

vaihteluväli ilmoitetaan kahdella kokonaisluvulla erotettuna kahdella jaksolla, jotka on kääritty hakasulkeisiin.

days = 

alueet eivät ole Javascriptissä tavallinen oliotyyppi, joten ne saadaan käännettyä taulukoiksi.

saadaksesi joukon alaosan, voit myös läpäistä alueen. Haluatko saada päiviä tuesday_to_friday missä maanantai on 1 ja sunnuntai on 7? Koska matriisit on indeksoitu nollapohjaisiksi, alkaisimme 1: stä ja päättyisimme 4: ään.

days = tuesday_to_friday = days

voit korvata kokonaisia ryhmiä myös vastaavalla tavalla.

seuraava…

days = 

muuttaa days array on .

voit käyttää vaihteluvälejä myös lähtölaskentaan esimerkiksi olisi 100.

Splat

splat on kätevä tapa hyväksyä useita arvoja menetelmien argumenteiksi.

seuraavassa esimerkissä haluamme antaa pisteitä ryhmälle foorumin käyttäjiä tietyn viikon julkaisujen määrästä.

ensimmäinen saa 10 pistettä, toinen 6, kolmas 2 ja jokainen muu saa yhden pisteen.

luodaan funktio, giveKudos kanssa firstsecond ja third parametreina. Loput hyvin käyttää splat, joka on nimi muuttuja seuraa 3 jaksoa. giveKudos – menetelmän sisällä kutsutaan toteuttamatonta addKudosToUser, joka vaatii kaksi parametria, käyttäjän ja lisättävät pisteet. Emme murehdi toteutusta, se on vain havainnollistamista varten.

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

seuraavaksi voidaan käyttää for in silmukoimaan rest.

koska meillä on joukko käyttäjiä:

users = 

haluamme Pasan saavan 10 pistettä, Amit saa 6, Jim saa 2 ja loput saavat 1.

meidän täytyy siirtää käyttäjät, joilla on kaudet in menetelmään, jotta voimme oikein antaa matriisiarvot parametreille näin:

giveKudos users...

ilman näitä jaksoja, users get ’ s assigned to the first parametri ja undefined lopuille.

luokat

luokat voidaan julistaa triviaalisesti Coffeescriptissä, mikä on virkistävä vastakohta paljon verbaalisemmalle JavaScriptille.

kirjoita ensin avainsana class, jota seuraa luokkasi nimi.

menetelmät, mukaan lukien konstruktorin menetelmä, kirjoitetaan menetelmän nimen perässä kaksoispiste. Valkoinen tila tarvitaan ennen kunkin menetelmän nimi. Tällöin voidaan käyttää funktion operaattoria (->).

class TimeMachine constructor: ->

instantioidaksesi olion instanssin, käytä avainsanaa new, jota seuraa luokan nimi.

time_machine = new TimeMachine

instanssimuuttujat

instanssimuuttujat alkavat @ symbolilla. Eli meillä voi olla pilotti

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

niihin pääsee käsiksi myös pistetiedon kautta.

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

yllä olevassa esimerkissä merkkijono H. G. Wells tulostettaisiin konsolille.

sen sijaan, että asetettaisiin @pilot = pilot sen voi kirjoittaa pikakirjoituksella näin:

class TimeMachine constructor: (@pilot) ->

Luokkaperintö

alaluokan kirjoittamiseen voi käyttää extends näin:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

sanotaan, että TimeMachine on menetelmä go, jossa on yksi parametri, joka kirjautuu ulos, kun aikakone on aikamatkalla.

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

nyt jokaiselle Aikakoneelle toteuttaa mennä ja soittaa super menetelmä.

So calling go() molempien aikakoneiden instansseissa tulostetaan sen oma vastaava ääni.

yleinen syntaksi

Coffeescriptillä koodisi näyttää enemmän englanninkieliseltä lauseelta:

light_bulbs() if switch is on

, joka on sama kuin:

light_bulbs() unless switch is not on

vaikka jälkimmäistä on vaikeampi jäsentää kuin edellistä, se näyttää kyllä uuden sokerin laajuuden.

tässä on taulukko vastaavuuksista CoffeeScript-dokumentaatiosivulta operaattoreista ja Peitenimistä.

td> is

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

sanotaan, jos user ei ole vielä kirjautunut sisään ja asetettu. Haluat, että kirjautumisfunktiota kutsutaan jos user ei ole, käytä eksistentiaalista operaattoria näin:

login() if not user?

Voit myös asettaa oletusarvot näin:

year ?= 1885

voit käyttää eksistentiaalista operaattoria samalla tavalla keskussotilaalle. Seuraava esimerkki asettaisi tervehdyksen joko message, jos ei undefined tai merkkijonon ”” Hello, World!”.

greeting = message ? "Hello, World!"

lopuksi on accessor-variantti, jota voi käyttää absorboimaan null viittauksia, kun ketjutetaan ominaisuuksia yhteen.

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

joten TypeError nostamisen sijaan tämä palaisi undefined.

käsitykset

käsitykset voivat tehdä koodista luettavamman. Kudosesimerkissämme for silmukka meni kahden viivan yli, kun olisimme voineet kirjoittaa sen yhdelle riville näin:

toinen coffeescriptin asioiden silmukoinnin hieno piirre on se, että silmukka palauttaa joukon kyseisen silmukan tuloksia. Sanotaan, että haluan laskea 0: sta 100: aan kerrannaisina 10: stä. Esitän vain silmukkani muuttuvalla tehtävällä näin:

multiples = for num in num * 10

lisäämällä sulut voit tuoda sen myös yhdelle riville!

multiples = (num * 10 for num in )

johtopäätös

Woah! Siinä oli paljon sulateltavaa, mutta kuten näette, CoffeeScript on täynnä maukasta sokerista syntaksia. Miksi ei anna sille bash seuraavassa JavaScript projekti ja katso, mitä se compiles alas konepellin alla?

• beginner ’ s guide to coffeescript
• coffeescript
• Opi ohjelmointia
• tee verkkosivu