W piątym odcinku Waszego ulubionego cyklu pojawi się projekt z tygodniowym stażem na GitHubie pod tytułem CoffeeConsole. Jest to interaktywna konsola języka CoffeeScript dla przeglądarki Chrome. Do tej pory trzeba było używać okienka „TRY COFFEESCRIPT” na stronie http://coffeescript.org (brak podświetlanej składni) lub instalować Node.js i npm.
Dla niewtajemniczonych, CS jest tzw. „lukrem składniowym” na JavaScript, tzn. wynikiem kompilacji CS jest czysty JS (który z kolei jeszcze można ścieśnić jakimś „zmniejszaczem” — minifierem). Składnia CS przypomina najbardziej Pythona (bloki kodu rozdzielane na podstawie wcięć, array comprehensions). Domieszano również nieco Rubyego (znak „?” przy zmiennych będący sprawdzeniem czy zmienna istnieje i „@” dla pól obieku).
Po ściągnięciu i rozpakowaniu pakietu wystarczy przeciągnąć plik coffeeconsole.crx na okno otwartego Chroma i rozpocznie się instalacja dodatku. Otrzymamy 2 pola edycji — lewy dla źródłowego CS i prawy dla wynikowego kodu JS.
Poniżej zademonstruję działanie tego cuda:
### Przykladowy kod naskrobany w 5 min., nie zwracajcie na niego uwagi. W ten sposob w wynikowym JS powstanie komentarz np. dotyczacy licencji. ### # wartosc od ktorej humor jest dobry goodMoodThrottle = 51 # tworze literal obiektowy peopleMood = 'Dawid' : 100 'Marta' : 78 'Adam' : 53 'Marian' : 45 # tworze funkcje o 2 parametrach getMoodString = (name, goodMood) -> # zwracam uwage na konstrukcje if-then-else # is zamieniane na === # oraz "#{zmienna} cos tam dalej" if goodMood is true then "#{name} ma dobry humor" else "#{name} ma zły humor jak cholera" # konstrukcja for-of dla petli po literalach obiektowych for name, moodLevel of peopleMood # kompilator sam domysli sie, ze chodzi nam o alert(getMoodString(name,(bool))) alert getMoodString name, goodMoodThrottle <= moodLevel <= 100
W okienku z prawej strony otrzymamy następujący wynik kompilacji:
/* Przykladowy kod naskrobany w 5 min., nie zwracajcie na niego uwagi. W ten sposob w wynikowym JS powstanie komentarz np. dotyczacy licencji. */ var getMoodString, goodMoodThrottle, moodLevel, name, peopleMood; goodMoodThrottle = 51; peopleMood = { 'Dawid': 100, 'Marta': 78, 'Adam': 53, 'Marian': 45 }; getMoodString = function(name, goodMood) { if (goodMood === true) { return "" + name + " ma dobry humor"; } else { return "" + name + " ma zły humor jak cholera"; } }; for (name in peopleMood) { moodLevel = peopleMood[name]; alert(getMoodString(name, (goodMoodThrottle <= moodLevel && moodLevel <= 100))); }
Patrząc na liczbę linii kodu mamy spory zysk w stosunku do wynikowego kodu JS. Przy okazji nie zajmujemy się zbędnymi średnikami i nawiasami.
Jeśli jeszcze Was nie przekonałem do użycia to proponuję zobaczyć tworzenie klas:
class Human constructor: (@name) -> whatIsYourName: -> "Mam na imie #{@name}" people = [] people.push new Human 'Andrzej' people.push new Human 'Marian' people.push new Human 'Lucjan' alert human.whatIsYourName() for human in people
Wynik w JS:
var Human, human, people, _i, _len; Human = (function() { Human.name = 'Human'; function Human(name) { this.name = name; } Human.prototype.whatIsYourName = function() { return "Mam na imie " + this.name; }; return Human; })(); people = []; people.push(new Human('Andrzej')); people.push(new Human('Marian')); people.push(new Human('Lucjan')); for (_i = 0, _len = people.length; _i < _len; _i++) { human = people[_i]; alert(human.whatIsYourName()); }
Dla bardziej zainteresowanych tematem CoffeeScriptu polecam książkę The Little Book on Coffee Script dostępną online.

O autorze