polyfill js что это
Полифилы
JavaScript – динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в JS новых возможностей, они анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик https://tc39.github.io/ecma262/, а затем публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать в первую очередь. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновике, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Можно проверить текущее состояние поддержки различных возможностей JavaScript на странице https://kangax.github.io/compat-table/es6/ (нам ещё предстоит изучить многое из этого списка).
Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Два интересных хранилища полифилов:
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
Примеры в учебнике
Большинство примеров можно запустить «на месте», как этот:
Примеры, в которых используются современные возможности JS, будут работать, если ваш браузер их поддерживает.
Google Chrome обычно поддерживает современные функции, можно запускать новейшие примеры без каких-либо транспилеров, но и другие современные браузеры тоже хорошо работают.
Современный DOM: полифилы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
В старых IE, особенно в IE8 и ниже, ряд стандартных DOM-свойств не поддерживаются или поддерживаются плохо.
Если говорить о современных браузерах, то они тоже не все идут «в ногу», всегда какие-то современные возможности реализуются сначала в одном, потом в другом.
Но это не значит, что нужно ориентироваться на самый старый браузер из поддерживаемых!
Для того, чтобы не думать об устаревших браузерах, а писать современный код, который при этом работает везде, используют полифилы.
Полифилы
«Полифил» (англ. polyfill) – это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными.
Один полифил мы уже видели, когда изучали собственно JavaScript – это библиотека ES5 shim. Если её подключить, то в IE8- начинают работать многие возможности ES5. Работает она через модификацию стандартных объектов и их прототипов. Это типично для полифилов.
В работе с DOM несовместимостей гораздо больше, как и способов их обхода.
Что делает полифил?
Вот код для такого полифила:
Если этот код запустить, то firstElementChild появится у всех элементов в IE8.
Общий вид этого полифила довольно типичен. Обычно полифил состоит из двух частей:
Проверка встроенного свойства
За счёт этого работает проверка в первой строке полифила.
Важная тонкость – элемент, который мы тестируем, должен по стандарту поддерживать такое свойство.
Если мы хотим проверить поддержку не свойства целиком, а некоторых его значений, то ситуация сложнее.
Для этого можно создать с таким type и посмотреть, подействовал ли он.
Добавляем поддержку свойства
Если мы осуществили проверку и видим, что встроенной поддержки нет – полифил должен её добавить.
Для этого вспомним, что DOM элементы описываются соответствующими JS-классами.
Они наследуют, как мы видели ранее, от HTMLElement, который является общим родительским классом для HTML-элементов.
Например, можно добавить всем элементам в прототип функцию:
Сложнее – добавить свойство, но это тоже возможно, через Object.defineProperty :
В IE8 современные методы для работы со свойствами, такие как Object.defineProperty, Object.getOwnPropertyDescriptor и другие не поддерживаются для произвольных объектов, но отлично работают для DOM-элементов.
Чем полифилы и пользуются, «добавляя» в IE8 многие из современных методов DOM.
Какова поддержка свойства?
А нужен ли вообще полифил? Какие браузеры поддерживают интересное нам свойство или метод?
Зачастую такая информация есть в справочнике MDN, например для метода remove() : https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove – табличка совместимости внизу.
Итого
Если вы поддерживаете устаревшие браузеры – и здесь речь идёт не только про старые IE, другие браузеры тоже обновляются не у всех мгновенно – не обязательно ограничивать себя в использовании современных возможностей.
Многие из них легко полифилятся добавлением на страницу соответствующих библиотек.
Полифилы хороши тем, что мы просто подключаем их и используем везде современный DOM/JS, а когда старые браузеры окончательно отомрут – просто выкинем полифил, без изменения кода.
Типичная схема работы полифила DOM-свойства или метода:
Описанная ситуация нормальна. Не всегда полифил обеспечивает идеальную поддержку наравне с родными свойствами. Но если мы не собираемся так делать, то подобный полифил вполне подойдёт.
Один из лучших сервисов для полифилов: polyfill.io. Он даёт возможность вставлять на свою страницу скрипт с запросом к сервису, например:
При запросе сервис анализирует заголовки, понимает, какая версия какого браузера к нему обратилась и возвращает скрипт-полифил, добавляющий в браузер возможности, которых там нет. В параметре features можно указать, какие именно возможности нужны, в примере выше это функции стандарта ES6. Подробнее – см. примеры и список возможностей.
Также есть и другие коллекции, как правило, полифилы организованы в виде коллекции, из которой можно как выбрать отдельные свойства и функции, так и подключить всё вместе, пачкой.
Более мелкие библиотеки, а также коллекции ссылок на них:
Конечно, можно собрать и свою библиотеку полифилов самостоятельно из различных коллекций, которые перечислены выше, а при необходимости и написать самому. В этой части учебника мы изучим ещё много методов работы с DOM, которые в этом помогут.
Что такое полифил?
Перевод статьи: What is a polyfill?
Автор: Remy Sharp.
Откуда взялся полифил и как формировался термин?
Это произошло ранее, в 2009 году, когда я был занят написанием книги «Introducing HTML5» («Знакомство с HTML5»). Сидя в кофейне (как и вы, наверно, сейчас) я пытался подыскать подходящее слово, с которым можно ассоциировать «моделирование API интерфейса с использованием JavaScript (или Flash, либо чего-нибудь другого), для браузера, у которого не предусмотрен таковой изначально».
Я прекрасно понимал, что крутящийся в голове образ нового термина не имел ничего общего с уже существующим выражением «прогрессирующее улучшение», поскольку исходный уровень моих наработок требовал наличия JavaScript и эмитируемой с его помощью новой технологии, то есть «улучшения» JavaScript как такового здесь нет и близко.
Я также отбросил вариант с термином «плавная деградация», так как при отсутствии, самого исходного функционала браузера, который должен, так сказать, «деградировать», а также без JavaScript (предполагая, что в вашем полифиле использован JavaScript) это тоже не работало.
То есть идея была отыскать легкое в произношении слово, которое ассоциировалось бы с достаточно широкой концепцией того, что эта штука, собственно, должна делать. «Полифил» (англ. «Polyfill») — вот что мне просто пришло на ум, тем не менее это слово вполне удовлетворяло моим требованиям. Первая его часть «Poly-« ( *от греческого «Polloi» — значит много ) говорит о привлечении любого числа технологий, то есть с поставленной задачей можно справиться не только посредством JavaScript, а вторая часть «-fill» ( *наполнять, заполнять ) подразумевает заполнение той дыры браузера, в которой и должна находиться реализуемая таким образом технология. Здесь, к тому же отсутствует такое понятие как «устаревший браузер», поскольку нам понадобится «полифилировать» и новые браузеры.
Насколько я знаю, существует такой продукт как «Polyfilla» (шпаклевка в США), представляющий собой наносимую на стены пасту с целью замазывания дыр и трещин. И мне на самом деле по-душе эта идея визуализации того, как мы, так сказать, «ремонтируем» браузер. Поскольку стена сама по себе плоская значит, вы можете нарисовать на ней что угодно или наклеить обои на ваш вкус.
В свое время я получил отзыв, в котором выражалось мнение, что «данное слово необходимо сменить», однако на тот момент сообщество как никогда нуждалось в подходящем слове, так, как когда-то мы нуждались в терминах подобных Ajax, HTML5, Web 2.0 — в чем-нибудь, чем можно обозначить наши идеи. И неважно, что слово не идеально, оно твердо стоит на ногах, принято сообществом разработчиков и дизайнеров и все прекрасно понимают его смысл.
На самом деле я никогда намеренно не навязывал этот термин, а просто применил его в некоторых ключевых местах (по большей части в книге) и на сколько я помню спустя пару (или достаточно много) месяцев, именно после презентации Пола Айриша (Paul Irish), в которой им напрямую было отражено слово «полифил», данный термин получил широкое распространение. (Мне кажется, что немалую роль сыграло добавление в эту презентацию страницы «Modernizr HTML5 shims & polyfill».)
Определения.
Несколько примеров.
Вот вам пример: интерфейс sessionStorage доступен во всех последних версиях браузеров (IE8 и выше), но отсутствует в IE7 и ниже.
Для того, чтобы включить такую поддержку в старых, не обеспечивающих интерфейс sessionStorage браузерах, можно использовать полифил.
Теперь, имея в наличии полифилер, я, как веб-разработчик могу полностью рассчитывать на использование сессионного интерфейса Web Storage API и более не нуждаюсь в дальнейшем тестировании своего кода либо его форкинге для обработки различных ситуаций.
Заключение.
Не так давно Пол Айриш опубликовал список доступных полифилов и шимов — отличный ресурс, содержащий впечатляющий список средств от головной боли, вызываемой у нас разработчиков старыми версиями браузеров.
По всей видимости, использование полифилов отлично зарекомендовало себя, и неплохо было бы и вам начать применять этот подход в тех случаях, когда необходимо повысить функциональность старых (а иногда и новых) браузеров до желаемого уровня.
Полифил
Полифил — это фрагмент кода (в сети — обычно JavaScript), который позволяет использовать современную функциональность в более старых браузерах, которые не поддерживают ее по умолчанию.
Например, полифил можно использовать, чтобы эмулировать функциональность text-shadow в IE7 с помощью нативных фильтров браузера, или рем и медиавыражения, динамически меняя стилизацию в нужных случаях с помощью JavaScript, или что-либо еще, что вам потребуется.
Из-за меньшей производительности и ограниченной функциональности нельзя использовать исключительно полифилы. Нативная реализация API быстрее и с ней можно сделать больше, чем с помощью полифила. Например, полифил Object.create может эмулировать только то, что доступно для ненативной реализации Object.create.
В других случаях полифилы нужны, чтобы разрешить ситуации, когда браузеры реализуют одни и те же возможности разными способами. Тогда полифил использует нестандартные возможности конкретного браузера, чтобы в результате определенная функциональность была совместима с действующими стандартами JavaScript. Хотя такое применение полифилов и редкость сейчас, во времена IE6 и Netscape, когда каждый браузер реализовывал JavaScript очень по-разному, оно было широко распространено. Первая версия JQuery была ранним примером полифила. Она представляла собой компиляцию из обходных путей, специфических для определенных браузеров, которая предоставляла JavaScript-разработчикам единый API для всех браузеров. В то время одной из наибольших проблем было заставить сайт работать на всех устройствах: браузеры настолько существенно различались, что порой код приходилось писать совершенно по-разному и разрабатывать разные пользовательские интерфейсы, исходя из используемого пользователем браузера. Таким образом, у JavaScript-разработчиков был доступ только к очень лимитированному количеству JavaScript API, которые работали более или менее одинаково во всех браузерах. Сейчас использование полифилов для взаимодействия со специфичными для браузера реализациями возможностей менее распространено, так как современные браузеры в большинстве своем имеют большой набор стандартизированных API.
Полифилы что это такое
Полифилы что это такое
Здравствуйте! В этом уроке я вкратце хочу осветить такой вопрос, как полифилы. Надо отметить, что JavaScript – это динамично развивающийся язык программирования. Регулярно появляются предложения о добавлении в него новых возможностей, они естественно анализируются, и, если предложения одобряются, то описания новых возможностей языка переносятся в черновик стандарта, а затем уже публикуются в спецификации.
Разработчики JavaScript-движков сами решают, какие предложения реализовывать. Они могут заранее добавить в браузеры поддержку функций, которые всё ещё находятся в черновом варианте, и отложить разработку функций, которые уже перенесены в спецификацию, потому что они менее интересны разработчикам или более сложные в реализации.
Таким образом, довольно часто реализуется только часть стандарта.
Babel
Когда мы используем современные возможности JavaScript, некоторые движки могут к сожалению не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это такой транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть 2 части Babel:
2 интересных хранилища полифилов:
Таким образом, чтобы современные функции поддерживались в старых движках, вам надо установить транспилер и добавить полифил.
Браузер Google Chrome поддерживает современные функции, можно запускать новейшие примеры без каких-либо транспилеров, но и другие современные браузеры тоже хорошо работают.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.