Share
Selv om CoffeeScript er et nytt språk, lærer du det veldig fort. Du burde, siden det bare er JavaScript flaunting med noen prangende klær, tross alt. Den leser som Ruby eller Python, men kompilerer seg til rent, ikke-fluffy JavaScript. I dag skal vi se på hvorfor alle snakker om CoffeeScript.
Med tilkomsten av kraftige JavaScript-motorer, som V8, har JavaScript kuttet sin stigmatisering av et spennende verktøy for ungdomsinteraksjoner og forvandlet til et helt kraftverk. Det har til og med hoppet fra klientsiden applikasjoner til server side, node.js for eksempel. Det faktum at det overholder en ganske nifty, prototypebasert ideologi, gjør heller ikke vondt. Det er ingen tvil om at JavaScript er et kritisk språk nå og i overskuelig fremtid.
Men jeg har alltid følt seg syntaxen selv for å være litt kludgy. Etter å ha jobbet med en blanding av Ruby og Python de siste par årene, har jeg funnet JavaScript's halvkolon infused, parentes avhengig, verbose syntaks å være kjedelig. Og fra det jeg kan samle, er jeg ikke alene i å føle denne måten. Dette er hvor CoffeeScript kommer til redning!
CoffeeScript kompilerer ned til rå JS.
CoffeeScript er egentlig bare en syntaktisk omskrivning av JavaScript. Kjernespråket selv forblir det samme, med små semantiske forbedringer. Syntaxen er modifisert, modellert etter Python og Ruby.
Husk at CoffeeScript-kompilatoren utfører ren JavaScript som ikke bare følger beste praksis og er svært lesbar, men passerer også JSLint. Dette betyr at du ikke trenger å bekymre deg for kompatibilitet nedover linjen. I det verste fall av dette prosjektet dør, kan du bare plukke opp den uberørte JS som CoffeeScript genererer og fortsetter med koden din. Du er ikke låst inn i dette miljøet.
Dette kan virke som et fremmed konsept, men under webutviklingsparaplyen har vi allerede sett vår rettferdige andel av denne ideologien. HAML er bare en ny måte å skrive HTML på mens SASS gjør det samme for CSS. Alle rydder opp strukturen og syntaxen til deres språk, noe som gjør dem lettere å jobbe med og dermed øker produktiviteten.
Du lurer sikkert på hvordan koden selv ser ut, så her er en rask titt:
index = (liste, mål) -> [lav, høy] = [0, list.length] mens lav < high mid = (low + high) >> 1 val = liste [midt] retur midt hvis val er målet hvis val < target then low = mid + 1 else high = mid return -1
Dette er en rask implementering av et binært søk. Ikke prøv å analysere koden selv akkurat nå. Bare prøv å gjøre deg kjent med syntaksen.
Nedenfor er JavaScript-koden som CoffeeScript genererer:
varindeks; index = funksjon (liste, mål) var høy, lav, midt, val, _ref; _ref = [0, list.length], lav = _ref [0], høy = _ref [1]; mens (lav < high) mid = (low + high) >> 1; val = liste [midten]; hvis (val === mål) retur midt; hvis (val < target) low = mid + 1; else high = mid; return -1; ;
Her er noen raske fordeler og ulemper med å bruke CoffeeScript. Dette er ikke omfattende på noen måte, men jeg tror dette er tilstrekkelig for å få en rask oversikt over systemet.
Det er selvsagt mange andre poeng, inkludert semantiske og syntaktiske forbedringer.
De offisielle metodene for å komme i gang inkluderer et kommandolinjeverktøy som kjører under node.js og bare laster ned kilden og installerer den. Ingenting mye å veilede her. Få verktøyet node.js og bruk npm installer kaffe-script [eller for kilden, bin / kake installasjon] for å installere og komme i gang.
Situasjonen med Windows er litt mer komplisert. Det er ingen rett frem måte å få node.js eller kilden installert på Windows [utenfor Cygwin]. Aldri frykter skjønt. En rekke underholdende mennesker har skrevet kompilatorer som arbeider innfødt på Windows. Jeg har tatt med noen få under:
Vær oppmerksom på at kompilatoren, i kompilert JavaScript-skjema, også følger med kilden, hvis du er interessert. Det er til stede under ekstra katalog med et opplagt navn.
Med det ut av veien, skal vi nå se på en håndfull ting som viser deg hvordan CoffeeScript gjør JavaScript enklere å konsumere!
Det første du trenger å vite, er hvordan CoffeeScript bruker whitespace effektivt for å forenkle syntaksen. Folk med en Python-bakgrunn vil finne dette trivielle, men for de andre, her er en rask forklaring.
Først opp, du trenger ikke slutte hver linje med et halvt kolon. Å avslutte en linje tolkes automatisk for å være slutten av setningen. For eksempel, dette ...
tall = [0, 1, 2, 3] name = "NetTuts +"
... kompilerer ned til dette:
var navn, tall; tall = [0, 1, 2, 3]; navn = "NetTuts +";
Deretter vil du være glad for å vite at du kan gjøre unna med krøllete braces. De mange staver for å åpne og lukke en blokk? Alt er ute. I CoffeeScript bruker du Python-esque innrykk for å betegne begynnelsen og slutten av en blokk.
CoffeeScript krever ikke unødvendige parenteser eller krøllete braces.
Her er et raskt eksempel. Se bort fra alt, men innrykket for nå. Vi kommer til resten litt senere:
hvis chasedByCylons runForYourLife ()
... kompilerer ned til
hvis (chasedByCylons) runForYourLife ();
Hvis du fortsatt er litt forvirret, ikke bekymre deg. Syntaxen vil begynne å gjøre mer fornuftig når vi lærer språket bedre.
CoffeeScript gir en rekke aliaser for operatører og søkeord for å gjøre koden mer lesbar og intuitiv. La oss ta en titt på noen av dem nå.
For det første, sammenligning operatører:
Accentsconagua
er kart til === isnt kompilerer til !== == og != kompilere til === og !== henholdsvis [som en god praksis]La oss se dem i gang raskt.
hvis pant er onFire lookForWater () hvis spillet ikke er bra dårligMouth ();
... som kompilerer til ...
hvis (pant === onFire) lookForWater (); Hvis (spill! == bra) badMouth ();
Ganske lett å lese, nei? Nå, videre til hvordan logiske operatører er kartlagt.
og kart til && eller er et alias for || ikke kompilerer ned til ! Bygg på vår tidligere kode:
hvis pant er onFire og ikke aDream lookForWater () hvis spillet ikke er bra eller haughtyDevs badMouth ();
... som kompilerer til ...
hvis (pant === onFire &&! aDream) lookForWater (); hvis (spill! == bra || haughtyDevs) badMouth ();
Som du allerede har sett ovenfor, er det grunnleggende hvis / annet konstruksjon oppfører seg som i vanlig JavaScript, sans parentes og curly braces. Vi ser på noen variasjoner nedenfor.
hvis trøtt og kjedelig søvn () ellers jogge () // Rå JS nedenfor hvis (sliten og kjedelig) sleep (); ellers jogge ();
Og her er hvordan den ternære operatøren håndteres:
aktivitet = om søndag da erChilling annet erWorking // Raw JS under aktivitet = søndag? isChilling: isWorking;
En ekstra semantisk forbedring er med med mindre søkeord. Dette fungerer som det motsatte av hvis.
keepRunning () med mindre slitasje keepWorking med mindre fokus er ekstremt lavt
Og kompilert JavaScript ...
hvis (! sliten) keepRunning (); hvis (fokus! == ekstremt lavt) keepWorking;
Switch-setninger kan være litt stumpe i JavaScript. CoffeeScript gir et intuitivt omslag rundt denne konstruksjonen.
Det begynner med bytte om Søkeord, som forventet, etterfulgt av variabelen hvis verdi vi sjekker. Hver sak eller mulig verdi foregår av når søkeord etterfulgt av uttalelsene til å utføre hvis det er en kamp.
Det er ikke nødvendig å legge til en
gå i stykkeruttalelse på slutten av hver saksoppgave: CoffeeScript gjør dette automatisk for deg.
bytt tid når 6,00 wakeUp () jotDownList () når 9.00 da startWorking () når 13.00 så spis () når 23.00 finishUpWork () søvn () annet gjør ingenting ()
Syntaxen skal være ganske selvforklarende dersom du allerede vet det tilsvarende i JavaScript. Det eneste poenget å merke seg her er bruken av deretter søkeord. Det er vant til å skille tilstanden fra uttrykket uten å starte en ny linje. Du kan da bruke for de andre betingede utsagnene samt løkkene også.
Her er JS som CoffeeScript genererer for deg:
bytte (tid) sak 6,00: wakeup (); jotDownList (); gå i stykker; sak 9.00: startarbeid (); gå i stykker; sak 13.00: spis (); gå i stykker; sak 23.00: ferdigUpWork (); sove(); gå i stykker; standard: doNothing ();
Looping er en annen viktig konstruksjon for din typiske JavaScript-kode. Være det looping gjennom tall i en matrise eller noder i DOM, er du alltid i behov av looping gjennom samlinger.
CoffeeScript gir en veldig fleksibel samtidig som sløyfe som kan modifiseres for å fungere som en generisk til eller gjør mens sløyfe.
mens arbeidet> tid da freakOut () mens tiden> jobber slappe av () mozyAround () // Raw JS mens (arbeid> tid) freakOut (); mens (tid> arbeid) relax (); mozyAround ();
før er en annen semantisk forbedring og tilsvarer mens ikke. Et raskt eksempel nedenfor:
workOut () til energi < exhaustion // Raw JS while (!(energy < exhaustion)) workOut();
Looping over arrays er ganske enkelt. Du må bruke for i konstruere for å gå gjennom matrisen. La meg vise deg hvordan:
nettsteder = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] for nettstedet på nettsteder for varslingsnettsted
Hvis du foretrekker at uttalelsene skal være i samme linje:
nettsteder = ['CodeCanyon', 'ThemeForest', 'ActiveDen'] varslingsnettsted for nettsted på nettsteder
CoffeeScripts samler disse til grunnleggende til sløyfer som dette. Legg merke til at i tråd med beste praksis er lengden på arrayen cached på forhånd.
var nettsted, nettsteder, _i, _len; nettsteder = ['CodeCanyon', 'ThemeForest', 'ActiveDen']; for (_i = 0, _len = sites.length; _i < _len; _i++) site = sites[_i]; alert(site);
Iterating over tilknyttede arrays [eller hashes eller ordbøker eller nøkkelverdier par] er like enkelt med av søkeord.
ledere = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider' for nettstedet, leder av ledere varslingsleder + "administrerer" + side
Som forventet, kompilerer ovennevnte ned til en grunnleggende loop som vist nedenfor:
var leder, ledere, nettsted; ledere = 'CodeCanyon': 'Jeffrey Way', 'ThemeForest': 'Mark Brodhuber', 'ActiveDen': 'Lance Snider'; for (nettsted i ledere) manager = managers [site]; varsling (leder + "administrerer" + side);
Opprettelse og bruk av funksjoner er ekstremt lett under CoffeeScript. For å definere en funksjon, opplister du parametrene som trengs, og deretter fortsetter funksjonens kropp. Her, la meg vise deg hvordan:
spiller = (konsoll, spill = "Mass Effect") -> varsling "Spiller # game på min # konsoll." spiller 'Xbox 360', 'New Vegas'
Dette er den grunnleggende syntaksen bak å skape og bruke funksjoner. Standardverdien for parametere kan defineres inline. CoffeeScript genererer koden for å sjekke om en verdi er sendt inn eller ikke.
Å påkalle en funksjon er like enkelt. Det er ikke behov for parenteser: passere parametrene etter hverandre.
Som alltid, her er den genererte koden til din referanse:
var å spille; spiller = funksjon (konsoll, spill) if (game == null) game = "Mass Effect"; returvarsling ("Spille" + spill + "på min" + konsoll + "."); ; spiller ('Xbox 360', 'New Vegas'); Noen ganger kan du ikke ha annet valg enn å bruke rå JavaScript i CoffeeScript-koden din. Forhåpentligvis bør disse tilfellene være langt og få mellom, men dette er også tatt i betraktning.
Du kan injisere rå JS i koden din ved å pakke den inn med grave aksenter, også kjent som en backquote eller backtick. Alt passert inn, vil derfor være helt uberørt av CoffeeScript-kompilatoren.
rawJS = 'funksjon () return someSuperComplexThingie; '// hvilke nett du var rawJS; rawJS = funksjon () return someSuperComplexThingie; ;
Ingenting skjer med dem, de kan forbli akkurat der de er. CoffeeScript fungerer sømløst med et tredjepartsbibliotek, stort eller lite, fordi det bare samler til rå JavaScript. Du trenger bare å reformatere og / eller refactor koden din veldig lett, men bortsett fra det, bør uforlikeligheter ikke være et problem.
Så i stedet for å skrive dette:
$ (dokument) .ready (funksjon () elemCollection = $ ('.samling'); for (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 vil skrive ...
$ (dokument) .ready -> elemCollection = $ ('.collection') for element i elemCollection colortoAdd = hvis item.hasProperty () så yesColor annet noColor $ (item) .css 'bakgrunnsfarge', colortoAdd Og vi har kommet til en slutt. Jeg har ikke dekket et antall emner på høyere nivåer, for eksempel for klasser, fordi de er langt utover omfanget av en innledende artikkel. Se etter noen avanserte CoffeeScript-veiledninger nedover veien!
Jeg tror CoffeeScript har endret måten jeg skriver JavaScript på, og etter å ha lest dette håper jeg det har endret deg også. Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding og takk så mye for lesing!
