Поддержка старых браузеров — часть 3: JavaScript

Легко обеспечить поддержку JavaScript для старых браузеров. В большинстве случаев вам просто нужно использовать полифилл.

Но есть и другие вещи, которые вы можете сделать.

Предыдущие статьи из этой серии

1. Часть 1: Поддержка старых браузеров
2. Часть 2: Поддержка старых браузеров — часть 2: CSS
3. Часть 3: Эта статья

Что такое полифилл?

Polyfill — это фрагмент кода, который сообщает браузерам, как реализовать функцию JavaScript. Как только вы добавите полифил, вам больше не нужно беспокоиться о поддержке. Это сработает.

Вот как работает Polyfill:

1. Он проверяет, поддерживается ли функция
2. Если нет, он добавляет код для поддержки функции

Вот пример полифилла в действии. Он проверяет, поддерживает ли браузер Array.prototype.find. Если браузер не поддерживает Array.prototype.findон сообщает браузеру, как его поддерживать.

Вы можете найти этот код на МДН.

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    },
    configurable: true,
    writable: true
  });
}

Использование полифиллов

Существует два способа использования полифиллов:

1. Полифилл вручную (как в примере выше)
2. Добавление множества полифилов сразу через библиотеку

Полифиллинг вручную

Во-первых, вам нужно поиск полифилла тебе нужно. Вы должны быть в состоянии найти его, если погуглите. Умные разработчики создали полифиллы почти для всего, что вам когда-либо понадобится.

Как только вы нашли полифилл, используйте описанный выше процесс для создания поддержки старых браузеров.

Добавление множества полифилов одновременно

Некоторые библиотеки содержат много полифилов. ES6-прокладка является одним из примеров такой библиотеки. Он обеспечивает поддержку всех функций ES6 в старых браузерах.

(Примечание: полифилл — это подмножество прокладки. Прокладка — это библиотека, которая привносит новый API в старую среду).

Использование передовых функций JavaScript

Если вы хотите использовать передовые функции JavaScript, рассмотрите возможность добавления Babel в процесс сборки.

Babel — это инструмент, который компилирует JavaScript. В процессе компиляции он может:

1. Добавьте любую прокладку/полифилл, которая вам нужна
2. Компилирует препроцессоры в JavaScript

Еще по второму пункту:

Babel работает в автономном режиме в процессе сборки. Он может читать файлы, которые вы ему передаете, а затем преобразовывать эти файлы в JavaScript, который браузер может прочитать.

Это означает, что вы можете использовать передовые функции, такие как Flow, TypeScript и другие интересные технологии, о которых вы слышали. Все они будут работать в браузерах (при условии, что вы сначала пропустите их через Babel!)

Что делать, если полифиллов недостаточно?

Если полифилов недостаточно для поддержки этой функции, вы можете пересмотреть объем поддержки, которую вы предоставляете для рассматриваемого браузера.

Вам нужно обеспечить одинаковую функциональность в разных браузерах? Может быть, вам стоит подумать о прогрессивном улучшении?

Может быть, вы можете кодировать так, чтобы эта функция не использовалась?

Много вариантов, но вы поняли суть.

Как узнать, поддерживает ли браузер эту функцию?

Сначала я проверю caniuse.com. Напишите название функции JavaScript, которую вы хотите, и вы сможете увидеть уровни поддержки браузера.

Вот пример с Прервать контроллер

Если caniuse.com не дает мне никакой информации, я проверю MDN. Вы найдете информацию о поддержке браузера в конце большинства статей.

Вот пример с Прервать контроллер опять таки:

Остерегайтесь стоимости JavaScript

Когда вы используете Polyfills, вы добавляете больше кода JavaScript.

Проблема с добавлением большего количества JavaScript заключается в том, что JavaScript становится больше. А чем больше JavaScript, тем больше проблем:

1. Старые браузеры обычно живут на старых компьютерах. Им может не хватать вычислительной мощности.
2. Пакеты JavaScript могут задерживать загрузку сайта. Подробнее об этом в «Стоимость JavaScript“ Эдди Османи

Подведение итогов

Легко добавить поддержку функций JavaScript. В большинстве случаев вы добавляете полифилл и заканчиваете работу. Но при этом помните о стоимости JavaScript!

Иногда может быть полезно полностью отказаться от этой функции.

Спасибо за чтение. Эта статья изначально была размещена на мой блог. Подписаться на моя рассылка если вы хотите больше статей, которые помогут вам стать лучшим разработчиком внешнего интерфейса.