HTML5中的polyfills是什么意思？

Question

HTML5中的polyfills是什么意思？ 我在很多關於 HTML5 的網站上看到了這個詞，例如HTML5-Cross-Browser-Polyfills。

因此，我們在這里收集了所有的 shims、fallbacks 和 polyfill，以便將 HTML5 功能植入本身不支持它們的瀏覽器中。

我其實不明白 polyfills 是什么意思。

它是新的 HTML5 技術還是 JavaScript 庫？ 在 HTML5 之前我從未聽說過這個詞。

shims、fallbacks 和 polyfills 之間有什么區別？

Answer 1

polyfill 是一種瀏覽器后備，在 JavaScript 中制作，它允許您希望在現代瀏覽器中工作的功能在舊瀏覽器中工作，例如，支持 canvas（舊瀏覽器中的 Z6BFF62B10D884FB77428CFE168.CD783 功能）

It's sort of an HTML5 technique, since it is used in conjunction with HTML5, but it's not part of HTML5, and you can have polyfills without having HTML5 (for example, to support CSS3 techniques you want).

這是一個好帖子：

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

以下是 Polyfill 和 Shim 的完整列表：

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

Answer 2

首先讓我們澄清一下 polyfil 不是什么：polyfill 不是 HTML5 標准的一部分。 polyfill 也不限於 Javascript，即使您經常看到在這些上下文中提到 polyfill。

術語 polyfill 本身是指一些代碼，“允許您擁有一些您期望在當前或“現代”瀏覽器中的特定功能，也可以在不支持該功能的其他瀏覽器中工作。”

polyfill 的來源和示例在這里：

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

Answer 3

polyfill 是一段代碼（或插件），它提供了您（開發人員）期望瀏覽器原生提供的技術。

Answer 4

polyfill 是一種 shim，它用對 shim 的調用替換了原始調用。

例如，假設您想使用 navigator.mediaDevices object，但並非所有瀏覽器都支持此功能。 您可以想象一個提供 shim 的庫，您可以像這樣使用它：

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

在這種情況下，您將顯式調用 shim，而不是使用原始 object 或方法。 另一方面，polyfill 替換了原始對象上的對象和方法。

例如：

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

在您的代碼中，您似乎使用的是標准的 navigator.mediaDevices object。 但實際上，polyfill（示例中的adapter.js）已經用它自己的替換了這個object。

它取代它的是一個墊片。 這將檢測該功能是否本機支持並使用它，如果不支持，它將使用其他 API 解決它。

所以 polyfill 是一種“透明”的墊片。 這就是 Remy Sharp（這個詞的創造者）所說的“如果你刪除了 polyfill 腳本，你的代碼將繼續工作，盡管 polyfill 被刪除了，但不需要任何更改”。

Answer 5

web開發中的 polyfill 是在不支持該功能的 web 瀏覽器上實現該功能的代碼。 It usually refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard (supported by some older browsers) or a proposed standard (not supported by any browsers) on existing browsers. 根據定義，“polyfill 是瀏覽器 API 的墊片”。

HTML5 標准不包括 polyfill。 Polyfills 不限於 Javascript，盡管它們在上下文中經常被提及。

Answer 6

除了其他答案之外，這里還有一些可能會有所幫助的高級想法和信息。

Pollyfills 就像特定瀏覽器的兼容性補丁。 墊片是對特定 arguments 的更改。 如果說 @mediaquery 與瀏覽器不兼容，則可以使用后備。

這有點取決於您的應用程序/網站需要兼容的要求。

您可以查看此站點以了解特定庫與特定瀏覽器的兼容性。 https://caniuse.com/