Wygrzebane z GitHuba (5) : CoffeeConsole

W piątym odcinku Waszego ulubio­nego cyklu pojawi się projekt z tygo­dnio­wym stażem na GitHu­bie pod tytu­łem Coffe­eCon­sole. Jest to inte­rak­tywna konsola języka Coffe­eScript dla prze­glą­darki Chrome. Do tej pory trzeba było używać okienka „TRY COFFEESCRIPT” na stro­nie http://coffeescript.org (brak podświe­tla­nej składni) lub insta­lo­wać Node.jsnpm.

Dla niewta­jem­ni­czo­nych, CS jest tzw. „lukrem skła­dnio­wym” na Java­Script, tzn. wyni­kiem kompi­la­cji CS jest czysty JS (który z kolei jesz­cze można ście­śnić jakimś „zmniej­sza­czem” — mini­fie­rem). Skład­nia CS przy­po­mina najbar­dziej Pythona (bloki kodu rozdzie­lane na podsta­wie wcięć, array compre­hen­sions). Domie­szano również nieco Ruby­ego (znak „?” przy zmien­nych będący spraw­dze­niem czy zmienna istnieje i „@” dla pól obieku).

Po ścią­gnię­ciu i rozpa­ko­wa­niu pakietu wystar­czy prze­cią­gnąć plik coffeeconsole.crx na okno otwar­tego Chroma i rozpocz­nie się insta­la­cja dodatku. Otrzy­mamy 2 pola edycji — lewy dla źródło­wego CS i prawy dla wyni­ko­wego kodu JS.

Poni­żej zade­mon­struję dzia­ła­nie 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 otrzy­mamy nastę­pu­ją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 wyni­ko­wego kodu JS. Przy okazji nie zajmu­jemy się zbęd­nymi śred­ni­kami i nawiasami.

Jeśli jesz­cze Was nie prze­ko­na­łem do użycia to propo­nuję zoba­czyć tworze­nie 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 zain­te­re­so­wa­nych tema­tem Coffe­eScriptu pole­cam książkę The Little Book on Coffee Script dostępną online.

Podobne wpisy:

  1. Wygrze­bane z GitHuba (2) : Imagine
  2. Wygrze­bane z GitHuba (6) : Monolog
  3. Wygrze­bane z GitHuba (3) : Validation
  4. Wygrze­bane z GitHuba (1) : CSS Crush

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong>