От переводчика : В статье есть несколько нюансов JavaScript, которые могут быть интересны тем, кто далек от CoffeeScript. Как и все программисты, я забочусь о Кофескрипт .
Как небольшой синтаксический сахар может оправдать дополнительный этап компиляции? Но, поиграв с CoffeeScript всего несколько дней, я понял, что никогда не вернусь.
Синтаксический сахар — это только начало.
Я стал писать код быстрее и с меньшим количеством ошибок, потому что его стало гораздо больше.
очиститель .
CoffeeScript помогает вам поддерживать хороший стиль программирования.
Ниже я приведу несколько примеров на Javascript и опишу более элегантное решение с использованием CoffeeScript.
1. Объявление переменных
Многие новички думают, что вар х означает: «Я объявил переменную с именем X».Фактически, вар , только предотвращает выход X за пределы текущей области.
Если вы напишете:
и ты не будешь использовать вар , Затем Икс автоматически станет глобальным.x = 'Hello from the JavaScript Nation!';
Сделайте аналогичную ошибку в двух частях вашего приложения, и одна глобальная переменная переопределит другую, что приведет к ошибке.
Даже опытные профессионалы часто допускают эту ошибку, особенно при объявлении переменных как конкатенации: вар а = 1, б = 2 и придать новое значение окружающей среде, тогда как вар а = 1; б = 2 присваивает значение глобальной переменной б .
От переводчика : Для тех, кто сомневается, что можно спутать "," и ";" Я приведу другой пример: вар а = б = 3
Путь CoffeeScript
С помощью CoffeeScript все переменные автоматически включаются в текущую среду.
Когда вы пишете: x = 'Welcome to CoffeeScriptville!'
вы можете быть уверены, что не переопределили ни одну глобальную переменную.
Более того, благодаря компилятору CoffeeScript, Икс автоматически ограничивается текущим файлом.
2. Другое этот
Одним из наиболее распространенных источников путаницы в JavaScript является ключевое слово этот .
Вы делаете простой звонок: tinman.prototype.loadBrain = function() {
this.brain = 'loading.';
$.
get('ajax/brain', function(data) { this.brain = data; });
};
но вы получаете ошибку, потому что внутри вызова данных этот не указывает на тот же объект, на который указывал, за его пределами.
Путь CoffeeScript
Во-первых, ключевое слово этот , имеет псевдоним @, поэтому есть визуальное отличие от обычных переменных.
Во-вторых, чтобы передать переменные @ в связанную функцию, необходимо использовать => (толстая стрелка), в отличие от обычного символа -> , объявляющего функцию: tinman::loadBrain = ->
@brain = 'loading.'
$.
get 'ajax/brain', (data) =>
@brain = data
3. Короткие сроки
Тернарный оператор занимает особое место в JavaScript: в отличие от других условных структур ( если , выключатель ), он возвращает результат. Это означает, что программисту приходится выбирать между краткостью тернарного оператора: 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, эта функция будет работать только после завершения цикла.
И когда функция будет выполнена, я будет равен 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
35. Повторение, повторение
Код говорит сам за себя: 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 с релизом.
Все переводы не точные, присылайте пожалуйста в личку.
Теги: #JavaScript #coffeescript #rails #rails 3.1 #JavaScript #coffeescript
-
Определение Длины Дорожек На Доске
19 Oct, 24 -
Вторая Личность
19 Oct, 24
