JavaScript

ES6: Let, Const и «Временная мёртвая зона» (ВМЗ) изнутри

Перевод статьи ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Вот и ещё один выпуск «ES6 изнутри». Вы здесь впервые? Приветствую! Мы уже обсудили такие фичи, как деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, литерал объекта, и еще одну важную штуку — что такое классы в ES6. Сегодня мы встретимся с набором простых фич языка, которые появились в ES6 — let, const и нечто с жутковатым названием «Временная мертвая зона»

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью интерактивной оболочки REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6. Ещё одна довольно полезная альтернатива, это использовать онлайновый REPL для Babel — он показывает скомпилированный ES5-код справа от ES6-кода, чтобы быстро сравнить.

Начнём?

(далее…)

ES6: классы изнутри

Перевод статьи ES6 Classes in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Встречайте «ES6 изнутри». Впервые здесь? Тогда, возможно, вам стоит изучить такие фичи ES6, как  деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры или литерал объекта. Сегодня поговорим о «классах» в ES6.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6.

Начнём!

(далее…)

ES6: возможности литерала объекта изнутри

Перевод статьи ES6 Object Literal Features in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

И снова «ES6 изнутри». Если вы в этом цикле статей впервые, то советую изучить деструктирование, литералы шаблона, стрелочные функции или операторы расширения и оставшиеся параметры. Сегодня предлагаю познакомиться с литералами объекта в ES6. «Ну уж их-то и сейчас можно использовать» — скажете вы — литералы объекта тянутся еще аж с ES3. Эта статья про новинки ES6 для литералов объекта.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6.

Вперёд к неизведанному!

(далее…)

Деструктурирование в JavaScript (ES6) изнутри

Перевод статьи ES6 JavaScript Destructuring in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

В моей серии статей про React я кратко упомянул несколько фич ES6 (и введение в Babel), а теперь хочу сосредоточиться на самих фичах языка. Я уже много всего читал про ES6 и ES7, и пора уже поговорить об их фичах здесь на Pony Foo.

Эта статья предупреждает об опасности переборщить с фичами языка ES6. Затем начнём серию с обсуждения деструктирования в ES6 и когда оно наиболее полезно, а также некоторые из его подводных камней и нюансов.

(далее…)

Вкусности ES6: оператор расширения в подробностях

Перевод статьи ES6 Spread and Butter in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Встречайте очередную часть «ES6 изнутри» на Pony Foo. В предыдущих частях мы рассмотрели деструктирование, литералы шаблона, и, в последний раз, стрелочные функции. Сегодня мы рассмотрим ещё несколько новых фич ES6  оставшиеся параметры, оператор расширения и параметры по умолчанию.

Мы уже рассматривали некоторые из этих фич, когда говорили о деструктировании, которое поддерживает значения по умолчанию, как пример того, как несколько фич в ES6 образуют одну суперфичу, о чем упомянул вчера. Эта статья в итоге может оказаться короче остальных, поскольку рассказывать об этих довольно простых фичах особенно нечего. Однако, как подмечено в начале серии «ES6 изнутри», самые простые фичи, обычно, оказываются наиболее полезными. Так что приступим!

(далее…)

ES6: стрелочные функции изнутри

Перевод статьи ES6 Arrow Functions in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Ежедневная эпопея статей «ES6 изнутри» продолжается. Сегодня мы обсудим стрелочные функции. В прошлых статьях мы познакомились с деструктированием и литералами шаблона. Я стараюсь разобрать всё, что относится к набору фич ES6, и наконец добраться до ES7. Также я заметил, что, когда я пишу про эти фичи, они навсегда врезаются мне в память.

Раз вы читаете эти статьи, предлагаю установить Babel и babel-node, и повторять за мной, копируя отдельные примеры в файл. Можете затем запустить их при помощи babel-node yourfile в терминале. Самостоятельный запуск этих примеров, и, возможно, небольшая их корректировочка помогут лучше усвоить эти новые фичи — даже если вы просто добавите оператор console.log, чтобы разобраться в происходящем.

Итак, встречайте наших сегодняшних гостей.

(далее…)

ES6: литералы шаблона изнутри

