CoffeeScript — это крошечный язык, который компилируется в JavaScript. Его выразительный, но в то же время лаконичный синтаксис значительно повышает читабельность вашего кода, что, в свою очередь, упрощает поддержку и снижает вероятность ошибок. По словам своего создателя, Джереми Ашкенаса , CoffeeScript позволяет вам «писать то, что вы имеете в виду, вместо того, чтобы писать в рамках исторической случайности».
Дополнительным преимуществом написания CoffeeScript является то, что JavaScript, который он компилирует, будет работать в более старых версиях Internet Explorer. CoffeeScript также позволяет забыть о распространенных ошибках JS, таких как запятые и автоматическая вставка точек с запятой.
И это набирает популярность! Вдохновленный принятием в сообществе Rails (Rails 3.1+ поставляется со встроенной поддержкой CoffeeScript), CoffeeScript недавно вошел в индекс Tiobe из 100 лучших языков программирования , где он занял 64-е место. Это было впереди Dart (66-е место) и TypeScript (не указано), которые также компилируются в JavaScript.
Итак, вы готовы попробовать CoffeeScript? В этой статье я покажу, как установить его, а также его основные понятия.
Установка
Вы можете установить CoffeeScript глобально, используя Node Package Manager (npm), введя следующую команду в свой терминал:
npm install coffee-script -g Вы должны установить его глобально, чтобы позже вы могли получить к нему доступ в терминале с помощью команды coffee .
Если вам нужен учебник по использованию npm, обратитесь к этой недавно опубликованной статье SitePoint .
компиляция
Файлы CoffeeScript имеют расширение .coffee . Эти файлы либо компилируются вручную, либо вы устанавливаете наблюдателя, который будет компилировать ваш скрипт каждый раз, когда он сохраняется с различным содержимым.
Чтобы скомпилировать вручную, перейдите в каталог, где находится скрипт:
cd E:\apps\something\logic
И выполните следующую команду:
coffee -c app.coffee
Это создаст файл app.js в том же каталоге, который вы затем сможете включить в свой проект.
Однако, скорее всего, вы хотите, чтобы app.js обновлялся при каждом сохранении файла. Поэтому вы компилируете его и добавляете наблюдателя, набрав:
coffee -cw app.coffee
Обратите внимание, что в последней версии CoffeeScript (1.9.1) есть ошибка, из-за которой наблюдатель не работает . Все следующие примеры были протестированы с использованием CoffeeScript v 1.9.0.
Основы CoffeeScript
В CoffeeScript вам не нужно объявлять переменные, как в JavaScript, хотя часто вам нужно будет установить начальное значение. Нам также не нужно вводить точки с запятой ( ; ) в конце строки.
Это означает, что вы пишете:
hasBody = true
вместо того :
var hasBody = true;
Вы также можете вызывать функции без использования скобок, но это желательно только для самых внешних вызовов функций. Поэтому вы можете сделать следующее:
$(".messages") .show 'slow'
вместо того:
$(".messages").show('slow');
Отступы имеют большое значение в CoffeeScript. Вы должны сделать отступ с двумя пробелами или табуляцией:
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 в CoffeeScript используется для итерации по массиву, в то время как цикл 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
Вы можете комбинировать это с ключевым словом CoffeeScript для фильтрации элементов в массиве:
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 становится немного умнее, как вы можете видеть из сгенерированного JavaScript. Обратите внимание, что выполнение происходит в анонимной функции, чтобы предотвратить утечку области действия и конфликт переменных.
var someValues, _i, _results; someValues = (function() { _results = []; for (_i = 0; _i <= 21; _i++){ _results.push(_i); } return _results; }).apply(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!
Ваши функции могут принимать неограниченное количество аргументов, если вы добавите ... (многоточие) после параметра. В этом случае все значения после и включая этот параметр добавляются в виде массива.
Вот как вы можете этого добиться:
showAwards = (awards...) -> console.log ("Awards collected : #{awards.join ', '}") showAwards "Award 1", "Award 2", "Award 3"
Код выше выводит:
Awards collected : Award 1, Award 2, Award 3
Последнее, что я хочу здесь упомянуть, это то, что когда вы находитесь внутри любой функции, CoffeeScript автоматически возвращает результат из последнего выполненного оператора. Следовательно, все ваши функции имеют неявное возвращаемое значение (как вы видели в анонимной функции, которая обрабатывает щелчки привязки выше).
Вывод
В этой статье я продемонстрировал многие функции, с которыми приятно работать с CoffeeScript. Я буду опираться на эти знания в следующей статье, когда буду использовать CoffeeScript для создания известной игры TicTacToe. А пока дайте мне знать, что вы думаете: вы уже используете CoffeeScript? Эта статья сделала вас любопытным попробовать? Или CoffeeScript предлагает не более чем ненужный уровень сложности?