Поддержка старых браузеров

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

Но вы можете сделать еще кое-что.

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

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

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

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

Вот как работает полифилл:

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

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

Вы можете найти этот код на MDN.

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
  });
}

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

Полифиллы можно использовать двумя способами:

Полифил вручную (как в примере выше)
Добавление нескольких полифиллов одновременно через библиотеку

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

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

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

Добавление нескольких полифиллов одновременно

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

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

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

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

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

Добавьте любую необходимую прокладку / полифил
Компилирует препроцессоры в JavaScript

Подробнее по второму пункту:

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

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

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

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

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

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

Многое может быть, но вы уловили суть дела.

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

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

Вот пример с Abort Controller

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

Вот снова пример с Abort Controller:

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

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

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

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

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

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

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

Спасибо за чтение. Эта статья вам чем-то помогла? Если да, то Я надеюсь, вы подумаете о том, чтобы поделиться им. Вы могли бы кому-нибудь помочь. Спасибо!

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

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