От переводчика: В статье есть несколько JavaScript нюансов, которые могут быть интересны и тем, кто далек от CoffeeScript
Как и все программисты, я осторожен в отношение CoffeeScript. Как может, немного синтаксического сахара, оправдать дополнительный шаг компиляции?
Но, после того как я поиграл с CoffeeScript, всего несколько дней, я понял, я никогда не вернусь назад. Синтаксический сахар — это только начало. Я стал писать код быстрее, и с меньшим количеством ошибок, потому что он, стал намного чище. CoffeeScript помогает придерживаться хорошего стиля в написание кода. Ниже я приведу несколько примеров на Javascript и опишу их более изящное решение с помощью CoffeeScript.
Многие новички считают, что var x означает: «Я объявил переменную с именем Х». На самом деле, var, лишь предотвращает Х от роуминга за пределы текущей области. Если вы напишете:
и не будете использовать var, тогда X автоматически станет глобальной. Сделайте подобную ошибку в двух частях вашего приложения, и одна глобальная переменная будет перекрывать другую, создавая ошибку.
Даже опытные профи часто делают подобную ошибку, особенно когда объявляют переменные сцеплением: var a = 1, b = 2 и присваивают новое значение в пределах окружения, тогда как var a = 1; b = 2 присваивает значение, глобальной переменной b.
От переводчика: Для тех, кто сомневается, что может перепутать "," и ";" приведу другой пример: var a = b = 3
С CoffeeScript, все переменные, автоматически попадают в текущее окружение. Когда вы пишете:
вы можете быть уверены, что не переопределили какую нибудь глобальную переменную. Мало того, благодаря CoffeeScript компилятору, Х автоматические ограничивается текущим файлом.
Один из самых распространенных источников путаници в JavaScript, ключевое слово this. Вы делаете простой вызов:
но получаете ошибку, потому что, внутри вызова данных, this указывает не на тот же объект, на который он указывал, за ее пределами.
Во-первых, ключевое слово this, имеет псевдоним @, для того, что бы было визуальное отличие от обычных переменных.
Во-вторых, для того, что бы передать переменные @ в связанную функцию, необходимо использовать => (жирная стрелка), в отличие от обычного символа ->, объявляющего функцию:
Тернарный оператор, занимает особое место в JavaScript: В отличие от других условных структур (if, switch), он возвращает результат. Это означает, что программисту приходится выбирать, между краткостью тернарного оператора:
или логической цепочкой:
Все условия в CoffeeScript, возвращают результат. Это дает нам ясный второй подход, без бессмысленного повторения:
Популярный тест «Так ли хорошо вы знаете JavaScript» содержит задачу:
результат будет:
Почему? Даже если в setTimeout таймаут равен 0, данная функция заработает только после завершения цикла. И когда функция выполнится, i будет равно 4-ом. Для того, что бы захватить каждое значение i, вам придется выполнить:
Хотя, CoffeeScript не захватывает автоматически переменные в цикле, он дает возможность сделать краткий захват:
результат будет:
Код говорит сам за себя:
Каждый фрагмент выше, превращается в одну строчку:
CoffeeScript это не только более красивый код, речь идет о более гибком коде. Речь идет, о большей уверенности, что вы сделаете правильный код с первого раза, и легко изменените его в будущем.
Если вам по душе шаблоны проектирования и быстрой интерации, вы должны дать CoffeeScript шанс. Даже, если в последствие вы решите, что это не для вас, вы в любом случае начнете лучше понимать JavaScript.
(Конечно, если вы обновитесь до Rails 3.1, у вас не будет выбора)
От переводчика: Что бы не вводить никого в заблуждение, скажу, это шутка! Выбор конечно есть, достаточно убрать строчку из Gemfile.
От переводчика: Поздравляю всех RoR разработчиков с выходом Rails 3.1 beta 1. Все не точности в переводе, прошу слать в ЛС.
Как и все программисты, я осторожен в отношение 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. Все не точности в переводе, прошу слать в ЛС.