在前端开发中，我们经常听到“Shim”和“Sham”这两个术语。这两个术语都是解决跨浏览器问题的方案。但是，它们之间有什么区别呢？本文将详细介绍这两种方案，并提供示例代码。
Shim
“Shim”可以理解为“垫片”或“补丁”，用于解决旧版本浏览器不支持新技术或 API 的问题。通常情况下，“Shim”是一个 JavaScript 库或插件，通过模拟新技术或 API 的行为来实现兼容性。例如，如果某个浏览器不支持 HTML5 的 canvas 元素，那么可以使用一个 Canvas Shim 库来模拟 canvas 的行为。
以下是一个简单的 Canvas Shim 示例代码：
if (!document.createElement('canvas').getContext) {
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/canvas-polyfill/0.1.0/canvas-polyfill.min.js';
document.head.appendChild(script);
}上述代码首先检查当前浏览器是否支持 canvas 元素，如果不支持，则动态加载一个 polyfill 库来提供 canvas 功能。
Sham
与 “Shim” 不同，“Sham”更多地涉及到测试和模拟。它是一种虚拟的实现，用于在开发和测试期间模拟接口或行为。例如，在单元测试中，可能需要模拟一个网络请求来测试代码的正确性，这时就可以使用一个 XMLHttpRequest Sham 来模拟网络请求。
以下是一个简单的 XMLHttpRequest Sham 示例代码：
-- -------------------- ---- -------
-- -------- -------------- ----
-- --------------------- --- ------- -
--------------------- - ---------- -
--------------- - --
----------- - ----
----------------- - ------------ ------- ----------
--------- - ----------
--------- - ----------
--
-上述代码使用 Jest 测试框架中的全局变量 global 来创建一个 XMLHttpRequest Shim，以模拟网络请求。在测试代码中调用真正的 XMLHttpRequest 对象时，可以替换成这个 Shim 对象来模拟网络请求的结果。
总结
“Shim”与“Sham”都是解决跨浏览器问题的方案，只是从不同角度出发。前者提供了一种针对旧版本浏览器的兼容性解决方案，后者则提供了一种模拟和测试接口的方法。在实际开发中，我们可以根据具体情况选择合适的方案来解决问题。
值得注意的是，虽然 Shim 和 Sham 可以解决许多兼容性问题，但它们并不是银弹。在使用它们时，我们仍然需要谨慎地检查我们的代码，并测试它们在各种浏览器和设备上的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25708