如果你是一名前端开发人员，你肯定不想让你的网站只能在某些浏览器上运行。但是，在不同的浏览器中，你的代码可能会有不同的表现，这就是所谓的浏览器兼容性问题。为了解决这种问题，我们可以使用一些跨浏览器向前兼容的模块化途径，如 Polyfill、Custom Elements 和 Shim。
Polyfill
Polyfill 是指在不支持某些标准 API 或功能的浏览器中，通过 JavaScript 实现该 API 或功能的方式。通俗理解，Polyfill 是一种将新的 Web API 应用于旧的浏览器的方法，即为旧浏览器添加新功能。
一个例子是 Array.prototype.forEach() 方法。在 IE8 及以下版本的浏览器中，没有 forEach() 方法，但你仍然可以使用 Polyfill 实现它。
以下是一个用于 Polyfill Array.prototype.forEach() 方法的示例代码：
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (callbackFunction, thisArg) {
var array = this;
for (var i = 0; i < array.length; i++) {
callbackFunction.call(thisArg, array[i], i, array);
}
};
}在上述代码中，我们检查浏览器是否支持 Array.prototype.forEach() 方法，如果不支持，就手动实现它。
Custom Elements
Custom Elements 是 Web Components 技术的一部分，允许开发人员创建新的 HTML 元素。它使开发人员可以定义自己的 HTML 标签，并在其上应用样式和行为。与传统的 HTML 和 CSS 不同，Custom Elements 具有自己的生命周期、行为和属性。
在 Custom Elements 中，你可以创建一个全新的 HTML 元素，并定义它的样式和行为。以下是一个例子：
<my-custom-element></my-custom-element>
在上面的代码中，my-custom-element 不是标准 HTML 标记，但是作为 Custom Element，它可以被定义、渲染和操作。
以下是使用 Custom Elements API 定义新元素的示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ------- ------ -----------
-
-
------------------------------------------ -----------------在上述示例代码中，我们定义了一个名为 MyCustomElement 的 Custom Element 类，并将其继承自 HTMLElement 类。在 connectedCallback 方法中，我们设置了元素的 innerText 属性，以便当元素第一次连接到文档 DOM 时显示相应的文本内容。
Shim
Shim 是指在浏览器中实现缺少的 JavaScript API 的库。类似 Polyfill，但它不是为了实现新功能，而是为了填充不同浏览器之间的各种差异。Shim 的目标是标准化，为开发人员提供一致的功能。
一个例子是 fetch() 方法。这是一个现代的 JavaScript API，用于在浏览器中执行 HTTP 请求。但是，由于某些浏览器不支持它，你需要使用一个 Shim 库来填补它们之间的差距。以下是一个使用 whatwg-fetch 库的示例代码：
-- -------------------- ---- -------
------ ---------------
--------------------------------------
-------------- -- -
-- ----
--
------------ -- -
-- ----
---在上述示例代码中，我们使用 whatwg-fetch 库导入了 fetch() 方法。使用 fetch() 方法后，我们可以执行 HTTP 请求并在 then() 方法中处理响应。如果 HTTP 请求出现错误，则可以使用 catch() 方法来捕获和处理该错误。
总结
Polyfill、Custom Elements 和 Shim 是跨浏览器向前兼容的模块化途径。使用这些方法可以创建良好的用户体验并避免浏览器兼容性问题。开发人员可以根据自己的需要选择使用这些方法中的任何一种或多种。始终记住，越早地解决问题，越不必担心浏览器兼容性问题。
代码示例：https://codepen.io/heyun/collab/9241ddca-c2df-476a-8555-e5dc05ba5a5b
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d403e48841e9894b8c1a2