Как обеспечить работу современного кода JavaScript во всех браузерах



Книга Как обеспечить работу современного кода JavaScript во всех браузерах

Итак, проблема в том, что некоторые браузеры (точнее, JS-движки) не могут разобрать код. А что если преобразовать непонятный движку код так, чтобы он смог его понять?


Попробуем это сделать.


Есть два наиболее распространенных подхода к преобразованию кода:


  1. Транспайлер (для синтаксических нарушений).
  2. Полифилл (для функциональных нарушений).

Обсудим каждый из них.


Транспайлер


Это инструмент, который преобразует синтаксис современного 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;
};
}

Здесь можно подробнее изучить полифиллы.



79   0  
    Ничего не найдено.

Добавить ответ:
Отменить.