Итак, проблема в том, что некоторые браузеры (точнее, JS-движки) не могут разобрать код. А что если преобразовать непонятный движку код так, чтобы он смог его понять?
Попробуем это сделать.
Есть два наиболее распространенных подхода к преобразованию кода:
- Транспайлер (для синтаксических нарушений).
- Полифилл (для функциональных нарушений).
Обсудим каждый из них.
Транспайлер
Это инструмент, который преобразует синтаксис современного JS-кода так, чтобы он был понятен устаревшим JS-движкам.
Более того, программы транспайлера могут принимать ввод на различных языках, например Rescript, Typescript и Coffeescript, и выдавать на выходе Javascript.
Например, в ES6 было введено использование классов:
class Student {
addStudent() {}
removeStudent() {}
static getOneStudent() {}
}
Класс — это просто синтаксический сахар в JS, но старые браузеры будут выдавать ошибку несовместимости. Поэтому используются трансайлеры, такие как Babel, чтобы преобразовать этот синтаксис в нативный JS-код (как ниже), понятный старым браузерам/движкам.
function Student() {}
Student.prototype.addStudent = function () {}; Student.prototype.removeStudent = function () {};
Student.getOneStudent = function () {};
Теперь ясно, как происходит преобразование синтаксиса в современных инструментах JS. Но как сделать так, чтобы встроенные функции, появившиеся в редакциях ES, также безотказно работали в старых браузерах, не имеющих их поддержки?
Полифилл
Это часть кода, который реализует технологию/функцию, представляя ее браузеру как нативную.
Обратите внимание, что здесь речь идет о новых функциях/методах, а не об изменении синтаксиса. Поэтому в данном случае нет необходимости что-то компилировать в код — нужно только реализовать недостающую функцию.
В ES6 была введена функция Object.assign, поэтому нужно написать ее полифилл, чтобы она работала без проблем во всех браузерах/движках.
if (typeof Object.assign != 'function') {
Object.assign = function (target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
Здесь можно подробнее изучить полифиллы.
Читайте также:
- 7 вопросов по фронтенд-разработке
- Движки JavaScript. Часть 2: генерация кода и базовые оптимизации
- В чём разница между var, let и const в JavaScript
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Lokesh Jain: How to ensure our modern Javascript code run on all browsers?
