[Из песочницы] Меняем CoffeeScript на ES6
Спешу предположить, что вы наслышаны о ES6 и, возможно, успели попробовать её. Тогда вам наверняка покажется интересной заметка о некоторых фичах спецификации, опубликованная Блейком Уильямсом в блоге Thoughtbots. Я же, с позволения автора, публикую перевод.Последнее время я смотрел в сторону спецификации ES6, это следующая версия JavaScript, и наконец мне представилась возможность использовать её в проекте. За недолгое время использования я понял, что она решает множество проблем, которые пытается решить CoffeeScript, но без радикальных изменений синтаксиса.
ES6 сегодняВы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6, а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL.Пользователям Vim Чтобы ассоциировать *.es6 файлы с JavaScript, добавьте в свой .vimrc следующую строчку: autocmd BufRead, BufNewFile *.es6 setfiletype javascript Классы В ES6, как и в Coffee, есть поддержка классов. Сравним один и тот же класс написанный на Coffee и на ES6.CoffeeScript даёт нам такие преимущества как задание переменных экземпляра из параметров, интерполяция строк и вызов функций без скобок:
class Person constructor: (@firstName, @lastName) →
name: → »#{@first_name} #{@last_name}»
setName: (name) → names = name.split » »
@firstName = names[0] @lastName = names[1]
blake = new Person «Blake», «Williams» blake.setName («Blake Anderson») console.log blake.name () В ES6 классам можно определить сеттеры и геттеры: class Person { constructor (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }
get name () { return this.firstName + » » + this.lastName; }
set name (name) { var names = name.split (» »);
this.firstName = names[0]; this.lastName = names[1]; } }
var blake = new Person («Blake», «Williams»); blake.name = «Blake Anderson» console.log (blake.name); Если вы пользовались библитеками или фреймворками дополняющими JavaScript классами, вы уже обратили внимание что синтаксис ES6 имеет небольшие различия: Нет точки с запятой в конце определения функции Нет ключевого слова function Нет запятых после каждого определения Плюс сеттеры и геттеры, которые позволяют использовать функцию name в качестве атрибута.Интерполяция Я всегда хотел более мощный синтакс строк в JavaScript. К счатстью ES6 предоставляет, так называемые, шаблоны строк. Сравним строки Coffee и JS с шаблонами строк ES6.CoffeScript:
«CoffeeScript allows multi-line strings with interpolation like 1 + 1 = #{1 + 1} » JavaScript: «JavaScript strings can only span a single line » + «and interpolation isn’t possible» ES6: `Template strings allow strings to span multiple lines and allow interpolation like 1 + 1 = ${1 + 1} ` Можно воспользоваться шаблонами строк в предыдущем примере определения класса изменив геттер name на: get name () { return `${this.firstName} ${this.lastName}`; } В отличи от конкатенации этот код гораздо чище.Толстые стрелки Еще одна фича, делающая Coffee таким привлекательным, — толстые стрелки — есть в ES6. Толстые стрелки позволяют байндить функцию к this. Для начала, посмотрим как мы справлялись без толстых стрелок.В ES5 мы вынуждены ссылаться на this определяя функцию:
var self = this;
$(«buttob»).on («click», function () { // do something with self }); Coffee позволяет обходиться без аргументов и скобок вовсе: $(«button»).on «click», => # do something with this }); В ES6 скобки требуется вне зависимости от наличия параметров: $(«button»).on («click», () => { // do something with this }); Другие фичи В ES6 есть и другие возможности о которых стоит упомянуть.Аргументы по умолчанию CoffeeScript: hello = (name = «guest») → alert (name) ES6: var hello = function (name = «guest») { alert (name); } Splats Функции Variadic, «splats» в терминологии Coffee, позволющие принимать N аргументов определив только один. В ES6 они называются «остальные аргументы».CoffeeScript: awards = (first, second, others…) → gold = first silver = second honorable_mention = others ES6: var awards = function (first, second, …others) { var gold = first; var silver = second; var honorableMention = others; } Деструктурирование Деструктурирование позволяет сопоставлять массивы и объекты с шаблоном для извлечения конкретных значений.CoffeeScript:
[first, _, last] = [1, 2, 3] ES6: var [first, , last] = [1, 2, 3] Деструктурирование можно использовать в сеттерах, как в предыдущем примере с сеттером name, чтобы сделать код более лаконичным: set name (name) { [this.firstName, this.lastName] = name.split (» »); } Заключение Трансляторы ES6 активно разрабатываются и приближаются к CoffeScript по функциональности. Этот пост рассказывает лишь о небольшом количестве возможностей, которые ES6 дает JavaScript. Узнать больше вы можете здесь.Попробуйте ES6 в своём следующем проекте!
Источник
