Язык JavaScript постоянно развивается. Новые предложения к языку появляются регулярно, они анализируются и, если считаются достойными, добавляются в список по адресу https://tc39.github.io/ecma262/, а затем переходят к спецификации.
У команд, создающих движки JavaScript, есть свои идеи о том, что реализовать в первую очередь. Они могут решить реализовать предложения, находящиеся в стадии разработки, и отложить то, что уже есть в спецификации, потому что они менее интересны или их просто сложнее реализовать.
Поэтому довольно часто движок реализует только часть стандарта.
Хорошей страницей, на которой можно увидеть текущее состояние поддержки языковых функций, является https://compat-table.github.io/compat-table/es6/ (она большая, нам еще есть что изучить).
Как программисты, мы хотели бы использовать самые последние функции. Чем больше хороших вещей – тем лучше!
С другой стороны, как заставить наш современный код работать на старых движках, которые еще не понимают новейшие функции?
Для этого есть два инструмента:
Транспиллеры.
Полифиллы.
Здесь, в этой главе, наша цель — понять суть того, как они работают и их место в веб-разработке.
Транспилятор — это специальная программа, которая преобразует исходный код в другой исходный код. Он может анализировать («читать и понимать») современный код и переписывать его, используя старые синтаксические конструкции, так что он также будет работать в устаревших движках.
Например, в JavaScript до 2020 года не было «нулевого оператора объединения» ?? . Итак, если посетитель использует устаревший браузер, он может не понять код типа height = height ?? 100 .
Транспилятор проанализировал бы наш код и переписал height ?? 100 в (height !== undefined && height !== null) ? height : 100 .
// перед запуском транспилятора высота = высота ?? 100; // после запуска транспилятора высота = (высота!== не определено && высота!== ноль)? высота: 100;
Теперь переписанный код подходит для старых движков JavaScript.
Обычно разработчик запускает транспилятор на своем компьютере, а затем развертывает транспилированный код на сервере.
Говоря об именах, Babel — один из самых выдающихся транспиляторов.
Современные системы сборки проектов, такие как Webpack, предоставляют возможность автоматического запуска транспилятора при каждом изменении кода, поэтому его очень легко интегрировать в процесс разработки.
Новые возможности языка могут включать не только синтаксические конструкции и операторы, но и встроенные функции.
Например, Math.trunc(n) — это функция, которая «отрезает» десятичную часть числа, например Math.trunc(1.23) возвращает 1 .
В некоторых (очень устаревших) движках JavaScript нет Math.trunc , поэтому такой код не будет работать.
Поскольку мы говорим о новых функциях, а не об изменениях синтаксиса, здесь нет необходимости что-либо транспилировать. Нам просто нужно объявить недостающую функцию.
Скрипт, который обновляет/добавляет новые функции, называется «полифилл». Он «заполняет» пробел и добавляет недостающие реализации.
В данном конкретном случае полифилом для Math.trunc является скрипт, который его реализует, например:
if (!Math.trunc) { // если такой функции нет
// реализуем это
Math.trunc = функция(число) {
// Math.ceil и Math.floor существуют даже в древних движках JavaScript
// они будут рассмотрены позже в руководстве
число возврата <0? Math.ceil(число): Math.floor(число);
};
}JavaScript — очень динамичный язык. Скрипты могут добавлять/изменять любые функции, даже встроенные.
Две интересные библиотеки полифилов:
Core js, который поддерживает многое, позволяет включать только необходимые функции.
В этой главе мы хотели бы побудить вас изучить современные и даже «передовые» возможности языка, даже если они еще недостаточно поддерживаются движками JavaScript.
Только не забудьте использовать транспилятор (если используете современный синтаксис или операторы) и полифилы (чтобы добавить функции, которые могут отсутствовать). Они позаботятся о том, чтобы код работал.
Например, позже, когда вы познакомитесь с JavaScript, вы сможете настроить систему сборки кода на основе веб-пакета с помощью плагина Babel-Loader.
Хорошие ресурсы, показывающие текущее состояние поддержки различных функций:
https://compat-table.github.io/compat-table/es6/ – для чистого JavaScript.
https://caniuse.com/ – для функций, связанных с браузером.
PS Google Chrome, как правило, является самым современным языковым функционалом, попробуйте его, если демонстрационная версия не удалась. Однако большинство демонстрационных руководств работают с любым современным браузером.