Техно-мир

Давайте признаем это, javascript не всегда считался лучшим решением среди разработчиков, и с момента появления CoffeeScript в 2009 году, этот язык стремительно заполонил мир javascript-разработчиков. Это произошло во многом потому, что он превосходит javascript в одном важнейшем аспекте: синтаксисе кода.Даже несмотря на то, что это сравнительно новый язык, вы быстро научитесь с ним работать, так как он представляет собой переформулированный javascript. Он более приятный и более простой в сравнении с javascript.При работе с CoffeeScript, не забывайте о том, что вы пишите код, который перед реализацией будет наилучшим образом скомпилирован в javascript-код, который без труда проходит тестирование JSLint, поэтому здесь у вас немного меньше поводов для беспокойства. Полученный в результате код будет представлять собой валидный javascript, с обработкой которого у браузеров не возникнет проблем. CoffeeScript для javascript – все равно, что SASS для CSS, — возможность создавать более простой, но более продуктивный код.

Установка и использование

CoffeeScript представляет собой утилиту node.js, поэтому, для того чтобы установить его, вам потребуется установленный node.js, а также node package manager. Предположив, что вы уже установили эти два пакета, все, что вам остается сделать, это открыть терминал и установить CoffeeScript при помощи package manager, используя данный код:

npm install -g coffee-script

И на данном этапе вы получаете установленный CoffeeScript. Чтобы скомпилировать файл .coffee в javascript-файл, вам нужно вписать:

coffee --compile script.coffee

Он скомпилирует файл script.coffee в script.js в ту же папку, но это произойдет только после того, как вы запустите команду. Если вы хотите, чтобы утилита компилировала каждое внесенное вами изменение в файл coffee, вам нужно будет добавить -watch перед компилированием:

coffee --watch --compile script.coffee

С этим добавлением, ваш javascript будет перекомпилироваться каждый раз, когда вы вносите изменения в файл .coffee.

Переменные

При создании javascript-переменной, нам нужно добавлять приставочный ключ var, в CoffeeScript такая необходимость отпадает, и вы можете просто вписать переменную, и привязать ее к чему-либо. Также стоит взглянуть на то, что CoffeeScript использует множество методов вложения, дабы избежать использования точки с запятой, и для того, чтобы язык понял, что объявление переменной завершено, вам нужно просто перейти на новую строку:

age = 21
country = "Portugal"

В javascript вам бы нужно было написать нечто вроде этого:

var age = 21;
var country = "Portugal";

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

Операторы сравнения и логические операторы

Помните, сколько времени вы угробили на то, чтобы запомнить операторы в javascript? Помните, как вы удивлялись, почему вам нужно использовать === вместо того, чтобы просто использовать is? Ну что же, CoffeeScript позаботится и об этом. Утилита предлагает вам действительно пригодные к использованию алиасы операторов:

Операторы сравнения

=== теперь превратилось в простое is;!== было преобразовано в более читабельное isnt.

Логические операторы

Вместо &&, теперь вы можете использовать and;Что касается ||, теперь вы можете использовать просто or;Маленький знак восклицания, который отвечал за not, теперь преобразован в более логичное… not.

Объявления if

CoffeeScript также избавит вас от фигурных скобок. Здесь используется специальный метод для указания, когда вы находитесь внутри объявления. If-объявления работают по тому же принципу, как и в javascript, но вам не нужны фигурные или круглые скобки. Просто вводите нужный вам код при включенном объявлении:

if work > 24 and sleep < 8
   vacations()
else
   work()

и он будет преобразован в javascript следующим образом:

if (work > 24 && sleep < 8) {
 vacations();
} else {
    work();
}

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

Перебор массивов

Перебор массивов – это то, что вам приходилось делать в любом javascript-приложении, над которым вы работали, и при этом синтаксис для перебора массивов в javascript не такой уж и простой. Нам кажется, что здесь CoffeeScript выступает просто великолепно! Для перебора массивов мы просто используем цикл for..in следующим образом:

tasks = ['Design','Code','Groceries']
for task in tasks
 alert task

Все, что совершает этот отрывок кода, это считывает всё из массива, а затем выдает элементы один за другим. Чтобы еще больше упростить процесс, вы можете даже записать цикл for..in в одну строку следующим образом:

tasks = ['Design','Code','Groceries']
alert task for task in tasks

Такой вариант гораздо легче воспринимается и его легче использовать, нежели то, с чем нам приходилось сталкиваться в javascript. Для этого, в CoffeeScript нам понадобятся эти две строки:

var task, tasks, _i, _len;

tasks = ['Design', 'Code', 'Groceries'];

for (_i = 0, _len = tasks.length; _i < _len; _i++) {
  task = tasks[_i];
  alert(task);
}

Циклы While

Эти циклы также очень удобны при создании javascript-приложений, и разработчики CoffeeScript не ударили в грязь лицом, пытаясь облегчить процесс работы с этими циклами. Например:

while sleep < 8
   sleep()

либо вы можете написать все в одну строку, если хотите:

while sleep < 8 then sleep()

Или:

sleep() until sleep > 8

на чистом коде javascript может быть преобразован в:

//then
while (sleep < 8) {
  sleep();
}

Или:

//until
while (!(sleep > 8)) {
  sleep();
}

Функции

Функции также представляют собой важную часть любого языка программирования, и даже несмотря на то, что функции в javascript не такие уж и запутанные, как другие части, которые упрощает CoffeScript, здесь тоже нашлось то, что можно упростить. Теперь, простая функция, которая берет чье-то имя, а затем выводит его, может быть написана следующим образом:

sayHi = (name) ->
 return "Hello " + name
alert sayHi('Sara')

Все, что вы делаете, это называете функцию (в данном случае функция называется sayHi), а затем, после знака равенства, вам следует указать параметры. Здесь имя – это единственный параметр, и после того, как наша функция будет определена, нам нужно вписать ->, после чего, на следующей строке, нужно указать предназначение функции, чтобы CoffeeScript понял, что мы находится внутри функции. В данном случае, все что нам нужно сделать, это отпечатать «Hello», а затем имя человека. Мы используем простой alert, чтобы запустить функцию с именем. Мы также можем вписать этой единственную строку, которая исключает ввод и отступы, потому что в ней после -> и так указано, что функция должна делать:

sayHi = (name) -> return "Hello " + name

Этот небольшой отрывок кода будет скомпилирован в следующий код javascript:

var sayHi;

sayHi = function(name) {
  return "Hello " + name;
};

alert(sayHi('Sara'));

Конечно же, это была довольно приятная функция, но как вы видите, она помогла нам сэкономить 3 строки кода и, конечно же, в javascript мы могли просто назвать переменную по мере объявления функции следующим образом:

var sayHi = function(name) {
  return "Hello " + name;
};

alert(sayHi('Sara'));

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

В завершение

Это лишь малость из того, что для вас может сделать CoffeeScript. При работе над более сложными задачами, эта утилита в значительной степени облегчит вашу работу в сравнении с javascript: от вас потребуется меньше кода, он получится более понятным и им будет гораздо проще управлять. Даже забросив сайт на год, вернувшись к коду, вы все равно поймете, что там происходит, и что нужно переделывать.Следите за новостями, так как скоро мы поделимся с вами второй частью данной серии статей. Во второй части мы расскажем вам о том, как комбинировать CoffeeScript с jQuery и LocalStorage для создания простенького приложения со списком контактов.

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

337 Просмотров

Благодарностей: 0

0