Javascript HTML5 中的 polyfills 是什么意思?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7087331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:47:38  来源:igfitidea点击:

What is the meaning of polyfills in HTML5?

javascripthtmlfallbackpolyfillsshim

提问by Jitendra Vyas

What is the meaning of polyfills in HTML5? I saw this word in many sites about HTML5, e.g. HTML5-Cross-Browser-Polyfills.

HTML5 中的 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? I never heard this word before HTML5.

它是一种新的 HTML5 技术还是一个 JavaScript 库?在 HTML5 之前我从未听说过这个词。

And what is the difference between shims, fallbacks, and polyfills?

shims、fallbacks 和 polyfills 之间有什么区别?

采纳答案by Calvin Froedge

A polyfill is a browser fallback, made in JavaScript, that allows functionality you expect to work in modern browsers to work in older browsers, e.g., to support canvas (an HTML5 feature) in older browsers.

polyfill 是一种浏览器回退,用 JavaScript 制作,它允许您期望在现代浏览器中工作的功能在旧浏览器中工作,例如,在旧浏览器中支持画布(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:

这是 Polyfills 和 Shims 的完整列表:

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

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

回答by Jarvis

First off let's clarify what a polyfil is not: A polyfill is not part of the HTML5 Standard. Nor is a polyfill limited to Javascript, even though you often see polyfills being referred to in those contexts.

首先让我们澄清一下 polyfil 不是什么:polyfill 不是 HTML5 标准的一部分。polyfill 也不限于 Javascript,即使您经常看到在这些上下文中引用 polyfill。

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/

回答by Ranjeet Mane

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.

polyfill 是一段代码(或插件),它提供您(开发人员)希望浏览器本地提供的技术。

回答by Richard Shepherd

A polyfill is a shim which replacesthe original call with the call to a shim.

polyfill 是一种 shim,它对shim的调用替换原始调用。

For example, say you want to use the navigator.mediaDevices object, but not all browsers support this. You could imagine a library that provided a shim which you might use like this:

例如,假设您想使用 navigator.mediaDevices 对象,但并非所有浏览器都支持此功能。您可以想象一个提供垫片的库,您可以像这样使用它:

<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.

在这种情况下,您是显式调用 shim 而不是使用原始对象或方法。另一方面,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. But really, the polyfill (adapter.js in the example) has replaced this object with its own one.

在您的代码中,您似乎在使用标准的 navigator.mediaDevices 对象。但实际上,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. 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".

所以 polyfill 是一种“透明”垫片。这就是 Remy Sharp(创造该术语的人)在说“如果你删除了 polyfill 脚本,你的代码将继续工作,尽管删除了 polyfill 不需要任何更改”的意思。