En Smag af CoffeeScript (Del 1)

Lad os se det, JavaScript har ikke altid haft det bedste ry blandt udviklere, og siden grundlæggelsen af ​​CoffeeScript tilbage i 2009 har dette lille sprog taget verden af ​​JavaScript-udviklere med storm; hovedsagelig fordi det overvinder, hvad nogle måske siger er det værste aspekt af JavaScript: syntaksen af ​​sin kode.

Selv om dette er et nyt sprog, vil du hente det meget hurtigt, hovedsageligt fordi det er omformuleret JavaScript; Det er i det væsentlige smukkere, enklere JavaScript.

Når du skriver CoffeeScript, skal du ikke glemme, at du skriver kode, som før du bliver implementeret, skal kompileres til JavaScript, der følger bedste praksis og passerer JSLint-testen, så det er en mindre ting, du skal bekymre dig om. Udgangen vil stadig være gyldig JavaScript, at browseren ikke vil have et problem ved læsning. CoffeeScript er at JavaScript, hvad SASS er til CSS: en måde at skrive enklere og mere produktiv kode på.

Installation og brug af

CoffeeScript er et node.js-værktøj, for at installere det skal du have node.js installeret samt nodepakkehåndteringen. Forudsat at du har installeret disse to pakker, er alt du skal gøre, gå til din terminal og installer CoffeeScript med pakkehåndtereren ved hjælp af koden:

npm install -g coffee-script

Bare med det har du CoffeeScript installeret på din maskine. For at kompilere en .coffee-fil i en JavaScript-fil skal du skrive:

coffee --compile script.coffee

Dette vil kompilere filen script.coffee i script.js i den samme mappe, men vil kun gøre det, når du kører kommandoen. Hvis du vil kompilere den i hver ændring, du laver i kaffefilen, skal du tilføje -watchen før kompilere:

coffee --watch --compile script.coffee

Med dette tilføjes din JavaScript sammen, hver gang du ændrer din .coffee-fil.

Variable

Når du skriver en JavaScript-variabel, skal vi forpligte var-søgeordet, med CoffeeScript er dette søgeord væk, og du kan bare skrive ud variablen og tildele den til noget. En anden ting at passe på er, at CoffeeScript bruger mange indrykningsmetoder for at undgå halvkolonner og for sproget at forstå, at variabel erklæring er komplet, skal du bare flytte til en ny linje:

age = 21country = "Portugal"

I JavaScript skal du skrive noget som:

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

Det er et lille eksempel, men du kan begynde at se, hvor kraftig CoffeeScript er, når det kommer til at forenkle din kode.

Logiske og komparative operatører

Husk al den tid, du brugte til at huske JavaScript-operatører? Husk at undre sig over hvorfor du skulle bruge === i stedet for bare at bruge er? Well CoffeeScript tager også sig af det. Det giver nogle rigtig gode aliaser til operatørerne:

Sammenligning operatører

• === kan nu handles for simpelthen er;
• ! == er ligeledes omdannet til den mere læsbare isnt.

Logiske operatører

• I stedet for at bruge && kan du bare bruge og;
• som for || fra nu af kan du skrive eller;
• Det lille udråbstegn, der udtalte et ikke , skiftes til det mest logiske: ikke.

Hvis udsagn

En anden ting, CoffeeScript slippe af med, er krøllet bøjler. Det bruger indrykningsmetoden til at erklære, når du er inde i en erklæring, hvis udsagn fungerer som JavaScript, men du behøver ikke de krøllebøjler eller parenteserne; Indtast kun koden, du ønsker at køre, når erklæringen er sand:

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

vil kompilere i JavaScript som:

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

Jeg håber at du begynder at se fordelene ved CoffeeScript bare med disse enkle demonstrationer af, hvor rent det kan gøre din kode, og renere kode betyder mere vedligeholdelig kode.

Looping gennem arrays

Løber gennem arrays er en af ​​de ting, du er forpligtet til at gøre i hver JavaScript-app, du skriver, og syntaksen til at løbe igennem dem i JavaScript er ikke den enkleste eller den reneste, jeg synes det er her, hvor CoffeeScript virkelig skinner. At gå gennem et array bruger vi en for..in loop, som sådan:

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

Alt dette stykke kode vil gøre, er at læse alle tingene i arrayet og derefter advare derefter en efter en, for blot at gøre tingene endnu enklere kan du endda skrive for ... i loop på en linje, sådan:

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

Det er simpelthen langt mere læsbart og vedligeholdeligt end vanillet JavaScript, hvoraf tales om, hvilken kode, der produceres af CoffeeScript for disse to linjer, 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 loops

Mens sløjfer også er meget nyttige, når du opbygger din JavaScript-app, og CoffeeScript ikke undlader at gøre det lettere at læse og skrive også, for eksempel:

while sleep < 8sleep()

Eller du kan skrive det hele på en linje, hvis du foretrækker:

while sleep < 8 then sleep()

Eller:

sleep() until sleep > 8

I ren JavaScript ville dette oversætte til:

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

Eller:

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

Funktioner

Funktioner er også en anden vigtig del af et hvilket som helst programmeringssprog, og selv om funktioner i JavaScript ikke er så rodet som nogle andre dele CoffeeScript forenkler dette til det maksimale også, en simpel funktion, der tager andens navn og derefter advarer det kan skrives som dette :

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

Alt du gør er navnet funktionen, i dette tilfælde kaldes funktionerne sayHi, og derefter efter lige tegn skal du angive parametrene. Her er navnet den eneste parameter, efter at basen af ​​vores funktion er defineret, skal vi skrive -> følges på næste linje af, hvad vi vil have, at funktionen skal gøre, så CoffeeScript ved, at vi er inde i funktionen. I dette tilfælde er alt, hvad jeg vil have det, ret til "Hej" og så navnet på personen og endelig bruger jeg en simpel advarsel til at kalde funktionen med navnet. Vi kan også skrive dette på en linje, der eliminerer indtastningen og indtastningen ved blot at skrive, hvad funktionen vil gøre efter ->:

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

Denne lille kodekode udarbejdes i følgende JavaScript:

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

Selvfølgelig var det en rigtig simpel funktion, men som du kan se, reddet vi os 3 linjer kode og selvfølgelig i JavaScript kunne vi bare navngive variablen som vi erklærer funktionen som sådan:

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

De eksempler, jeg har givet her, er, hvad CoffeeScript kompilerer til, og selv om der i de fleste tilfælde er nemmere måder at skrive noget på, er alle JavaScript-kompilerede gyldige og semantiske.

Konklusion

Dette er kun begyndelsen på, hvad CoffeeScript kan give dig, når tingene begynder at blive mere komplekse, vil dette lille sprog give dig en masse gearing i forhold til JavaScript, mindre kode du skal skrive, mere læsbar kode og mere vedligeholdelig , så du kan komme tilbage til et websted et år senere og vide, hvad der foregår i det JavaScript.

Hold øje med den anden del af denne serie, hvor jeg vil vise dig, hvordan du kan kombinere CoffeeScript med jQuery og LocalStorage for at oprette en simpel kontaktlisteapp.

Har du brugt CoffeeScript til at forenkle JavaScript? Hvilke dele af CoffeeScript foretrækker du at Javascript? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, kaffe billede via Shutterstock.

• ← En smag af CoffeeScript (del 2)
• Lær at tælle med CSS →