Share
Även om CoffeeScript är ett nytt språk lär du dig det mycket snabbt. Du borde ju, eftersom det bara är JavaScript som flaunting med några prickiga kläder trots allt. Det läser som Ruby eller Python, men kompilerar ner till ren, icke-fluffig JavaScript. Idag ska vi titta på varför alla pratar om CoffeeScript.
Med tillkomsten av kraftfulla JavaScript-motorer, som V8, har JavaScript kasta sin stigma av ett spetsat verktyg för ungdomsinteraktioner och förvandlat till ett helt kraftverk. Det har till och med hoppat från applikationer från klientsidan till serverns sida, node.js till exempel. Det faktum att det följer en ganska nifty, prototypbaserad ideologi gör inte heller det ont. Det råder ingen tvekan om att JavaScript är ett kritiskt språk nu och under överskådlig framtid.
Men jag har alltid känt att syntaxen själv är lite kludgy. Efter att ha arbetat med en blandning av Ruby och Python under de senaste åren har jag hittat JavaScript's halvkolon infused, parentesberoende, verbas syntax för att vara tråkig. Och från det jag kan samla, är jag inte ensam för att känna mig så här. Här kommer CoffeeScript till räddning!
CoffeeScript kompilerar ner till rå JS.
CoffeeScript är i grund och botten bara en syntaktisk omskrivning av JavaScript. Kärnspråket i sig förblir detsamma, med små semantiska förbättringar. Syntaxen modifieras, modelleras efter Python och Ruby.
Kom ihåg att CoffeeScript-kompilatorn utmatar ren JavaScript som inte bara följer bästa praxis och är läsbar men passerar även JSLint. Det betyder att du inte behöver oroa dig för kompatibilitet längs linjen. I det värsta fallet med att detta projekt dör, kan du bara hämta den orörda JS som CoffeeScript genererar och fortsätter med din kod. Du är inte låst i denna miljö.
Det här kan verka som ett främmande koncept, men under webbutvecklingsparaplyet har vi redan sett vår rättvisa del av denna ideologi. HAML är bara ett nytt sätt att skriva HTML medan SASS gör detsamma för CSS. Alla rensar upp strukturen och syntaxen i sina språk vilket gör dem enklare att arbeta med och därmed öka produktiviteten.
Du undrar nog hur koden själv ser ut så här är en snabb titt:
index = (lista, mål) -> [låg, hög] = [0, list.length] medan låg < high mid = (low + high) >> 1 val = lista [mid] returnera mitt om val är mål om val < target then low = mid + 1 else high = mid return -1
Detta är ett snabbt genomförande av en binär sökning. Försök inte att analysera själva koden just nu. Försök bara att bekanta dig med syntaxen.
Nedan är JavaScript-koden som CoffeeScript genererar:
var index; index = funktion (lista, mål) var hög, låg, mitten, val, _ref; _ref = [0, list.length], low = _ref [0], high = _ref [1]; medan (lågt < high) mid = (low + high) >> 1; val = lista [mitten]; om (val === mål) returnera mitt; om (val < target) low = mid + 1; else high = mid; return -1; ;
Här är några snabba fördelar och nackdelar med att använda CoffeeScript. Det här är inte heltäckande på något sätt, men jag tror att det är tillräckligt för att få en snabb översikt över systemet.
Det finns naturligtvis många andra punkter, inklusive semantiska och syntaktiska förbättringar.
De officiella metoderna för att komma igång inkluderar ett kommandoradsverktyg som kör under node.js och helt enkelt laddar ner källan och installerar den. Ingenting mycket att vägleda här. Hämta verktyget node.js och använd npm installera kaffe-script [eller för källan, bin / kakinstallation] för att installera och komma igång.
Situationen med Windows är lite mer komplicerad. Det finns inget rakt framåt för att få node.js eller källan installerad på Windows [utanför Cygwin]. Skäm aldrig bort. Ett antal företagande personer har skrivit kompilatorer som arbetar inbyggt på Windows. Jag har inkluderat några nedan:
Observera att kompilatorn, i kompilerad JavaScript-form, också är buntad med källan om du är intresserad. Det är närvarande under extra katalog med ett uppenbart namn.
Med det ur vägen kommer vi nu att titta på en handfull saker som visar dig hur CoffeeScript gör JavaScript lättare att konsumera!
Det första du behöver veta är hur CoffeeScript använder whitespace effektivt för att förenkla syntaxen. Människor med en Python-bakgrund kommer att finna denna triviala men för de andra, här är en snabb förklaring.
Först måste du inte avsluta varje rad med en halvkolon. Att avsluta en rad tolkas automatiskt för att vara slutet på det uttalandet. Till exempel, detta ...
siffror = [0, 1, 2, 3] name = "NetTuts +"
... sammanställer till detta:
var namn, siffror tal = [0, 1, 2, 3]; namn = "NetTuts +";
Därefter är du glad att veta att du kan göra bort med lockiga hängslen. De många hängslen för att öppna och stänga ett block? Allt är ute. I CoffeeScript använder du Python-esque indentation för att beteckna början och slutet av ett block.
CoffeeScript kräver inte onödiga parenteser eller lockiga hängslen.
Här är ett snabbt exempel. Se bort från allt utom indragningen för nu. Vi kommer till vila lite senare nedan:
om chasedByCylons runForYourLife ()
... kompilerar ner till
om (chasedByCylons) runForYourLife ();
Om du fortfarande är lite förvirrad, oroa dig inte. Syntaxen börjar bli mer meningsfull när vi lära känna språket bättre.
CoffeeScript ger ett antal alias för operatörer och nyckelord för att göra koden mer läsbar och intuitiv. Låt oss ta en titt på några av dem nu.
För det första jämförelseoperatörerna:
Accentsconagua
är kartor till === finnas inte sammanställer till !== == och != kompilera till === och !== respektive [som bästa praxis]Låt oss se dem snabbt på gång.
om byxa är onFire lookForWater () om spelet inte är bra dåligtMouth ();
... som sammanställer till ...
om (pant === onFire) lookForWater (); om (spel! == bra) badMouth ();
Ganska lätt att läsa, nej? Nu vidare till hur logiska operatörer är mappade.
och kartor till && eller är ett alias för || inte kompilerar ner till ! Bygger på vår tidigare kod:
om byxan är onFire och inte aDream lookForWater () om spelet inte är bra eller haughtyDevs badMouth ();
... som sammanställer till ...
om (pant === onFire &&! aDream) lookForWater (); om (spel! == bra || haughtyDevs) badMouth ();
Som du redan har sett ovan, den grundläggande om annat konstruera uppför sig som i normalt JavaScript, kännetecknar parenteserna och krullarna. Vi tittar på några variationer nedan.
om trött och uttråkad sömn () annars jog () // Raw JS nedan om (trött & & bored) sleep (); annars jog ();
Och här är hur den ternära operatören hanteras:
aktivitet = om söndagen då ärChilling annat isWorking // Raw JS under aktivitet = söndag? isChilling: isWorking;
En ytterligare semantisk förbättring är med såvida inte nyckelord. Detta fungerar som det exakta motsatsen till om.
keepRunning () om inte trötthet fortsätta arbeta om inte fokus är extremt lågt
Och den sammanställda JavaScript ...
om (! trött) keepRunning (); om (fokus! == extremt låg) keepWorking;
Omkopplingsdeklarationer kan vara lite otrevliga i JavaScript. CoffeeScript ger ett intuitivt omslag runt denna konstruktion.
Det börjar med växla sökord, som förväntat, följt av variabeln vars värde vi kontrollerar. Varje fall eller eventuellt värde föregås av när sökord följt av de uttalanden som ska utföras om det är en match.
Det finns inget behov av att lägga till en
ha sönderuttalande i slutet av varje fall uttalande: CoffeeScript gör det automatiskt för dig.
byta tid när 6,00 wakeUp () jotDownList () när 9.00 startar sedanWorking () när 13.00 sedan äter () när 23.00 finishUpWork () sömn () annars gör ingenting ()
Syntaxen ska vara ganska självförklarande om du redan vet motsvarande i JavaScript. Den enda punkten att notera här är användningen av sedan nyckelord. Det är vanligt att skilja villkoret från uttrycket utan att starta en ny linje. Du kan då använda för de andra villkorliga uttalandena samt loopar också.
Här är JS som CoffeeScript genererar för dig:
switch (tid) case 6.00: wakeUp (); jotDownList (); ha sönder; fall 9.00: startWorking (); ha sönder; fall 13.00: äta (); ha sönder; fall 23.00: finishUpWork (); sova(); ha sönder; standard: do nothing ();
Looping är en annan viktig konstruktion för din typiska JavaScript-kod. Var det looping genom siffror i en array eller noder i DOM, är du alltid i behov av looping genom samlingar.
CoffeeScript ger en mycket flexibel medan slinga som kan modifieras för att fungera som en generisk för eller göra medan slinga.
medan arbete> tid då freakOut () medan tiden> arbeta slappna av () mozyAround () // Raw JS medan (arbete> tid) freakOut (); medan (tid> arbete) relax (); mozyAround ();
fram tills är en annan semantisk förbättring och motsvarar Medan inte. Ett snabbt exempel nedan:
workOut () tills energi < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Looping över arrays är ganska lätt. Du måste använda för ... in konstruera för att gå igenom arrayen. Låt mig visa dig hur:
webbplatser = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] för webbplatsen i varningssidan för webbplatser
Om du föredrar att uttalandena ska vara i samma rad:
webbplatser = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] varningssida för webbplatsen på webbplatser
CoffeeScripts sammanställer dessa till grundläggande för slingor som så. Observera att längden på arrayen i enlighet med bästa praxis cachas i förväg.
var webbplats, webbplatser, _i, _len; webbplatser = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; för (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Iterating över associerade arrays [eller hashes eller ordböcker eller nyckelvärdespar] är lika lätt med av nyckelord.
chefer = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' för webbplatsen, chefen för cheferna alert manager + "manages" + site
Som förväntat sammanställer ovanstående ovan till en grundläggande loop som visas nedan:
var chef, chefer, webbplats; chefer = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; för (plats i chefer) manager = managers [site]; alert (manager + "hanterar" + sida);
Att skapa och använda funktioner är extremt lätt under CoffeeScript. För att definiera en funktion, listar du parametrarna som krävs och fortsätter sedan med funktionens kropp. Här, låt mig visa dig hur:
spelar = (konsol, spel = "Mass Effect") -> alert "Spelar # game på min # konsol." spelar "Xbox 360", "New Vegas"
Detta är den grundläggande syntaxen bakom att skapa och använda funktioner. Standardvärdet för parametrar kan definieras inline. CoffeeScript genererar koden för att kontrollera om ett värde har passerat in eller ej.
Att ringa in en funktion är lika lätt. Det finns inget behov av parentes: passera parametrarna efter varandra.
Som alltid är här den genererade koden för din referens:
var spelar; spelar = funktion (konsol, spel) if (game == null) game = "Mass Effect"; återvarsling ("Spelar" + spel + "på min" + konsol + "."); ; spelar ("Xbox 360", "New Vegas"); Ibland kan du ha något annat val än att använda rå JavaScript i din CoffeeScript-kod. Förhoppningsvis bör dessa fall vara långt och få mellan men det har också tagits med i beräkningen.
Du kan injicera rå JS i din kod genom att förpacka den med grav accenter, även känd som en backquote eller backtick. Allt som passeras in kommer således att vara helt orörd av CoffeeScript-kompilatorn.
rawJS = 'function () returnera someSuperComplexThingie; '// vilken nät du var rawJS; rawJS = function () returnera someSuperComplexThingie; ;
Inget händer med dem, de kan stanna exakt var de är. CoffeeScript fungerar sömlöst med något tredje partibibliotek, stort eller litet, eftersom det helt enkelt sammanställer till rå JavaScript. Du måste bara reformat och / eller refactor din kod mycket lite men bortsett från det, bör inkompatibiliteter inte vara en oro.
Så istället för att skriva detta:
$ (dokument) .ready (funktion () elemCollection = $ ('.samling'); för (i = 0; i<=elemCollection.length;i++) item = elemCollection[i]; // check for some random property here. I am skipping the check here colortoAdd = item.hasProperty()? yesColor : noColor; // I'm quite aware there are better ways to do this $(item).css ('background-color', colortoAdd); ); ... du skulle skriva ...
$ (dokument) .ready -> elemCollection = $ ('.collection') för objekt i elemCollection colortoAdd = om item.hasProperty () då yesColor annars noColor $ (item) .css 'bakgrundsfärg', colortoAdd Och vi har kommit till ett slut. Jag har inte täckt ett antal ämnen på högre nivåer, till exempel klasser, eftersom de ligger långt bortom omfattningen av en inledande artikel. Leta efter några avancerade CoffeeScript-tutorials på vägen!
Jag tror att CoffeeScript har ändrat hur jag skriver JavaScript och efter att ha läst detta hoppas jag att det också har förändrats. Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Glad kodning och tack så mycket för att läsa!