Перевод статьи ES6 Template Literals in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Вчера мы рассмотрели «Деструктурирование в JavaScript (ES6) изнутри», и некоторые наиболее распространённые примеры его использования. Сегодня мы познакомимся с литералами шаблона. Что они из себя представляют, как их использовать и для чего.

Литералы шаблона — новая возможность в ES6 для более удобной работы со строками и шаблонами строки. Оберните текст в `обратные кавычки` и получите описанные ниже возможности.

  • В них можно интерполировать переменные
  • На самом деле можно интерполировать строки с любыми выражениями, не только переменные
  • Они могут быть многострочными. Наконец-то!
  • Можно создавать необработанные шаблоны, которые не интерпретируют обратные кавычки

(далее…)

Краткая история инструментария ES6

Перевод статьи A Brief History of ES6 Tooling  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

За последние дни я написал несколько статей про React и ES6, и сегодня хочу немного пояснить, чего это меня вдруг словно заклинило на ES6. Я уже давно интересуюсь ES6, но раньше мы были не готовы писать на нём код. В этой статье я хочу кратко затронуть историю инструментария ES6, и считаю, что сегодня гораздо лучшее время для внедрения ES6, чем полгода назад.

(далее…)

Обзор ES6 в 350 пунктах

Перевод статьи ES6 Overview in 350 Bullet Points  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Моя серия статей «ES6 изнутри» состоит из 24 статей, охватывающих большинство изменений синтаксиса и возможностей, появившихся в ES6. Цель этой статьи — резюмировать это всё, что даст вам практическое понимание большей части ES6, чтобы можно было быстро начать работать с ним. Я также привёл ссылки на все статьи «ES6 изнутри», чтобы вы легко могли перейти к нужной вам теме.

Я слышал, что вы любите перечисления по пунктам, так что я запилил статью с сотнями этих мерзавцев. Для начала, вот вам оглавление со всеми рассматриваемыми темами. В нем перечисляются пункты — очевидно. Но всё-таки, если хотите, чтобы эти идеи проникли в ваш мозг, вам придётся уделить гораздо больше времени на изучение предмета, проштудировав углубленные серии и экспериментируя со своим собственным кодом ES6.

(далее…)

Web Animations API: полезные ссылки

Перевод статьи Web Animations API Reference с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

В своей серии статей я изучал Web Animations API, чтобы поделиться тем, что я узнал об этом новом инструменте. Полагаю, что пришло время собрать в одном месте все обнаруженные мной ресурсы. Надеюсь, этот раздел будет часто обновляться по мере того, как люди начнут использовать и обсуждать Animations API.

(далее…)

Руководство по Web Animations API: заключение

Перевод статьи Web Animations API Tutorial Conclusion с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это заключение серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы неплохо поработали и, надеюсь, выяснили, что из себя представляет Web Animations API. В завершении этой серии давайте резюмируем, что мы обсудили ранее и рассмотрим, что ещё не реализовано.

(далее…)

Руководство по Web Animations API — Часть 5: приятная траектория движения

Перевод статьи Web Animations API Tutorial Part 5: The Loveable Motion Path с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это пятая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson. Раньше на моем блоге на Codepen вышла более краткая версия этой статьи, почти сразу после того, как Хром объявил о поддержке Motion Path за флагом.

Наконец-то! Анимация движения по контуру… теперь возможна не только в SVG.

(далее…)

Руководство по Web Animations API — Часть 4: групповые и последовательные эффекты

Перевод статьи Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это четвёртая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Давайте продолжим изучать множественные анимации с Web Animations API, и рассмотрим несколько вещей, которые сегодня доступны в полифилле, предназначенные для группировки и последовательности анимаций.

(далее…)

Руководство по Web Animations API — часть 3: множественные анимации

Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

(далее…)

Руководство по Web Animations API — Часть 2: Объект AnimationPlayer и управление временной шкалой

Перевод статьи Web Animations API Tutorial Part 2: The AnimationPlayer & Timeline Controls с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это вторая часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Теперь, когда мы знаем, как с помощью Web Animations API создать базовую анимацию, пришло время поговорить о состояниях, управлении, обратных вызовах и шкале времени.

(далее…)