Shim（垫片）与Polyfill（填充物）的区别

在 JavaScript 开发中，开发者会遇到一些术语，比如 shim 和 polyfill。两者在处理跨浏览器兼容性方面都非常重要，但它们的用途不同。区分这两者对于决定应首先为哪个环境进行编码非常有益。在本文中，您将了解 Shim 和 Polyfill 之间的区别。

函数定义

• Shim： Shim 是一种代码，它提供了一个接口，将新的 API 引入旧的上下文。之后，默认情况下，它会为旧上下文不支持的新功能实现逻辑。
• Polyfill： Polyfill 是一种 Shim，如果在客户端环境中缺少某个功能，它就会实现该功能。它提供了与较新环境中可用的标准 API 等效的功能。

参数

• 通常，shim 和 polyfill 在传统意义上没有参数。相反，它们会检查某些函数或方法的存在性，并在它们缺失时进行定义。

语法

Shim 和 Polyfill 的语法涉及条件检查和方法定义。以下是两者的通用语法：

Shim 语法

Polyfill 语法

特点

• Shim
  
  • 它添加了缺失的功能。
  • 它是可定制的，并且可以适应各种需求。
• Polyfill
  
  • 它模仿原生 API。
  • 它确保与标准化方法的一致性。

优点

• Shim
  
  • 它可以引入新功能。
  • 它增强了与旧环境的兼容性。
• Polyfill
  
  • 它提供标准化功能。
  • 它减少了代码中需要变通方法的需要。

缺点

• Shim
  
  • 它不能遵循标准规范。
  • 如果实现不当，可能会导致不一致。
• Polyfill
  
  • 它可能会增加代码大小和复杂性。
  • 如果过度使用，可能会对性能产生影响。

目的和范围

• Shim： 总的来说，它专注于通过添加新功能或修改现有功能来弥合不同环境之间的差距。虽然它能够通过在集合区域内外仅复制标准化 API 层来服务于类似目的，但它更通用。
• Polyfill： 它非常适合在特定上下文中复制可用的 API。它也更接近标准规范，以便为用户提供相似的体验。

目的和范围

• Polyfill
  
  • 目的：它专门针对在缺乏标准化 API 的环境中复制它们。Polyfill 确保标准（如 ECMAScript）定义的功能可用，模仿这些功能的精确行为。
  • 范围：与 shim 相比，更窄，更集中。Polyfill 旨在通过复制标准功能的行为来提供一致的 API 表面，从而能够在不改变行为的情况下在旧环境中使用现代 API。
• Shim
  
  • 目的：在环境中缺少该功能、模式或 API 的情况下，添加或修改功能。Shim 可能会提供额外的或状态行为，这些行为可能与标准化规范指标不符。
  • 范围：它比 polyfill 更广泛，更灵活。这些活动可以是 shim——即插入式解决方案，在缺乏足够的内置功能的情况下，可以提高与新代码或标准的兼容性。

实现复杂性

• Shim
  
  • 复杂性： Shim 可能涉及复杂的逻辑来引入或改编功能。这种复杂性源于 shim 可能需要考虑不同环境中的各种行为并引入全新的功能。
  • 示例：在库中实现自定义事件系统，以在不同浏览器之间统一工作。
• Polyfill
  
  • 复杂性：通常涉及实现明确定义的标准化行为。Polyfill 需要密切遵循它们所复制功能的规范，这可以简化它们的实现，但需要精确遵守标准。

用例

• Shim
  
  • 用例：它适用于在标准 API 中不存在但应用程序功能必需的情况下引入新功能或行为。Shim 非常适合为自定义或非标准功能创建跨浏览器兼容性。
  • 示例：一个库，它为 DOM 操作引入了一个新的方法，而该方法在标准 DOM API 中不存在。
• Polyfill
  
  • 用例：它最适合确保在旧环境中可以使用现代和标准化的功能。Polyfill 对于在不同浏览器和环境之间维护与标准化 API 的一致性和兼容性至关重要。
  • 示例：确保在不原生支持 Promise 的浏览器中可以使用 Promise 功能。

开发和维护

• Shim
  
  • 开发：需要仔细考虑，以确保引入或改编的功能不会与未来的浏览器更新或其他库冲突。Shim 通常需要处理各种边缘情况和特定于浏览器的行为。
  • 维护：由于需要跟上浏览器行为和规范的变化，因此可能具有挑战性。
  • 示例：Shim 用于在不支持触摸事件的浏览器中添加自定义触摸事件处理。
• Polyfill
  
  • 开发：它侧重于忠实地复制标准 API，只要 polyfill 紧密遵循官方规范，这可能很简单。
  • 维护：如果它与官方规范保持一致，则更容易维护，因为标准的变化会驱动 polyfill 的更新。
  • 示例：用于 fetch API 的 polyfill，它提供了一种跨不同浏览器进行 HTTP 请求的一致方法。

兼容性策略

• Shim
  
  • 策略： Shim 通常提供对现有 API 更高级别的抽象，以确保兼容性。它们可能会包装或覆盖现有方法以引入新行为或修复旧实现中的问题。
  • 示例：shim 可能会重新定义 addEventListener 方法的行为，以确保它在所有浏览器中都能一致地工作，即使某些浏览器存在错误或非标准实现。
• Polyfill
  
  • 策略： Polyfill 通过在环境中直接实现缺失的功能来努力实现与现代标准的特性对等。它们旨在精确地复制现代 API 在规范中定义的行为。
  • 示例：fetch API 的 polyfill 将完全按照指定实现 API，确保使用 fetch 的代码在所有环境中表现相同。

修改范围

• Shim
  
  • 修改范围： Shim 可以对环境进行广泛修改。它们可以添加、更改或增强 JavaScript 运行时的多个方面，包括添加全新的全局对象或修改现有对象。
  • 示例：一个用于增强 Date 对象的 shim 可能会添加几个新的日期操作方法，这些方法在标准规范中不存在。
• Polyfill
  
  • 修改范围： Polyfill 更具针对性，通常会修改或添加特定的方法或对象。它们确保缺失的标准化功能可用，而不会改变环境的其他无关部分。
  • 示例：Array.from 的 polyfill 将仅向 Array 对象添加该特定方法，而不会影响其他方法或对象。

结论

总之，值得注意的是，它们都是 JavaScript 环境中不可避免且互补的组成部分。Shim 是通用的且无处不在的，它们提供了一种解决新颖和不同类型问题的中间解决方案，并经常引入新的或修改后的功能。另一方面，Polyfill 更侧重于确保标准 API 的存在并且行为一致，无论上下文如何。了解何时以及如何利用每种技术，可以极大地增强开发人员创建无错误且与各种复杂环境兼容的程序以造福最终用户 k 的能力。