HTML5中polyfills的含义是什么？

本文翻译自：What is the meaning of polyfills in HTML5?

What is the meaning of polyfills in HTML5? HTML5中polyfills的含义是什么？ I saw this word in many sites about HTML5, eg HTML5-Cross-Browser-Polyfills. 我在许多网站上看到过关于HTML5的这个词，例如HTML5-Cross-Browser-Polyfills。

So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. 所以我们在这里收集所有垫片，后备和polyfill，以便在本身不支持它们的浏览器中植入HTML5功能。

I actually don't understood what is the meaning of polyfills. 我其实不明白polyfills是什么意思。

Is it a new HTML5 technique or a JavaScript library? 它是一种新的HTML5技术还是JavaScript库？ I never heard this word before HTML5. 我从来没有在HTML5之前听过这个词。

And what is the difference between shims, fallbacks, and polyfills? 垫片，后备和填充物之间有什么区别？

---

#1楼

参考：https://stackoom.com/question/Tjjn/HTML-中polyfills的含义是什么

---

#2楼

First off let's clarify what a polyfil is not: A polyfill is not part of the HTML5 Standard. 首先让我们澄清一下polyfil不是什么：polyfill不是HTML5标准的一部分。 Nor is a polyfill limited to Javascript, even though you often see polyfills being referred to in those contexts. 即使您经常在这些上下文中看到polyfill被引用，但polyfill也不限于Javascript。

The term polyfill itself refers to some code that "allows you to have some specific functionality that you expect in current or “modern” browsers to also work in other browsers that do not have the support for that functionality built in. " 术语“polyfill”本身指的是一些代码，“允许您在当前或”现代“浏览器中使用某些特定功能，以便在其他不支持内置功能的浏览器中工作。”

Source and example of polyfill here: 这里的polyfill的来源和例子：

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

---

#3楼

polyfill是一段代码（或插件），它提供了开发人员期望浏览器本机提供的技术。

---

#4楼

A polyfill is a shim which replaces the original call with the call to a shim. polyfill是一种垫片，它通过调用垫片来替换原始调用。

For example, say you want to use the navigator.mediaDevices object, but not all browsers support this. 例如，假设您要使用navigator.mediaDevices对象，但并非所有浏览器都支持此对象。 You could imagine a library that provided a shim which you might use like this: 您可以想象一个提供垫片的库，您可以像这样使用：

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

In this case, you are explicitly calling a shim instead of using the original object or method. 在这种情况下，您显式调用填充程序而不是使用原始对象或方法。 The polyfill, on the other hand, replaces the objects and methods on the original objects. 另一方面，polyfill替换原始对象上的对象和方法。

For example: 例如：

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

In your code, it looks as though you are using the standard navigator.mediaDevices object. 在您的代码中，它看起来好像您正在使用标准的navigator.mediaDevices对象。 But really, the polyfill (adapter.js in the example) has replaced this object with its own one. 但实际上，polyfill（示例中的adapter.js）已将此对象替换为自己的对象。

The one it has replaced it with is a shim. 它取而代之的是一个垫片。 This will detect if the feature is natively supported and use it if it is, or it will work around it using other APIs if it is not. 这将检测该功能是否是本机支持的，如果是，则使用它，如果不是，它将使用其他API解决它。

So a polyfill is a sort of "transparent" shim. 因此，polyfill是一种“透明”的垫片。 And this is what Remy Sharp (who coined the term) meant when saying " if you removed the polyfill script, your code would continue to work, without any changes required in spite of the polyfill being removed ". 这就是Remy Sharp（创造这个术语）的意思，当说“ 如果你删除了polyfill脚本，你的代码将继续工作，尽管polyfill被删除，但不需要任何改变 ”。

---

#5楼

A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, eg, to support canvas (an HTML5 feature) in older browsers. polyfill是一种浏览器后备，由JavaScript构建，允许您希望在现代浏览器中工作的功能在旧版浏览器中工作，例如，支持旧版浏览器中的canvas（HTML5功能）。

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). 它是一种HTML5技术，因为它与HTML5结合使用，但它不是HTML5的一部分，你可以在没有HTML5的情况下使用polyfill（例如，支持你想要的CSS3技术）。

Here's a good post: 这是一篇好文章：

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

Here's a comprehensive list of Polyfills and Shims: 以下是Polyfill和Shims的完整列表：

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