Pull to refresh

CoffeeScript в деле — Пять вещей, которые можно сделать и с JavaScript

Reading time 3 min
Views 13K
Original author: Trevor Burnham
От переводчика: В статье есть несколько JavaScript нюансов, которые могут быть интересны и тем, кто далек от CoffeeScript

Как и все программисты, я осторожен в отношение CoffeeScript. Как может, немного синтаксического сахара, оправдать дополнительный шаг компиляции?

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

1. Объявление переменных


Многие новички считают, что var x означает: «Я объявил переменную с именем Х». На самом деле, var, лишь предотвращает Х от роуминга за пределы текущей области. Если вы напишете:

x = 'Hello from the JavaScript Nation!';

и не будете использовать var, тогда X автоматически станет глобальной. Сделайте подобную ошибку в двух частях вашего приложения, и одна глобальная переменная будет перекрывать другую, создавая ошибку.

Даже опытные профи часто делают подобную ошибку, особенно когда объявляют переменные сцеплением: var a = 1, b = 2 и присваивают новое значение в пределах окружения, тогда как var a = 1; b = 2 присваивает значение, глобальной переменной b.

От переводчика: Для тех, кто сомневается, что может перепутать "," и ";" приведу другой пример: var a = b = 3

Путь CoffeeScript


С CoffeeScript, все переменные, автоматически попадают в текущее окружение. Когда вы пишете:

x = 'Welcome to CoffeeScriptville!'

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

2. Другой this


Один из самых распространенных источников путаници в JavaScript, ключевое слово this. Вы делаете простой вызов:

tinman.prototype.loadBrain = function() {
   this.brain = 'loading...';
   $.get('ajax/brain', function(data) { this.brain = data; });
};

но получаете ошибку, потому что, внутри вызова данных, this указывает не на тот же объект, на который он указывал, за ее пределами.

Путь CoffeeScript


Во-первых, ключевое слово this, имеет псевдоним @, для того, что бы было визуальное отличие от обычных переменных.

Во-вторых, для того, что бы передать переменные @ в связанную функцию, необходимо использовать => (жирная стрелка), в отличие от обычного символа ->, объявляющего функцию:

tinman::loadBrain = ->
  @brain = 'loading...'
  $.get 'ajax/brain', (data) =>
    @brain = data

3. Сокращенные условия


Тернарный оператор, занимает особое место в JavaScript: В отличие от других условных структур (if, switch), он возвращает результат. Это означает, что программисту приходится выбирать, между краткостью тернарного оператора:

closestEdge = x > width / 2 ? 'right' : x < width / 2 ? 'left' : 'center';

или логической цепочкой:

if (x > width / 2) {
  closestEdge = 'right';
} else if (x < width / 2) {
  closestEdge = 'left';
} else {
  closestEdge = 'center';
}

Путь CoffeeScript


Все условия в CoffeeScript, возвращают результат. Это дает нам ясный второй подход, без бессмысленного повторения:

closestEdge =
if x > width / 2
  'right'
else if x < width / 2
  'left'
else
  'center'

4. Асинхронный функционал


Популярный тест «Так ли хорошо вы знаете JavaScript» содержит задачу:

for (var i = 1; i <= 3; i++) {
  setTimeout(function() { console.log(i); }, 0);
}

результат будет:
4
4
4

Почему? Даже если в setTimeout таймаут равен 0, данная функция заработает только после завершения цикла. И когда функция выполнится, i будет равно 4-ом. Для того, что бы захватить каждое значение i, вам придется выполнить:

for (var i = 1; i <= 3; i++) {
  (function(i) {
    setTimeout(function() { console.log(i); }, 0);
  })(i);
}

Путь CoffeeScript


Хотя, CoffeeScript не захватывает автоматически переменные в цикле, он дает возможность сделать краткий захват:

for i in [1..3]
  do (i) ->
    setTimeout (-> console.log i), 0

результат будет:
1
2
3


5. Повторение, повторение


Код говорит сам за себя:

x = sprite.x;
y = sprite.y;
css = {
  opacity: opacity,
  fontFamily: fontFamily
};
function(request) {
  body = request.body;
  status = request.status;
  // ...
}

Путь CoffeeScript


Каждый фрагмент выше, превращается в одну строчку:

{x, y} = sprite
css = {opacity, fontFamily}
({body, status}) -> ...

Заключение


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

Если вам по душе шаблоны проектирования и быстрой интерации, вы должны дать CoffeeScript шанс. Даже, если в последствие вы решите, что это не для вас, вы в любом случае начнете лучше понимать JavaScript.

(Конечно, если вы обновитесь до Rails 3.1, у вас не будет выбора)
От переводчика: Что бы не вводить никого в заблуждение, скажу, это шутка! Выбор конечно есть, достаточно убрать строчку из Gemfile.

От переводчика: Поздравляю всех RoR разработчиков с выходом Rails 3.1 beta 1. Все не точности в переводе, прошу слать в ЛС.
Tags:
Hubs:
+29
Comments 45
Comments Comments 45

Articles