En smak av CoffeeScript (del 1)

La oss innse det, JavaScript har ikke alltid hatt det beste rykte blant utviklere, og siden grunnlaget for CoffeeScript tilbake i 2009 har dette lille språket tatt verden av JavaScript-utviklere med storm, hovedsakelig fordi det overvinne hva noen kan si er det verste aspektet av JavaScript: syntaksen av koden sin.

Selv om dette er et nytt språk, vil du plukke det opp veldig fort, hovedsakelig fordi det er omformulert JavaScript; Det er egentlig penere, enklere JavaScript.

Når du skriver CoffeeScript, ikke glem at du skriver kode som før du blir distribuert, skal kompileres til JavaScript som følger best practices og passerer JSLint-testen, så det er en mindre ting du trenger å bekymre deg for. Utgangen vil fortsatt være gyldig JavaScript at nettleseren ikke vil ha et problem ved å lese. CoffeeScript er å JavaScript hva SASS er til CSS: en måte å skrive enklere og mer produktiv kode på.

Installere og bruke

CoffeeScript er et node.js-verktøy, så for å installere det må du ha node.js installert, så vel som nodepakkehåndtereren. Anta at du har installert disse to pakkene alt du trenger å gjøre er å gå til terminalen din og installer CoffeeScript med pakkehåndtereren ved hjelp av koden:

npm install -g coffee-script

Bare med det har du CoffeeScript installert på maskinen din. For å kompilere en .coffee-fil i en JavaScript-fil må du skrive:

coffee --compile script.coffee

Dette vil kompilere filen script.coffee i script.js i samme katalog, men vil bare gjøre det når du kjører kommandoen, hvis du vil at den skal kompilere i hver endring du lager i kaffefilen, må du legge til -watchen før kompilere:

coffee --watch --compile script.coffee

Med dette tillegget blir JavaScript kompilert hver gang du gjør en endring i .coffee-filen.

variabler

Når du skriver en JavaScript-variabel, må du forhåndsbehandle var-søkeordet, med CoffeeScript er dette søkeordet borte, og du kan bare skrive ut variabelen og tildele den til noe. En annen ting å se etter er at CoffeeScript bruker mange innrykksmetoder for å unngå semikolon og for språket å forstå at variabelen er fullført, trenger du bare å flytte til en ny linje:

age = 21country = "Portugal"

I JavaScript må du skrive noe som:

var age = 21;var country = "Portugal";

Det er et lite eksempel, men du kan begynne å se hvor kraftig CoffeeScript er når det gjelder å forenkle koden.

Logiske og komparative operatører

Husker du all den tiden du brukte til å huske JavaScript-operatører? Husk å lure på hvorfor du trengte å bruke === i stedet for bare å bruke er? Vel CoffeeScript tar også vare på det. Det gir noen veldig fine aliaser for operatørene:

Sammenligning operatører

• === kan nå handles for simpelthen er;
• ! == er også forvandlet til det mer lesbare isnt.

Logiske operatører

• I stedet for å bruke && kan du bare bruke og;
• som for || fra nå av kan du skrive eller;
• det lille utropstegnet som uttalt et ikke er byttet til det mest logiske: ikke.

Hvis uttalelser

En annen ting CoffeeScript blir kvitt er krøllete braces. Den bruker innrykksmetoden til å erklære når du er inne i en erklæring, hvis setninger fungerer som JavaScript, men du trenger ikke de krøllete båndene eller parentesen; bare skriv inn koden du ønsker å kjøre når setningen er sant:

if work > 24 and sleep < 8vacations()elsework()

vil kompilere inn i JavaScript som:

if (work > 24 && sleep < 8) {vacations();} else {work();}

Jeg håper at du begynner å se fordelene med CoffeeScript bare med disse enkle demonstrasjonene av hvor rent det kan gjøre koden din, og renere kode betyr mer vedlikeholdbar kode.

Looping gjennom arrays

