Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Веселье с CoffeeScript

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Несмотря на то что CoffeeScript новый язык, выучить его можно довольно быстро. На изучение действительно не уйдёт много времени, так как это всё тот же JavaScript, так сказать в новой одежде.  CoffeeScript с первого взгляда похож на Python или Ruby, компилируется в чистый JavaScript, не содержащий ничего лишнего. Сегодня мы посмотрим почему все говорят о CoffeeScript.


Слово от автора

С появлением мощных JavaScript движков, таких как V8, JavaScript перестали считаться простым скриптовым языком для добавление небольших динамических эффектов на станицу и большинство разработчиков стали обращать на него внимание, как на довольно мощный и полезный язык. Его даже стали использовать на стороне сервера (node.js к примеру), а не только для создания клиентских приложений. Тот факт, что язык основан на довольно изящной, модели прототипов, также сыграл свою роль. Нет никаких сомнений, что JavaScript критически важный язык для любого разработчики и останется таким в обозримом будущем.

Однако я всегда считал, что синтаксис слегка неуклюжий. После того, как мне довелось несколько лет работать с такими языками, как Ruby и Python, я стал замечать, что точки с запятой, скобки, многословный синтаксис - довольно утомляют. Думаю, что я не один кто так думает. Тут-то нам на помощь и приходит CoffeeScript!


Что такое CoffeeScript?

CoffeeScript компилируется в обычный JS.

CoffeeScript в своей основе является синтаксическим сахаром для JavaScript. Ядро языка остаётся не тронутым, разве что можно увидеть небольшие семантические улучшения. Синтаксис модифицирован, примером послужил Python и Ruby.

Помните, что CoffeeScript компилятор выдаёт чистый JavaScript, который не только следует лучшим практикам и легко читается, но также проходит валидацию JSLint. Следовательно вам не придётся беспокоиться о совместимости. В худшем случае, если текущий проект больше не поддерживается, вы можете взять уже скомпилированный CoffeScript'ом чистый JavaScript и продолжить добавлять свой код. Вы ни в коем случае не зависите от окружения CoffeeScript.

Может показаться, что это странная концепция, но в рамках веб-разработки, вы возможно уже встречали технологии, которые следуют такой же идеологии. К примеру HAML новый способ написания HTML, или SASS, который является новым способом написания CSS. Все они делают синтаксис чище, с кодом легче работать, в свою очередь эти два факта позволяют улучшить продуктивность.


Небольшой пример кода

Вам вероятно не терпится узнать, как код выглядит, вот вам пример:

Здесь вы можете видеть быструю реализацию бинарного поиска. Не стоит обращать особого внимания на код, на данный момент. Просто познакомьтесь с синтаксисом.

Ниже можно видеть JavaScript код, сгенерированный CoffeScript'ом:


Плюсы и минусы

Далее мы разберём некоторые недостатки и плюсы CoffeeScript. Я не буду делать детальный обзор, но я думаю этого будет вполне достаточно, чтобы ознакомится, как работает данная система.

Плюсы

  • Отступы на подобии Python
  • Простой синтаксис, похожий на Ruby
  • Короткое объявление функций
  • Проходит валидацию JSLint
  • Наследование основанное на классах

Помимо этого имеется ряд семантических и синтаксических улучшений.

Минусы

  • Потребуется немного времени на изучение
  • Развёртывание на сервере может быть муторным, в зависимости от выбранного способа
  • Вам нужно базовое знание JS для отладки. Вы не можете начать процесс отладки сразу же, как в случаи с обычным JS.

Начнём

Официальный метод начать работу с CoffeeScript, добавить утлиту командной строки, которая работает на node.js, затем, просто скачать исходники и установить их. Всё просто, нечего добавить. Скачайте node.js и запустите npm install coffee-script [или для исходников, bin/cake install] для установки и начала работы.

С Windows ситуация немного сложнее. Нет простого способа поставить node.js или установить исходники [без Cygwin]. Однако, не стоит беспокоиться. Предприимчивые люди написали компиляторы, которые будут работать нативно на Windows. Я перечислил некоторые из них ниже:

Обратите внимание, что компилятор, в скомпилированной JavaScript форме, также привязан к исходникам, если вам вдруг интересно. Он находится в директории под названием extra.

Теперь, когда всё готово, мы посмотрим на ряд полезных вещей, которые помогут понять, как CoffeeScript упрощает написание JavaScript.


Использование отступов

Для упрощения синтаксиса CoffeeScript эффективно использует отступы. Людям знакомым с Python это будет просто понять, тем не менее я предоставляю простое объяснение.

Для начала, нет необходимости ставить в конце каждой строки точку с запятой. Конец строки автоматически интерпретируется, как конец выражения. К примеру..

Компилируется в:

Также вас порадует новость, что фигурные скобки необязательны. Что насчёт огромного количества закрывающих и открывающих скобок указывающие на блок кода? В них тоже нет необходимости. В CoffeeScript, вы используете подобную Python индентацию для обозначения начала и конца блока.

