В чем разница между прокладкой и полифилом?


406

Похоже, что оба они используются в кругах веб-разработки, см., Например, HTML5 Cross Browser Polyfills , где написано:

Итак, здесь мы собираем все прокладки, запасные варианты и полифиллы ...

Или есть проект es5-shim .

В моем текущем проекте мы используем несколько из них, и я хочу поместить их все в один каталог. Итак, как мне назвать этот каталог --- shimsили polyfills?


6
reopen: я полагаю, что «то, что я должен назвать этим каталогом», может быть основано на мнении, но на самом деле не учитывается более широкий контекст вопроса - и при этом это не самый важный аспект этого вопроса. Кажется, что все ответы здесь согласны, и в них широко используются факты, ссылки и специальные знания.
— Нобар

Ответы:


386
  • Прокладка является любой кусок кода , который выполняет перехват вызова API и обеспечивает уровень абстракции. Это не обязательно ограничено веб-приложением или HTML5 / CSS3.

  • Polyfill является типом прокладки , что дооснащения устаревших браузеров с современной HTML5 / CSS3 функций , которые обычно с помощью Javascript или Flash.

Отвечая на ваш конкретный вопрос, позвоните в ваш каталог, shimsесли вы хотите, чтобы каталог был общим.


234

шайба

Если вы знакомы с шаблоном адаптера, то вы знаете, что такое прокладка. Shims перехватывает вызовы API и создает абстрактный слой между вызывающей стороной и целью. Обычно прокладки используются для обратной совместимости. Например ES5-регулировочная шайба пакет NPM позволит вам писать ECMAScript 5 синтаксис (ES5) и не волнует , если браузер работает ES5 или нет. Возьмите Date.now в качестве примера. Это новая функция в ES5, где синтаксис в ES3 будет новым Date (). GetTime () . Если вы используете ES5 тонкие прокладки вы можете написать Date.now и если браузер вы используете в опорах ES5 это будет просто работать. Однако, если браузер работает в ES3 двигатель ES5-прокладка будет перехватывать вызов Date.nowи просто вернуть новый Date (). getTime () вместо этого. Этот перехват называется шимминг. Соответствующий исходный код из es5-shim выглядит следующим образом:

if (!Date.now) {
    Date.now = function now() {
        return new Date().getTime();
    };
}

Polyfill

Полифиллинг - это действительно специализированная версия шимминга. Polyfill - это реализация недостающих функций в API, в то время как шим не обязательно относится к реализации отсутствующих функций, чем к исправлению функций. Я знаю, что они кажутся слишком расплывчатыми, но там, где прокладки используются в качестве более широкого термина, polyfill используется для описания оболочек, которые обеспечивают обратную совместимость для старых браузеров. Таким образом, в то время как прокладки используются для сокрытия старых грехов, полифиллы используются для возврата будущих улучшений во времени. Например, в IE7 нет поддержки sessionStorage, но полифилл в пакете sessionstorage npm добавит эту функцию в IE7 (и более ранние версии), используя такие методы, как хранение данных в свойстве name окна или использование файлов cookie.


107
Таким образом, в то время как прокладки используются для сокрытия старых грехов, полифиллы используются для возврата будущих улучшений во времени. Это подводит итог ко мне. Спасибо за четкое объяснение.
— JohnnyQ

Этот ответ полезен, спасибо. Но мне кажется, что эти два термина часто не используются точно в Интернете, включая es5-shim. Я думаю, что es5-shim - это сочетание прокладок и полифилов по вашему определению.
— Мэтт Браун

WOW -> Таким образом, в то время как прокладки используются для сокрытия старых грехов, полифиллы используются для возврата будущих улучшений во времени. <- Большое спасибо!
— Цеппелин

3
Пример даты выглядит для меня как Polyfill. Почему я думаю, что это Polyfill? Потому что Date.now - это родной вызов. Polyfill добавит эту функцию с тем же API-интерфейсом к браузеру. Шим поставляется с новым API, как: MyShim.Date.now(); Пожалуйста, исправьте меня, если я ошибаюсь.
— TatzyXY

99

Из того, что я понимаю:

Полифилл - это код, который обнаруживает отсутствие определенного «ожидаемого» API и реализует его вручную. Например

if (!Function.prototype.bind) { Function.prototype.bind = ...; }

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


66

Ссылаясь на Акселя Раушмайера из его книги « Говоря на JavaScript» :

  • Shim - это библиотека, которая переносит новый API в более старую среду, используя только средства этой среды.
  • Полифилл - это прокладка для браузера API. Обычно он проверяет, поддерживает ли браузер API. Если это не так, полифилл устанавливает свою собственную реализацию. Это позволяет использовать API в любом случае. Термин polyfill происходит от продукта домашнего улучшения; по словам Реми Шарпа :

    Polyfilla - британский продукт, известный как Spackling Paste в США. Имея это в виду: думайте о браузерах как о стене с трещинами. Эти [polyfills] помогают сгладить трещины и дают нам хорошую гладкую стену браузеров для работы.


9

Шим. Shim - это библиотека, которая переносит новый API в более старую среду, используя только средства этой среды.

Polyfill. В октябре 2010 года Реми Шарп написал в блоге термин «полифилл» [через Рика Уолдрона]:

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


8

Об этом написана фантастическая статья, написанная несколько лет назад:

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

В статье (2) просто противопоставляется как таковой:

Shim: кусок кода, который вы можете добавить (т.е. JavaScript), который исправит некоторую функциональность, но чаще всего имеет собственный API .

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


1
Я думаю, что это вводящее в заблуждение представление как об общем использовании, так и о том, что на самом деле Реми Шарп говорит в своем блоге, на который вы ссылаетесь. Shim наиболее часто используется в качестве синонима polyfill в настоящее время (см особенно ES5-подкладку и ES6-подкладку ) и Реми частности о том, что говорил ему слово «прокладка» намекало пользовательского API (по сравнению с shim.gif). Он очень не диктует, чтобы слова использовались таким образом, и, говоря «мне», он молчаливо признает, что его использование не является универсальным.
— Марк Амери
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.