LearnThe abszolút kezdő útmutató CoffeeScript

CoffeeScript egyre népszerűbb az elmúlt pár évben elfogadása miatt a csomópont.js és Rails közösségek. Vessünk egy pillantást arra, hogy miért vált ez a nyelv, amikor az emberek Javascriptet akarnak írni alkalmazásaikba.

mi az a CoffeeScript?

a CoffeeScript egy olyan nyelv, amelyet JavaScript-re fordítanak. Kód be .a coffee fájlokat nem értelmezik futási időben, mint a JavaScript, de össze vannak állítva .js fájlok.

hogy JavaScript-et írsz-e a csomóponthoz.js vagy bármely adott böngésző végrehajtását, CoffeeScript lehet írni minden ízek JavaScript.

miért CoffeeScript?

a múltban a JavaScriptnek nem volt a legnagyobb hírneve a 90-es évek és a 2000-es évek elején a copy-and-paste mentalitás miatt, úgy tűnt, hogy csak kevesen tudták, mi folyik itt. Úgy tekintettek rá, mint egy nem túl “komoly” nyelvre. A JavaScript mint nyelv azonban sokat kínál, és néhány szuper funkcióval rendelkezik.

a CoffeeScript a JavaScript erőteljes funkcióit használja anélkül, hogy megtanulná a JavaScript kevésbé ismert jellemzőit azáltal, hogy “szintaktikai cukrot” ad hozzá a JavaScript-hez. A CoffeeScript nem rendelkezik fél-kettőspontokkal és göndör zárójelekkel, hasonló szintaxissal, mint a Python és a Ruby.

Ez azt jelenti, hogy kevesebb kódot írhatsz és gyorsabban végezhetsz dolgokat. Ez megkönnyíti az olvasást és a karbantartást is.

a CoffeeScript által használt optimalizálások miatt, amikor lefordítják, az eredményül kapott JavaScript ugyanolyan teljesítményű, vagy bizonyos esetekben még jobban teljesít a kézzel írt kódhoz képest.

sokat tanulhat a JavaScript-ről, ha megnézi azt a Javascriptet, amelyre a CoffeeScript lefordít. Ha van valami új, amit ott lát, kutassa meg, és nézze meg, miért fordít így a CoffeScript, nem pedig azt, amit szokott látni.

A CoffeeScript telepítése

telepítsük a CoffeeScript-et, hogy követni tudja. A CoffeeScript egy csomópont.js csomag. Tehát a csomóponttól függ.js és a csomagkezelő (NPM).

az OS X

csomóponton.a js telepíthető a Homebrew, az OS X nyílt forráskódú csomagkezelője segítségével.

győződjön meg róla, hogy a Homebrew naprakész, írja be abrew update parancsot a terminálba.

a Homebrew képlet csomópont.js is node. Tehát telepíteni csomópont.js beírja brew install node a terminálba. Kövesse a megjelenő további utasításokat, ha meg kell változtatnia a PATHs vagy bármi hasonlót.

ezután írja be a npm install -g coffee-script parancsot a globális telepítéshez.

A Windows

látogatás csomópont.nyomja meg az “Install” gombot. Automatikusan fel kell ismernie a használt Windows ízét, és a telepítő elkezdi letölteni.

menjen végig a telepítési folyamaton.

a telepítés után nyissa meg a parancssort, és írja be anpm install -g coffee-script parancsot a globális telepítéshez.

és végül

írja be acoffee -v parancsot a parancssorba, hogy lássa, helyesen lett-e telepítve.

parancssor használata

acoffee fordító többféle módon használható. Itt van egy pár, hogy megnézze, mi áll rendelkezésre.

Futtatás és fordítás

a következő parancs lefordítja az összes .coffee fájlt a coffeescripts nevű mappában .js fájlok párhuzamos fa szerkezetben a javascripts / div > mappa.

coffee -o javascripts/ -c coffeescripts/

figyelem

a -cA fordítást jelenti, a -o a kimeneti mappát jelenti. Vegye figyelembe, hogy a megrendelés kimenetre kerül, majd lefordítja. Ennek oka az, hogy ha megváltoztatja a megrendelést, az nem működik!

figyelő

a fenti parancs futtatása minden alkalommal, amikor CoffeeScript fájlokat szeretne lefordítani, így van egy másik praktikus lehetőség,-w.

coffee -w -o javascripts/ -c coffeescripts/

a figyelő figyeli a coffeescripts mappában lévő fájlok változásait, és menet közben lefordítja azokat.

ha új fájlt ad hozzá a coffeescripts mappához, akkor a mappának le kell fordítania, azonban ha hozzáad egy új mappát és egy CoffeeScript fájlt, akkor az nem lesz lefordítva. Ez a későbbi verziókban megváltozhat.

fájlok összekapcsolása

az összes.coffee fájlt egyetlen JavaScript fájlba is lefordíthatja. Ez csökkenti a böngésző által végrehajtandó HTTP-kérések számát és javítja a teljesítményt. Ehhez használja a -j opciót, mint például:

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

a * egy helyettesítő karakter operátor.

REPL

ha beírja coffee opciók nélkül egy interaktív shell nyílik meg. Ez hasonló a irb Ruby-ban. Ez egy nagyszerű eszköz a dolgokat a konzolon, és teljesítő gyors kísérletek.

szövegszerkesztő kiemelése

Ha a CoffeeScript-ben kódol, akkor a legjobb dolog a szintaxis kiemelése.

TextMate

Jeremy Ashkenas, a CoffeeScript feltalálója létrehozott egy praktikus TextMate csomagot. A telepítési utasításokat itt találja.

Sublime Text 2

Sublime Text 2 egy plugin által létrehozott GitHub felhasználó Xavura. Ezt a Sublime Package Control segítségével telepítheti, ha már rendelkezik ezzel.

A jó dolgok, más néven a szintaxis

változók

a CoffeeScript változóinak nincs szükségük avar kulcsszóra. Egyszerűen nevezze meg a változót, egy egyenlőségjelet, majd az értéket.

year = 1985speed = 88

karakterláncok

a karakterláncok idézőjelekkel vannak deklarálva, mint a legtöbb más nyelven.

first_name = "Marty"

a karakterláncok összekapcsolásához vagy összefűzéséhez sorolhatja őket egymás után egy plusz szimbólummal, például:

full_name = first_name + " McFly"

