如何在 JavaScript 中使用 polyfill？

在开发 JavaScript 应用程序时，我们可能会遇到一些历史版本的浏览器（例如 IE），这些浏览器可能不支持现代 JavaScript 的一些功能。为了确保我们的代码在这些旧浏览器中正常工作，我们可以使用一个叫做 polyfill 的技术。

1. 什么是 polyfill？

Polyfill 是一种 JavaScript 代码，它提供了一些缺失的 API 或功能，以便在旧版本的浏览器中模拟现代浏览器的行为。

1.1 Polyfill 的优缺点

Polyfill 有一些优点和缺点。下面列出了一些：

优点：

可以模拟现代浏览器的行为，让旧版本的浏览器也可以使用现代 JavaScript。

可以使我们的代码可维护性更高，因为我们不需要编写一堆针对不同浏览器的代码。

缺点：

使用 Polyfill 会增加代码的体积。

有些 Polyfill 的实现可能不太完美，可能会导致一些问题。

2. 如何使用 polyfill？

使用 Polyfill 可以分为以下几个步骤：

2.1 找到需要 Polyfill 的功能

首先，我们需要找到我们需要在旧版本浏览器中支持的功能。这可以通过查看浏览器兼容性矩阵来获得。一些流行的兼容性矩阵包括 Can I Use 和 MDN Web Docs。

例如，我们想让我们的应用在 IE 中支持 Array.prototype.includes 方法。通过查看 Can I Use，我们可以看到这个函数在 IE 中不被支持。

2.2 下载适当的 Polyfill 库

一旦我们知道了我们需要支持的功能，我们需要下载适当的 Polyfill 库。有许多的 Polyfill 库可供选择，为不同的功能提供了支持。

2.3 引入 Polyfill 库

通常情况下，我们可以将 Polyfill 库作为脚本标签引入到我们的 HTML 页面中。一些 Polyfill 库可以通过 npm 包管理器安装，并通过模块加载器导入到我们的 JavaScript 代码中。

以下代码展示了如何在 HTML 页面中引入一个 Polyfill 库：

 

<script src="path/to/polyfill.js"></script>

2.4 使用 Polyfill API

一旦我们引入了适当的 Polyfill 库，我们就可以使用代码中缺失的 API 或功能了。

以下代码展示了如何在 JavaScript 代码中使用 Array.prototype.includes 函数的 Polyfill：

 

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
    'use strict';
    var O = Object(this);
    var len = parseInt(O.length) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1]) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) {
        return true;
      }
      k++;
    }
    return false;
  };
}

3. 总结

Polyfill 是一种 JavaScript 技术，它可以提供缺失的 API 或功能，为旧版本的浏览器提供现代浏览器的行为。使用 Polyfill 可以使我们的代码更具可维护性，让我们避免编写大量针对特定浏览器的代码。要使用 Polyfill，我们需要找到我们需要支持的功能、下载适当的 Polyfill 库、引入 Polyfill 库，并在代码中使用缺失的 API 或功能。