Ускоряем JavaScript разработку с CoffeeScript

CoffeeScript - это язык программирования, который транслируется в JavaScript. Его синтаксис наиболее понятен и читабелен.

Ещё одно преимущество CoffeeScript в том, что транслируемый JavaScript совместим с старыми версиями браузеров, включая Internet Explorer. CoffeeScript так же позволит забыть о многих подводных камнях, которые встречаются при JS разработке.

К тому же CofeeScript очень популярен! Он занимает 64 место в сотке наиболее популярных языков программирования по версии Tiobe. Рядом располагаются аналоги, такие как Dart и TypeScript.

Ну что, готовы дать шанс CoffeeScript? В этой статье рассмотрим основы и базовые приёмы.

Установка

CoffeeScript можно скачать с официального сайта или через менеджер пакетов Node:

npm install coffee-script -g

Установка должна осуществиться таким образом, чтобы в последствии в терминале вам была доступна команда coffee.

Компиляция

Как правило у файлов CoffeeScript расширение .coffee. Для преобразования кода в JS, необходимо скомпилировать файл вручную или установить специальный наблюдатель через ваш IDE, который сделает это автоматически.

Для ручной компиляции перейдите в каталог с скриптом:

cd E:\apps\something\logic

Теперь выполняем команду:

coffee -c app.coffee

В результате будет создан файл app.js, который можно сразу же включить в проект.

Более удобный вариант, когда app.js будет компилироваться при сохранении исходного файла. Для этого используйте следующую команду:

coffee -cw app.coffee

Данная функция может работать с сбоями в версии CoffeeScript (1.9.1), так что лучше использовать более стабильную версию, такую как 1.9.0.

Основы CoffeeScript

Объявление переменных в CoffeeScript несколько отличается от того, как мы это делаем в JavaScript. Так же нет необходимости ставить ( ; ) на конце строки.

Таким образом, срока вида:

hasBody = true

преобразуется в:

var hasBody = true;

Так же вы можете осуществлять вызов функций, без написания скобок:

$(".messages") .show 'slow'

Преобразуется в:

$(".messages").show('slow');

Для отступов можно использовать два пробела или табуляцию:

if hasBody
  alert "Hello Body"
else
  alert "No Body"

Условные выражения и булевы значения

В CoffeeScript ключевые слова on, yes и true являются эквивалентами, а их значение равняется true, в то время как off, no и false равняются false.

Ключевые слова is и isnt можно использовать в качестве операторов === и !==.

Для одно-строчного условного выражения можно использовать ключевое слово then.

Так же and и or относятся к операторам && и ||.

А вот и примеры:

x = 53
y = 40
z = 33
b = true
if b is on and x is 53 and z < y > 11 then alert "ALRIGHT!"

После компиляции код будет выглядеть следующим образом:

if (b === true && x === 53 && (z < y && y > 11)) {
  alert('ALRIGHT!');
}

Итераторы, фильтры и диапазоны

Для итерации по массиву можно воспользоваться синтаксисом for .. in. В случае, если нужно пройтись по полям объекта следует воспользоваться for .. of.

arr = [1, 2, 3]

for val in arr
  console.log(val);

spartacus =
  type: "cat"
  legs: 4
  fur: yes

for key, value of spartacus
  console.log "#{key}: #{value}"

Обратите внимание на подстановку переменных. Тут использовался синтаксис #{variableName}.

Вывод:

1
2
3
type: cat
legs: 4
fur: true

Ключевое слово when используется для фильтрации элементов массива:

spartacus =
  type: "cat"
  legs: 4
  fur: yes

shrimpy =
  type: "fish"
  legs: 0
  fur: no

pets = [spartacus, shrimpy]
myPet = pet for pet in pets when pet.type is "cat"
console.log myPet

Вывод:

Object {type: "cat", legs: 4, fur: true}

Ещё один вариант записи:

for pet in pets when pet.type is "cat"
  myPet = pet
  console.log myPet

Ещё одной полезной фишкой CoffeeScript является возможность создания диапазонов чисел.

someValues = [0..10]
sameValues = [0...11]

После компиляции в JavaScript код будет такой:

someValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
sameValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Если же вы попытаетесь создать массив, состоящий из более чем 20 элементов, то CoffeScript создаст другой код. Все вычисления будут производиться в анонимных функциях, чтобы избежать конфликт с именами переменных.

var someValues, _i, _results;

someValues = (function() {
  _results = [];
  for (_i = 0; _i <= 21; _i++){ _results.push(_i); }
  return _results;
}).apply(this);

Функции и ключевое слово “this”

Для создания функции следует воспользоваться знаком ->. Если же нужно добавить какие-то параметры, то поместите их в круглые скобки, а затем ->

Каждому параметру можно указать значение, которое должно присваиваться по умолчанию.

Примеры функций на CoffeeScript:

myCoffee = ->
  console.log "C'est un cafe"

makeCoffee = (brand = "Hogwarts") ->
  console.log "Making a coffee #{brand}-style"

myCoffee()
makeCoffee()

Логи в консоли:

C'est un cafe
Making a coffee Hogwarts-style

Вместо ключевого слова this можете использовать знак @:

$("a").click ->
  $(@).hide 'slow'

Превращается в:

$("a").click(function() {
  return $(this).hide('slow');
});

ES6 и ООП

CoffeeScript поддерживает объектно ориентированное программирование и организацию иерархии наследования классов. Определить класс можно так:

class Animal
  constructor: (@name, @breed) ->
    @.introduce = ->
      console.log "Hi, I am #{@.name}, one hell of a #{@.breed}"

husky = new Animal("Johnny", "Siberian Husky")
husky.introduce()

Ответ в консоли:

Hi, I am Johnny, one hell of a Siberian Husky

В данном контексте знак @ показывает, что значение будет записано в свойство класса. В нашем случае это применяется при написании конструктора. В качестве альтернативы, внутри конструктора можно написать следующее: @.name = name.

Так же можно осуществлять наследование классов:

class Dog extends Animal

Dog.prototype.bark = ->
      console.log "#{@name} barks!"

newHusky = new Dog("Lassy", "Labrador Husky")
newHusky.introduce()
newHusky.bark()

Результат:

Hi, I am Lassy, one hell of a Labrador Husky
Lassy barks!

Для того, чтобы указать, что функция может принимать любое число аргументов, достаточно воспользоваться знаком .... В этом случае, все параметры будут переданы в виде массива.

Пример:

howAwards = (awards...) ->
  console.log ("Awards collected : #{awards.join ', '}")

showAwards "Award 1", "Award 2", "Award 3"

Результат:

Awards collected : Award 1, Award 2, Award 3

Последнее что стоит отметить: результат последнего выражения в функции CoffeeScript будет возвращать в качестве ответа. Поэтому каждая функция должна подразумевать какое-то возвращаемое значение.

Заключение

В данной статье мы рассмотрели основы работы с CoffeeScript. В будущем мы покажем более наглядные примеры из реальной жизни.