440

两者似乎都用于 Web 开发界，请参见HTML5 Cross Browser Polyfills，其中说：

所以在这里我们收集了所有的 shims、fallbacks 和 polyfills...

或者，有es5-shim项目。

在我当前的项目中，我们使用了其中的一些，我想把它们都放在同一个目录中。那么，我应该怎样称呼这个目录---shims或polyfills？

4

6 回答 6

426

  • 垫片是执行 API 调用拦截并提供抽象层的任何代码。它不一定限于 Web 应用程序或 HTML5/CSS3。

  • polyfill是一种shim ，它使用通常使用 Javascript 或 Flash 的现代 HTML5/CSS3 功能来改造旧版浏览器。

回答您的具体问题，shims如果您想保持目录通用，请致电您的目录。

于 2011-07-12T20:56:54.580 回答
279

垫片

如果您熟悉适配器模式，那么您就会知道什么是 shim。Shims 拦截 API 调用并在调用者和目标之间创建一个抽象层。通常，垫片用于向后兼容。例如，es5-shim npm 包可以让你编写 ECMAScript 5 (ES5) 语法，而不用关心浏览器是否运行 ES5。以Date.now为例。这是 ES5 中的一个新函数，其中 ES3 中的语法是new Date().getTime()。如果您使用es5-shim，您可以编写Date.now，如果您运行的浏览器支持 ES5，它就会运行。但是，如果浏览器正在运行 ES3 引擎，es5-shim将拦截对Date.now的调用而是返回new Date().getTime()。这种拦截称为匀场。来自 es5-shim 的相关源代码如下所示：

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

填充物

Polyfilling 实际上只是 shiming 的一个特殊版本。Polyfill 是关于在 API 中实现缺失的功能，而 shim 不一定是关于实现缺失的功能，因为它是关于纠正功能。我知道这些似乎过于模糊，但是当 shims 被用作更广泛的术语时，polyfill 用于描述为旧版浏览器提供向后兼容性的 shims。因此，虽然 shims 用于掩盖旧罪，但 polyfills 用于将未来的增强带回过去。 例如，IE7 中不支持 sessionStorage，但 sessionStorage npm 包中的polyfill将通过使用诸如在窗口的 name 属性中存储数据或使用 cookie 等技术在 IE7（及更早版本）中添加此功能。

于 2015-07-30T10:34:49.593 回答
101

据我了解：

polyfill 是检测某个“预期”API 是否缺失并手动实现它的代码。例如

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

垫片是拦截现有 API 调用并实现不同行为的代码。这里的想法是在不同的环境中标准化某些 API。因此，如果两个浏览器以不同方式实现相同的 API，您可以在其中一个浏览器中拦截 API 调用，并使其行为与另一个浏览器保持一致。或者，如果浏览器的其中一个 API 存在错误，您可以再次拦截对该 API 的调用，然后绕过该错误。

于 2013-06-26T22:27:11.147 回答
68

引用Axel Rauschmayer从他的《说 JavaScript 》一书中的话：

  • shim 是一个库，它将新 API 引入旧环境，仅使用该环境的方法。
  • polyfill 是浏览器 API 的垫片。它通常检查浏览器是否支持 API。如果没有，polyfill 会安装自己的实现。这允许您在任何一种情况下都使用 API。polyfill 一词来自家居装修产品；根据雷米夏普：

    Polyfilla 是一种英国产品，在美国被称为 Spackling Paste。考虑到这一点：把浏览器想象成一堵有裂缝的墙。这些 [polyfills] 有助于消除裂缝，并为我们提供了一个很好的平滑浏览器墙来使用。

于 2014-06-24T16:30:10.530 回答
8

几年前写的一篇很棒的文章很好地解释了这一点：

什么是 Polyfill？

在文章中，（2）简单地对比如下：

Shim：您可以添加的一段代码（即JavaScript）可以修复一些功能，但它通常会有自己的 API。

Polyfill：你可以加入的东西（即JavaScript），它会默默地模仿现有的浏览器 API，否则这些 API 不受支持。

于 2014-11-06T04:10:10.537 回答
0

Polyfill 只是一个脚本，它会检查浏览器中某个 API 的存在，好吗？如果浏览器中不存在该 API，polyfill（这是一个简单的脚本）将执行如下操作：

例如，我将在浏览器中使用蓝牙 API，并且我知道某些浏览器没有这样的 API，所以我会写这样的东西来检查我的 API 是否存在：

if(!navigator.bluetooth) { // write polyfill here }

Shim 也是一个脚本，主要作为插件或库提供，它是如何工作的？

实际上，它将覆盖现有的 API 并实现不同的行为，以支持旧浏览器中的新 API。值得注意的是，Shims 主要用于向后兼容。

于 2020-11-29T16:23:32.280 回答