В новую эру веб-разработки мы никогда не думаем о написании собственного полифилла, потому что какие бы фреймворки мы ни использовали, они используют полифилл под капотом. Библиотеки вроде 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;
};
Таким образом, мы можем написать простой пример полифилла.
Вывод
В нашу нынешнюю эпоху веб-разработки нет необходимости писать полифилл самостоятельно, поскольку доступны транспиляторы или библиотеки. Но хорошо иметь базовое представление о полифилле. Надеюсь, что эта статья дает общее представление о том же. Вы можете прочитать следующие статьи о полифиллах, чтобы получить больше знаний.