Что означает полифиллы в HTML5?

387

Что означает полифиллы в HTML5? Я видел это слово на многих сайтах о HTML5, например, HTML5-Cross-Browser-Polyfills.

Итак, здесь мы собираем все прокладки, запасные варианты и полифиллы, чтобы внедрить функциональность HTML5 в браузеры, которые их изначально не поддерживают.

Я на самом деле не понял, в чем смысл полифилов.

Это новая техника HTML5 или библиотека JavaScript? Я никогда не слышал это слово до HTML5.

И в чем разница между прокладками, откатами и полифиллами?

Джитендра Вьяс
источник
1
Вы можете проверить для лучшего понимания blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Спасибо за ссылку, объяснение в ссылке очень понятно.
Эндрю Лам

Ответы:

377

Polyfill - это резервный браузер, выполненный на JavaScript, который позволяет функционалу, который вы ожидаете работать в современных браузерах, работать в более старых браузерах, например, для поддержки canvas (функция HTML5) в старых браузерах.

Это своего рода техника HTML5, поскольку она используется в сочетании с HTML5, но она не является частью HTML5, и вы можете иметь полифилы без HTML5 (например, для поддержки техник CSS3, которые вы хотите).

Вот хороший пост:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Вот полный список Polyfills и Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Calvin Froedge
источник
6
Значит, ie7.js также является полифилом
Джитендра Вьяс
1
Да: «Многие исправления, включая прозрачность PNG, стили / селекторы CSS, исправление ошибок рендеринга и т. Д.» Это добавляет эту функциональность через JavaScript, который браузер еще не поддерживает.
Кельвин Фредж
1
Я думаю, что слово Polyfills появилось после HTML5. Отличается ли Shim от Polyfills?
Джитендра Вьяс
16
Шим более обобщенный. Полифилл это тип прокладки. Вот вопрос, который это хорошо объясняет: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill, эта ссылка - больше, чем просто «хороший пост», это фактически полное определение и происхождение слова человеком, который придумал это слово. Выдержка: «продукт Polyfilla (шпаклевка в США) представляет собой пасту, которую можно наносить на стены, чтобы покрыть трещины и отверстия». Пост также охватывает концепцию, которая предшествует прокладке и отличается от polyfill. Это нужно читать, ИМО.
кодирование
64

Прежде всего, давайте выясним, что такое полифил: полифил не является частью стандарта HTML5. Кроме того, полизаполнение не ограничивается Javascript, даже если вы часто видите, что полифилсы упоминаются в этих контекстах.

Сам термин polyfill относится к некоторому коду, который «позволяет вам иметь некоторые специфические функциональные возможности, которые, как вы ожидаете, в современных или« современных »браузерах будут работать и в других браузерах, в которых не встроена поддержка этой функции».

Источник и пример полифилла здесь:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Jarvis
источник
32

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

Ранджит Грива
источник
2
Хорошо объяснил.
Евгений Сунич
Коротко, четко и точно. Это должен быть принятый ответ.
Vibhor Dube
16

Полифилл - это прокладка, которая заменяет исходный вызов вызовом прокладки.

Например, допустим, вы хотите использовать объект navigator.mediaDevices, но не все браузеры поддерживают это. Вы можете представить себе библиотеку, которая предоставляет прокладку, которую вы можете использовать так:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

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

Например:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

В вашем коде это выглядит так, как будто вы используете стандартный объект navigator.mediaDevices. Но на самом деле, polyfill (в данном случае адаптер.js) заменил этот объект своим собственным.

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

Таким образом, полифилл - это своего рода «прозрачная» прокладка. И это то, что имел в виду Реми Шарп (который придумал этот термин), когда говорил: « Если вы удалите скрипт polyfill, ваш код продолжит работать без каких-либо изменений, несмотря на удаление polyfill ».

Ричард Шепард
источник
10
что такое прокладка?
Оливер Уоткинс
3
@ Оливер Уоткинс Если вы знакомы с шаблоном адаптера, то вы знаете, что такое прокладка. Shims перехватывает вызовы API и создает абстрактный слой между вызывающей стороной и целью. Обычно для обратной совместимости используются прокладки
Anurag Ratna
@AnuragRatna Я бы не использовал «перехват», чтобы избежать путаницы. «Перехват» обычно относится к коду, который (прозрачно) перехватывает, т.е. без ведома вызывающего. Оболочки обеспечивают вызовы API для обратной совместимости
Qetesh