En smak av CoffeeScript (del 1)

Låt oss möta det, JavaScript har inte alltid haft det bästa rykte bland utvecklare, och sedan grundandet av CoffeeScript tillbaka 2009 har detta lilla språk tagit världen av JavaScript-utvecklare med storm; främst för att det övervinner det som vissa kan säga är den värsta delen av JavaScript: syntaxen i sin kod.

Även om det här är ett nytt språk kommer du att plocka upp det väldigt snabbt, främst för att det är omformulerat JavaScript; Det är väldigt snyggare, enklare JavaScript.

När du skriver CoffeeScript glöm inte att du skriver kod som innan du distribueras kommer att sammanställas till JavaScript som följer bästa praxis och skickar JSLint-testet, så det är en sak du behöver oroa dig för. Utdatan är fortfarande giltig för JavaScript att webbläsaren inte kommer att ha något problem vid läsning. CoffeeScript är att JavaScript som SASS är till CSS: ett sätt att skriva enklare och mer produktiv kod.

Installera och använda

CoffeeScript är ett verktyg för node.js, för att installera det måste du ha node.js installerat samt nodpaketets hanterare. Förutsatt att du har installerat dessa två paket är allt du behöver göra, gå till din terminal och installera CoffeeScript med pakethanteraren med koden:

npm install -g coffee-script

Bara med det har du CoffeeScript installerat på din maskin. För att kompilera en .coffee-fil i en JavaScript-fil måste du skriva:

coffee --compile script.coffee

Detta kommer att kompilera filen script.coffee i script.js i samma katalog men kommer bara att göra det när du kör kommandot, om du vill att det ska kompileras i varje ändring du gör i kaffefilen måste du lägga till -watchen före kompilera:

coffee --watch --compile script.coffee

Med detta tillägg kommer din JavaScript att sammanställas varje gång du ändrar din .coffee-fil.

variabler

När du skriver en JavaScript-variabel måste vi förordna var-nyckelordet, med CoffeeScript det här sökordet är borta och du kan bara skriva ut variabeln och tilldela den till något. En annan sak att se efter är att CoffeeScript använder en hel del injektionsmetoder för att undvika halvkolon och för att språket ska förstå att det variabla uttalandet är fullständigt behöver du bara flytta till en ny linje:

age = 21country = "Portugal"

I JavaScript skulle du behöva skriva något som:

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

Det är ett litet exempel men du kan börja se hur kraftfull CoffeeScript är när det gäller att förenkla din kod.

Logiska och jämförande operatörer

Kom ihåg den tiden du spenderade på att memorera JavaScript-operatörer? Kom ihåg undrar varför du behövde använda === istället för att bara använda är? Jo CoffeeScript tar också hand om det. Det erbjuder några riktigt bra alias för operatörerna:

Jämförelseoperatörer

• === kan nu handlas för att enkelt är;
• ! == omvandlas lika till den mer läsbara isnt.

Logiska operatörer

• I stället för att använda && kan du bara använda och;
• som för || från och med nu kan du skriva eller
• Den lilla utropstecken som uttalade en inte är omkopplad för den mest logiska saken: inte.

Om uttalanden

En annan sak som CoffeeScript blir av med är lockiga hängslen. Den använder indrykningsmetoden för att deklarera när du är inne i ett uttalande, om uttalanden fungerar som JavaScript men du behöver inte de krökta axlarna eller parentesen. skriv bara in koden du vill springa när uttalandet är sant:

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

kommer att kompilera i JavaScript som:

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

Jag hoppas att du börjar se fördelarna med CoffeeScript bara med dessa enkla demonstrationer av hur ren det kan göra din kod, och renare kod betyder mer underhållbar kod.

Looping genom arrays

Looping genom arrays är en av de saker du är skyldig att göra i varje JavaScript-app du skriver och syntaxen för looping genom dem i JavaScript är inte det enklaste eller renaste, jag tror att det här är där CoffeeScript verkligen lyser. Att slinga igenom en array använder vi en for..in slinga, som så:

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

Allt detta kodstycke ska göra är att läsa alla saker i matrisen och varna sedan en efter en, för att göra saker ännu enklare kan du även skriva för ... i loop på en rad, som så:

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

Det är helt enkelt mycket mer läsbart och underhållbart än vanilj JavaScript, som talar om vilken kod som produceras av CoffeeScript för de två linjerna skulle vara:

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

Medan slingor

Även om loopar är också mycket användbara när du bygger din JavaScript-app och CoffeeScript misslyckas det inte att göra det enklare att läsa och skriva också, till exempel:

while sleep < 8sleep()

Eller du kan skriva allt på en rad om du föredrar:

while sleep < 8 then sleep()

Eller:

sleep() until sleep > 8

I ren JavaScript skulle detta översättas till:

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

Eller:

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

funktioner

Funktioner är också en annan viktig del av något programmeringsspråk och även om funktioner i JavaScript inte är så röriga som andra delar CoffeeScript förenklar detta till max också, en enkel funktion som tar någons namn och sedan varnar det kan skrivas så här :

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

Allt du gör är namnet funktionen, i det här fallet kallas funktionerna sayHi, och sedan efter samma tecken måste du ange parametrarna. Här är namnet den enda parametern, efter att basen av vår funktion har definierats måste vi skriva -> följt på nästa rad av vad vi vill att funktionen ska göra så att CoffeeScript vet att vi är inuti funktionen. I det här fallet är allt jag vill ha, det går tillbaka "Hej" och sedan namnet på personen och till sist använder jag en enkel varning för att ringa funktionen med namnet. Vi kan också skriva detta i en rad och eliminera inmatningen och indragningen bara genom att skriva vad funktionen ska göra efter ->:

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

Den här lilla kodtexten kommer att sammanställas i följande JavaScript:

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

Naturligtvis var det en riktigt enkel funktion, men som du kan se det räddade vi 3 linjer kod och självklart i JavaScript kunde vi bara namnge variabeln som vi förklarar funktionen som så:

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

Exemplen jag har gett här är vad CoffeeScript sammanställer och även om det i de flesta fall finns enklare sätt att skriva ut någonting, är alla JavaScript sammanställda giltiga och semantiska.

Slutsats

Detta är bara början på vad CoffeeScript kan ge dig, när saker börjar bli komplexa kommer det här lilla språket att ge dig mycket hävstång jämfört med JavaScript, mindre kod du behöver skriva, mer mänsklig läsbar kod och mer underhållbar också , så att du kan komma tillbaka till en webbplats ett år senare och veta vad som händer i JavaScript.

Håll dig klar för den andra delen av den här serien där jag ska visa dig hur man kombinerar CoffeeScript med jQuery och LocalStorage för att skapa en enkel kontaktlista app.

Har du använt CoffeeScript för att förenkla JavaScript? Vilka delar av CoffeeScript föredrar du att Javascript? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, kaffebild via Shutterstock.

• ← En smak av CoffeeScript (del 2)
• Lär dig att räkna med CSS →