CoffeeScript не требует ненужных скобок.

Вот вам простой пример. Игнорируйте код, обратите внимание только на индентацию. Со всем остальным мы разберёмся немного позже:

.. компилируется в

Если вам всё ещё непонятно, не волнуйтесь. Синтаксис будет иметь больше смысле, после того как вы начнёте ориентироваться в языке.


Изящные, семантические алиасы

CoffeeScript предоставляет ряд алиасов для операторов и ключевых слов, делая код более читабельным и интуитивным. Давайте взглянем на некоторые из них.

Для начала, операторы сравнения:

  • is соответствует ===
  • isnt компилируется в !==
  • == и != компилируется в === и !==, можно заметить, что скомпилированные результат отвечает лучшим практикам JavaScript

Давайте посмотрим как это выглядит на деле.

..компилируется в..

Довольно легко читать, не правда-ли? Теперь, посмотрим на алиасы логических операторов.

  • and соответствует &&
  • or соответствует ||
  • not компилируется в !

Отталкиваясь от предыдущего кода:

..компилируется в..


Условия

Как вы видели выше, конструкция if/else работает также как в обычном JavaScript, за исключением угловых и обычных скобок. Ниже мы посмотрим на некоторые вариации.

Вот как выглядит тернарный оператор:

Дополнительное семантическое улучшение - ключевое слово unless. Эти функции прямая противоположность if.

И компилируется в JavaScript...


Switch-Case

Switch выражение выглядит немного глупо в JavaScript. CoffeeScript предоставляет нам интуитивную обёртку этой конструкции.

Начинается она с ключевого слова switch, как вы могли предположить, после чего указывается переменная, которую мы будем проверять. Каждому case или возможному значению предшествует ключевое слово when, затем следует выражение запуска, если значение совпадает. 

Не нужно указывать выражение break в конце каждого case выражения: CoffeeScript делает это для вас автоматически.

Синтаксис должен быть понятен, если вы уже знакомы с эквивалентом в JavaScript. Единственно, что стоит отметить так это ключевое слово then. Оно используется для разделения условия от выражения, перед началом новой строки. Вы можете использовать then для других условных выражений, также как и для циклов.

Вот JS который будет сгенерирован после компиляции CoffeeScript:


Основные циклы

Циклы являются другой важной конструкцией во время работы с типичным JavaScript кодом. Будь то обход чисел в массиве или элементов DOM древа, вам всегда предстоит использовать цикл для коллекций.

CoffeeScript предоставляет нам очень гибкий цикл while, который может быть модифицирован до функции, как циклы for или do-while.

until является другим семантическим улучшением и представляет из себя эквивалент while not. Простой пример:


Обход коллекций циклом

Обход циклом массивов не вызывает сложностей. Вам нужно воспользоваться конструкцией for..in, для обхода массива. Давайте я покажу вам как это сделать:

В том случае если вы предпочитаете выражения на одной строке:

CoffeeScript компилирует обычный цикл for, следующим образом. Обратите внимание, что согласно лучшим практикам, длинна массива кэшируется изначально.

Итерация по ассоциативному массиву [или хэшу, или словарю, или парам ключ - значение] тоже довольно просто, используя ключевое слово of.

Как и предполагалось, пример выше компилируется в обычный цикл for, как показано ниже:


Функции

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

Это основной синтаксис создания и использования функций. Значения параметров по умолчанию, могут быть указаны на одной строке. CoffeeScript создаёт код, чтобы проверить было-ли передано значение или нет.

Вызов функции также прост. Вам не нужны скобки: передайте параметры один за другим.

Как всегда, вот вам пример сгенерированного кода:


Добавление обычного JavaScript

Иногда, у нас нет другого выбора, нам нужно воспользоваться обычным JavaScript кодом внутри кода CoffeeScript. К счастью, такие случаи происходят довольно редко, но тем не менее инструмент для решения подобной проблемы, также существует.

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


Что насчёт библиотек?

Всё хорошо, вы можете использовать их также, как и раньше. CoffeeScript отлично работает со сторонними библиотеками, большими или маленькими, так как они просто компилируются в обычный JavaScript. Вам стоит переформатировать и/или отрефакторить ваш код, немного, но кроме этого, несовместимость не будет являться проблемой.

Тем самым вместо того, чтобы писать это:

... вы будете писать это..


На этом всё друзья

Мы подошли к концу. Я не рассмотрел ряд тем, к примеру классы, так как это за границами статьи - введения. Ждите более продвинутых CoffeeScript туториалов, в будущем!

Я думаю CoffeeScript изменил мой подход к написанию JavaScript, надеюсь что данная статья также поможет вам пересмотреть создание кода на JavaScript. Вопросы? Есть что добавить? Критика? Оставьте ваш комментарий. Приятного программирования и спасибо, что прочитали мою статью!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.