Как обеспечить работу современного кода 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;
  };
}

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

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

• 7 вопросов по фронтенд-разработке
• Движки JavaScript. Часть 2: генерация кода и базовые оптимизации
• В чём разница между var, let и const в JavaScript

Читайте нас в Telegram, VK и Яндекс.Дзен

---

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