a hash szimbólumot is felveheti (#), amelyet göndör zárójelek követnek, ezeken belül pedig a karakterlánc változó.

full_name = "#{first_name} McFly"

a fenti két példa létrehozná aMarty McFly karakterláncot.

az utóbbi típusú karakterlánc-interpoláció csak akkor működik, ha dupla idézőjeleket használ. Ha egyetlen idézőjelet használ, a szöveg “ahogy van”jelenik meg. Egyetlen idézet húrok szó húrok.

full_name = '#{first_name} McFly'

tehát a fentiek a#{first_name} McFly karakterláncai lesznek. Ez tükrözi a viselkedést.

függvények

a függvényeket a függvény, egyenlőségjel, majd egy speciális funkciószimbólum elnevezésével deklarálják (->).

initialize_time_circuits = -> year * flux_capacitor_constant * speed

nem használtuk a return kulcsszót, mert a CoffeeScript minden függvénye az utolsó kódsor eredményét adja vissza.

a többsoros függvények több sorra íródnak, a deklaráció után minden sornak van némi fehér helye előtte.

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

Ez az évet1885 minden alkalommal. Ha azt akarjuk, hogy az év sokkal rugalmasabb legyen, de van alapértelmezett értékünk, akkor ezt a következőképpen hozhatjuk fel a metódus deklaraionba:

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

Ez azt jelenti, hogy ezt a speed a year mindig alapértelmezés szerint 1885.

 initialize_time_circuits(88)

zárójelek használata nélkül is hívhat metódusokat. A fentiek úgy is írhatók, mint:

 initialize_time_circuits 88

tömbök

a tömbök inicializálásának és deklarálásának többféle módja van a CoffeeScript-ben. Valószínűleg megszokta, hogy szögletes zárójelekkel deklarált tömböket és vesszővel elválasztott értékeket lát.

 mcflys = 

tömböket több sorban is deklarálhat, mint ez:

 mcflys = 

minden sorban fehér szóköznek kell lennie.

opcionálisan eltávolíthatja a záró vesszőt minden sorból.

 mcflys = 

e két deklarációs stílus kombinációját is használhatja.

a következő példa…

woah = 

…egyenértékű a következővel:

woah = 

amely az alkalmazástól függően többé-kevésbé olvasható lehet. CoffeeScript lehetővé teszi, hogy csináld a különböző módon, hogy megfeleljen az Ön igényeinek.

objektumok

Az objektum literálok vagy hashek a JavaScript megfelelőikhez hasonlóan és más funky módon deklarálhatók.

a következő JSON…

…a vesszőket és a göndör zárójeleket eldobhatja:

mindaddig, amíg behúz egy kis fehér szóközt, a szerkezet beágyazódik, ahogy az elvárható.

tartományok

a tartományokat két egész számmal deklaráljuk, két ponttal elválasztva, szögletes zárójelbe csomagolva.

days = 

a tartományok nem szabványos objektumtípusok a Javascript-ben, így tömbökké lesznek összeállítva.

ahhoz, hogy egy alszakasz egy tömb akkor adja át a tartományban is. Szeretne napokat kapni tuesday_to_fridayhol van Hétfő 1vasárnap pedig 7? Mivel a tömbök nulla alapúak, 1-nél kezdjük és 4-nél fejezzük be.

days = tuesday_to_friday = days

a tömbök egész szakaszait hasonló módon is kicserélheti.

a következő…

days = 

módosítja a daystömböt .

használhatja a tartományokat a visszaszámláláshoz is, például lenne10 to0.

Splat

a splat kényelmes módja annak, hogy több értéket fogadjon el argumentumként a metódusokhoz.

a következő példában kudos pontokat szeretnénk kiosztani a fórum felhasználók egy csoportjának az adott hét bejegyzéseinek számáért.

az első személy kap 10 pontot, a második kap 6, a harmadik kap 2 és minden más kap egy pontot.

hozzunk létre egy függvényt,giveKudos Afirstsecond ésthird paraméterekkel. A többi jól használja a splat, amely a változó neve, amelyet 3 periódus követ. A giveKudosmetóduson belül hívjunk egy megvalósítatlanaddKudosToUser metódust, amely két paramétert vesz igénybe, a felhasználót és a hozzáadandó pontokat. Nem fogunk aggódni a megvalósítás miatt, csak szemléltető célokat szolgál.

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

ezután használhatjuk a for ina rest hurokját.

mivel van egy sor felhasználó:

users = 

azt akarjuk, hogy Pasan 10 pontot kapjon, Amit 6, Jim 2, majd a többi 1.

át kell adnunk a felhasználóknak a periódusokat a metódushoz, hogy megfelelően hozzárendeljük a tömb értékeit a következő paraméterekhez:

giveKudos users...

ezen időszakok nélkül users get hozzárendelve a first paraméter és undefined a többihez.

osztályok

osztályok triviálisan deklarálhatók a CoffeeScript-ben, ami Frissítő kontraszt a sokkal bőbeszédűbb JavaScripthez képest.

először írja be aclass kulcsszót, majd az osztály nevét.a

metódusokat, beleértve a konstruktor metódust is, a módszer nevével írják, amelyet kettőspont követ. Minden módszer neve előtt fehér szóközre van szükség. Ezután használhatja a függvény operátort (->).

class TimeMachine constructor: ->

egy objektum példányának példányosításához használja anew kulcsszót, amelyet az osztály neve követ.

time_machine = new TimeMachine

Példányváltozók

a Példányváltozók egy @ szimbólummal kezdődnek. Tehát lehet egy pilóta

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

pont jelöléssel is elérheti őket.

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

a fenti példában a H. G. Wells karakterlánc lesz nyomtatva a konzolra.

a @pilot = pilot beállítás helyett a következőképpen írhatod:

class TimeMachine constructor: (@pilot) ->

osztály öröklés

alosztály írásához használd a extends mint ez:

class Tardis extends TimeMachineclass DeLorean extends TimeMachine

tegyük fel, hogy TimeMachinerendelkezik egy módszerrel go egy paraméterrel, amely kijelentkezik, amikor az Időgép időben utazik.

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

most minden time machine implementnél hívjuk meg asuper metódust.

tehát a go() meghívása mindkét időgép példányain kinyomtatja a saját hangját.

Általános szintaxis

a CoffeeScript segítségével a kód jobban hasonlít egy angol mondatra:

light_bulbs() if switch is on

ami ugyanaz, mint:

light_bulbs() unless switch is not on

bár az utóbbit nehezebb elemezni, mint az előbbit, megmutatja az új cukor hatókörét.

itt egy táblázat az ekvivalensekről a CoffeeScript dokumentációs oldalról az operátorokról és az Álnevekről.

d

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

tegyük fel, hogy egyuser még nem jelentkezett be és be van állítva. Ha a user nincs jelen, akkor csak az ilyen egzisztenciális operátort használja:

login() if not user?

az ilyen alapértelmezett értékeket is beállíthatja:

year ?= 1885

az egzisztenciális operátort hasonló módon használhatja egy hármas operátornak. A következő példa szerint az üdvözlés vagy message, ha nem undefined vagy a ` ” Hello, világ!”.

greeting = message ? "Hello, World!"

végül van egy kiegészítő változat, amelyet fel lehet használni null hivatkozások, amikor tulajdonságokat láncol össze.

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

tehát a TypeErrorfelemelése helyett ez visszaadja a undefined értéket.

megértések

a megértések olvashatóbbá tehetik a kódot. A kudos példánkban a for hurok két vonalon haladt át, amikor egy ilyen sorra írhattuk volna:

a CoffeeScript dolgainak hurkolásának másik jó tulajdonsága, hogy a hurok a hurok eredményeinek tömbjét adja vissza. Tegyük fel, hogy 0-tól 100-ig akarok számolni a 10-es többszörösében. Csak annyit teszek, hogy a hurokomat egy ilyen változó hozzárendeléssel írom elő:

multiples = for num in num * 10

zárójelek hozzáadásával egy sorra is felveheti!

multiples = (num * 10 for num in )

következtetés

Woah! Ez volt a sok, hogy a de mint látható CoffeeScript tele van ízletes cukros szintaxis. Miért nem ad ez egy bash a következő JavaScript projekt, és mit fordít le a motorháztető alatt?

• kezdő útmutató a coffeescript-hez
• coffeescript
• tanulás programozás
• weboldal készítése