Looping gjennom arrayer er en av de tingene du må gjøre i hver JavaScript-app du skriver, og syntaksen for looping gjennom dem i JavaScript er ikke den enkleste eller reneste, jeg tror dette er hvor CoffeeScript virkelig skinner. Å gå gjennom en matrise bruker vi en for..in sløyfe, slik som:

tasks = ['Design','Code','Groceries']for task in tasksalert task

Alt dette koden vil gjøre, er å lese alle tingene i matrisen og deretter varsle da en etter en, for å gjøre ting enda enklere kan du til og med skrive for ... i sløyfe i en linje, slik som:

tasks = ['Design','Code','Groceries']alert task for task in tasks

Det er rett og slett langt mer lesbart og vedlikeholdbart enn vanilj JavaScript, og det tales om hvilken kode som produseres av CoffeeScript for disse to linjene ville være:

var task, tasks, _i, _len;tasks = ['Design', 'Code', 'Groceries'];for (_i = 0, _len = tasks.length; _i < _len; _i++) {task = tasks[_i];alert(task);}

Mens looper

Mens sløyfer også er veldig nyttige når du bygger JavaScript-appen og CoffeeScript, klarer du ikke å gjøre det lettere å lese og skrive også, for eksempel:

while sleep < 8sleep()

Eller du kan skrive alt på en linje hvis du foretrekker:

while sleep < 8 then sleep()

Eller:

sleep() until sleep > 8

I ren JavaScript ville dette oversette til:

//thenwhile (sleep < 8) {sleep();}

Eller:

//untilwhile (!(sleep > 8)) {sleep();}

funksjoner

Funksjoner er også en annen viktig del av et hvilket som helst programmeringsspråk, og selv om funksjoner i JavaScript ikke er så rotete som noen andre deler, kan CoffeeScript forenkle dette til maks også, en enkel funksjon som tar navn til noen og alarmerer det kan skrives slik :

sayHi = (name) ->return "Hello " + namealert sayHi('Sara')

Alt du gjør er navnet funksjonen, i dette tilfellet kalles funksjonene sayHi, og deretter etter likestedet må du angi parametrene. Her er navnet den eneste parameteren, etter at basen av vår funksjon er definert, må vi skrive -> fulgt på neste linje av hva vi vil at funksjonen skal gjøre slik at CoffeeScript vet at vi er inne i funksjonen. I dette tilfellet alt jeg vil ha det gjør er retur "Hei" og så navnet på personen og til slutt bruker jeg et enkelt varsel for å ringe funksjonen med navnet. Vi kan også skrive dette i en linje som eliminerer inntastingen og innrykkingen bare ved å skrive hva funksjonen vil gjøre etter ->:

sayHi = (name) -> return "Hello " + name

Denne lille kodebiten blir kompilert i følgende JavaScript:

var sayHi;sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

Selvfølgelig var dette en veldig enkel funksjon, men som du kan se det lagret oss 3 linjer med kode og selvfølgelig i JavaScript kunne vi bare navngi variabelen som vi erklærer funksjonen slik:

var sayHi = function(name) {return "Hello " + name;};alert(sayHi('Sara'));

Eksemplene jeg har gitt her er hva CoffeeScript kompilerer til, og selv om det i de fleste tilfeller finnes enklere måter å skrive noe på, er alt JavaScript samlet gyldig og semantisk.

Konklusjon

Dette er bare begynnelsen på hva CoffeeScript kan gi deg, når tingene begynner å bli mer komplekse, vil dette lille språket gi deg mye innflytelse i forhold til JavaScript, mindre kode du trenger å skrive, mer menneskelig lesbar kode og mer vedlikeholdsbar også , slik at du kan komme tilbake til et nettsted et år senere og vet hva som skjer i det JavaScript.

Hold deg oppdatert på den andre delen av denne serien der jeg skal vise deg hvordan du kan kombinere CoffeeScript med jQuery og LocalStorage for å lage en enkel kontaktlisteapp.

Har du brukt CoffeeScript for å forenkle JavaScript? Hvilke deler av CoffeeScript foretrekker du å Javascript? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, kaffe bilde via Shutterstock.

• ← En smak av CoffeeScript (del 2)
• Lær å telle med CSS →