В новую эру веб-разработки мы никогда не думаем о написании собственного полифилла, потому что какие бы фреймворки мы ни использовали, они используют полифилл под капотом. Библиотеки вроде core-js или polyfill.io делают ту же работу. Но что такое полифилл BTW?

Сценарий, который обновляет/добавляет новые функции, называется полифиллом. Он заполняет пробел и добавляет недостающие реализации. ~ https://javascript.info/polyfills

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

Кроме того, многие API-интерфейсы JS были обновлены, и поэтому новые API-интерфейсы не поддерживаются в старых браузерах. В этом случае пользователи, использующие старые браузеры, получат версию вашего приложения с ошибками.

Пару лет назад, когда я работал фронтенд-разработчиком, моя работа заключалась в том, чтобы просто конвертировать PSD в HTML. Раньше у меня было много вопросов, когда клиенты просили меня обеспечить поддержку IE8 и более поздних версий. Я всегда добавлял для этого html5shiv, не зная, что такое html5shiv. Таким образом, html5shiv также является полифиллом, который обеспечивает поддержку новых тегов HTML в более старой версии, и, следовательно, html5shiv также называется полифиллом.

Теперь мы обсудим, как писать полифиллы, на простом примере.

Поскольку .filter — это функция es6, и некоторые из старых браузеров до сих пор ее не поддерживают. Мы напишем полифилл функции .filter.

// First it checks if `.filter` is available in browser
if(typeof Array.prototype.filter !== "function") {
  // implementation goes here
  Array.prototype.filter = function(fn, thisp) {
    if (this === null) throw new TypeError;
    if (typeof fn !== "function") throw new TypeError;
    var result = [];
    for (var i = 0; i < this.length; i++) {
      if (i in this) {
        var val = this[i];
        if (fn.call(thisp, val, i, this)) {
          result.push(val);
        }
      }
    }
    return result;
  };
}

// Use of .filter
[1, 2, 3, 4, 5].filter(e => e > 3);

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

Array.prototype.filter = function(fn, thisp) {
  if (this === null) throw new TypeError;
  if (typeof fn !== "function") throw new TypeError;
  var result = [];
  for (var i = 0; i < this.length; i++) {
    if (i in this) {
      var val = this[i];
      if (fn.call(thisp, val, i, this)) {
        result.push(val);
      }
    }
  }
  return result;
};

Таким образом, мы можем написать простой пример полифилла.

Вывод

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