- PVSM.RU - https://www.pvsm.ru -
Спешу предположить, что вы наслышаны о ES6 и, возможно, успели попробовать её. Тогда вам наверняка покажется интересной заметка о некоторых фичах спецификации, опубликованная Блейком Уильямсом [1] в блоге Thoughtbots. Я же, с позволения автора, публикую перевод.
Последнее время я смотрел в сторону спецификации ES6 [2], это следующая версия JavaScript, и наконец мне представилась возможность использовать её в проекте. За недолгое время использования я понял, что она решает множество проблем, которые пытается решить CoffeeScript, но без радикальных изменений синтаксиса.
Вы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5 [3]. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6 [4], а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL [5].
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 имеет небольшие различия:
Плюс сеттеры и геттеры, которые позволяют использовать функцию name в качестве атрибута.
Я всегда хотел более мощный синтакс строк в JavaScript. К счатстью ES6 предоставляет, так называемые, шаблоны строк [6]. Сравним строки 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);
}
Функции Variadic [7], “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. Узнать больше вы можете здесь [8].
Попробуйте ES6 в своём следующем проекте!
Источник [9]
Автор: ubermonkey
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/81692
Ссылки в тексте:
[1] Блейком Уильямсом: https://twitter.com/BlakeWilliams__
[2] ES6: http://en.wikipedia.org/wiki/ECMAScript#ECMAScript_Harmony_.286th_Edition.29
[3] 6to5: https://6to5.org/
[4] sprockets-es6: https://github.com/josh/sprockets-es6
[5] 6to5 REPL: https://6to5.org/repl/
[6] шаблоны строк: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
[7] Функции Variadic: http://en.wikipedia.org/wiki/Variadic_function
[8] здесь: https://6to5.org/docs/learn-es6/
[9] Источник: http://robots.thoughtbot.com/replace-coffeescript-with-es6
[10] Источник: http://habrahabr.ru/post/249751/
Нажмите здесь для печати.