Итак, проблема в том, что некоторые браузеры (точнее, 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;
  };
}

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

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Lokesh Jain: How to ensure our modern Javascript code run on all browsers?

Предыдущая статьяКраткое руководство по строкам и регулярным выражениям в R
Следующая статьяМоделирование данных в мире современного стека данных 2.0